How do I make the image smaller and into a pattern? I’m using cover top but not side
hello!
i have a bit of a silly question; does the partially transparent feature work on user profiles? or is this only for bulletins?
example of supposed issue:
Hello! it seems like im struggling to use this code, it keeps hiding all the other codes i have i added the <br> on top but it seems to mot work?
is there a way to possibly make it be able to scroll?, some of my profiles seem to big for the page
It should already scroll, the scroll box may be larger than your screen so what's at the very bottom gets cut off. If you add space at the bottom with <br> that should push your profile up to be visible.
no I mean like, the fullscreen code, is it possible for it to scroll down?, it seems that it can't scroll down and its fixed in a certain position
Unsure if you still need help with this but I think the problem is displayed here? https://toyhou.se/chaxse/characters
I went and tried to figure it out and I think I got it!
the code line below needs to be slightly changed
< div class="card-transparent" style="height:820px;overflow-y:auto;overflow-x:hidden;scrollbar-width: none;" >
you just need to replace the 820px with 920px that should fix it!
hello... it looking good to use... but idk how can use it.. and where.. me will try not work.. so i need help of it.. where i use it
hey ive been having this problem for a while- the "cover top bar but not side bar" seems to glitch the gallery and makes it move to the top, making it overlay with the code
this is circlejourney's editor but it also looks like this on actual TH
Hi! I hope this makes sense- I'm wondering what I need to do to make the background cover the left side of my profile but still be able to scroll to the comments/view it properly? Been trying to tweak it but can't seem to get it right ;;
The way that code is set up is it's fixed to the screen/can't scroll past it. There is an invisible box with a scroll bar for content to be scrollable (kind of a wonky workaround for not being able to scroll). I've seen profile coding with what you mean and it'd probably be best to find another code for it, I'm not sure how you'd adjust this one without rewriting the whole code.
This user is not visible to guests.
It's the first one to cover the bulletin, it adds a background inside the bulletin (negative margins make it reach the edges of the bulletin). You should add an image for the background inside the bulletin and text/content should be inside it for it to work. I don't have premium for CSS so everything should work without CSS enabled.
<div style="margin-left: -20px; margin-right: -20px; margin-top: -20px; margin-bottom: -47px;">
<div class="p-3" style='background: url("image"); background-attachment: fixed;width: 100%;background-position:center; border-radius: 3px;'>
Add content here
</div>
</div>
the code just bugged so much that now when i go to settings to take it off it takes all the screen and i can't go to the code lol
If it's on your profile, the link to edit code is https://toyhou.se/~account/profile and you should be able to switch to code view if you're editing on a computer. I'm not sure if mobile is the same so if you're on mobile, that might be causing issues.
im in computer, the thing is i can't switch the code view, like it doesn't work and the cursor has that thingy when you're writing, i don't know how to explain it lol
If you use inspect element/developer tools you can temporarily remove pieces of code to reach anything it's covering (works on any page).
For editing your profile specifically, you can turn off WYSIWYG and it will not preview the code when you try to edit it, it'll just display the code as text.
https://toyhou.se/~account/display
Hello, I've been trying to get these buttons to center in the screen but they wouldn't budge one bit for some reason. I'd really appreciate any help since these buttons are driving me crazy since morning @~@
Hello, I wanted to comment to see if you could help me with a problem that occurred while using this code
I went to insert it on one of my characters profiles, it didn’t seem to work to I went to mess with it but when I try to press “disable” on the edit profile it won’t let me? Like, it tries to make me type something and won’t let me disable/enable on the edit profile thing, if you know how I can fix this please lmk!
Hello! I'm trying to make the code look just as a simple bg like this
However it appears fullscreen instead no matter what I do, is there a way to make it look like that?
Thank you ^^
Repeat will cause small images to appear multiple times (good for looping pattern images) and stretch to fit will resize the image to fit the screen. Fixed causes the image to stick to the screen and will remain in place while you scroll.
Solid color:
<div style="position: absolute; top: 0px; bottom: 0px; left: 0px; background-color: rgb(0,0,0);width:100%; z-index: -1;">.</div>
Repeating image:
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("image"); width: 100%; z-index: -1;'>.</div>
Repeating image fixed:
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("image"); width: 100%; background-attachment: fixed; z-index: -1;'>.</div>
Stretch to fit image:
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("image");background-size:cover; width: 100%; z-index: -1;'>.</div>
Stretch to fit image fixed:
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("image");background-attachment:fixed; background-size:cover; width: 100%; z-index: -1;'>.</div>
Sorry but it is still giving me a fullscreen bg
This is the code I used if needed, sorry for the trouble '^^
<div class="fixed-bottom p-2" style="absolute;top:0px;bottom:0px;left:0px;">
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("https://imgr.search.brave.com/-g5NPhv9Gj20NlmCStb01bI4-26ZNcGyFDTFPlOYDgw/fit/1200/1080/ce/1/aHR0cHM6Ly9pMi53/cC5jb20vbWFkZWJ5/bG9vcC5jby51ay9p/bWFnZXMvcHJvZHVj/dHMvZnVsbC1pbWFn/ZXMvbWVtcGhpcy9t/ZW1waGlzLXBhdHRl/cm4tZGlmZmVyZW50/LWNvbG91cnMuanBn/P3NzbD0x"); width: 100%; background-attachment: fixed; z-index: -1;'>.</div>
<div class="card-transparent" style="height:720px;overflow-y:auto;overflow-x:hidden;scrollbar-width: none;">
Add page content here (you can paste in pre-existing code to make it full screen)
</div>
</div>
</div>
Hi! Is there a way to make this background NOT cover the top bit where the character's name/tags are?
I really like having a background but I want to be able to read the top part <3
Hello! Is there any way to make it so it covers the sidebar with the profile and stuff, but still shows things in the folder itself that the code is in? (Like folders/characters in it)
Is there a way so it just covers part of the screen? Like the normal menus to access the user’s favorites, characters etc. are still there, sort of like the first example you added
Where the image is in the back and everything is still on screen?
Or covering any profile information but the side bar is still there?
Repeat will cause small images to appear multiple times (good for looping pattern images) and stretch to fit will resize the image to fit the screen. Fixed causes the image to stick the screen and will remain in place while you scroll.
Solid color:
<div style="position: absolute; top: 0px; bottom: 0px; left: 0px; background-color: rgb(0,0,0);width:100%; z-index: -1;">.</div>
Repeating image:
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("image"); width: 100%; z-index: -1;'>.</div>
Repeating image fixed:
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("image"); width: 100%; background-attachment: fixed; z-index: -1;'>.</div>
Stretch to fit image:
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("image");background-size:cover; width: 100%; z-index: -1;'>.</div>
Stretch to fit image fixed:
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("image");background-attachment:fixed; background-size:cover; width: 100%; z-index: -1;'>.</div>
This user is not visible to guests.
This user is not visible to guests.
Here's another code that should work better for what you want:
<div style="position: absolute; top: 0px; bottom: 0px; left: 0px; background-color: #000000; width: 100%;">
<div class="p-3" style='background-attachment: fixed; background-color: #000000; background-image: url("image");background-size:cover;background-position:center;'>
Add page content here
</div>
</div>
I tried using this but it just covers my entire profile, ive tried putting
before it and still nothing
This user is not visible to guests.
This user is not visible to guests.
https://toyhou.se/~forums/28872.requests/215661.button-to-hide-fullscreen-code
By the way tabs are kind of weird to work with, make sure it's set to <div class="tab-pane show active" id="fullscreen"> and <div class="tab-pane show" id="show"> (without the active) before you publish it. If you press the button while editing, it will change the code so the wrong tab is set to active.
This user is not visible to guests.
Putting <br> before the code can push it downward on the screen. Putting <br> after the code adds empty space at the bottom.
The scroll box is 720px, which should work for most screens, though screens vary in size and some may not show the entire scroll box, causing stuff at the very bottom to get lost off screen. Adding empty space at the bottom will cause the empty space to get lost instead of code.
If you're still having trouble, link me to the code you're using.
This user is not visible to guests.
It is covered on desktop so you have to add links to other pages manually (which is good if you're not using every single link on the sidebar or want to add custom ones). Any style for the links will work, I used buttons for mine:
<p><a class="btn btn-sm btn-primary character-name-badge" href="button link">Button Name</a></p>
Plus the same FA icons as used on the sidebar to help people see these are the sidebar links: https://fontawesome.com/icons
The menu should still appear on mobile since it's attached to the header there and the header isn't covered. If you don't want custom buttons to appear on mobile you can hide them. I'm planning on making something to better explain hiding elements on mobile, but in short "d-none d-xl-block" will hide stuff on mobile, you can put it in things like columns to hide them:
<div class="row">
<div class="col-12 d-none d-xl-block">Only visible on desktop</div>
</div>
This user is not visible to guests.
This is the code for buttons:
<a class="btn btn-sm btn-primary character-name-badge" href="button link">Button Name</a>
You can duplicate it for as many buttons as you need then separate them horizontally with spaces ( ) or vertically with line breaks (<br>)
Here's the code for buttons that look like this:
Button 1 Button 2 Button 3 Button 4
<p><a class="btn btn-sm btn-primary character-name-badge" href="button 1 link">Button 1</a> <a class="btn btn-sm btn-primary character-name-badge" href="button 2 link">Button 2</a> <a class="btn btn-sm btn-primary character-name-badge" href="button 3 link">Button 3</a> <a class="btn btn-sm btn-primary character-name-badge" href="button 4 link">Button 4</a></p>
Or if you'd rather them go vertically:
Button 1
Button 2
Button 3
Button 4
<p><a class="btn btn-sm btn-primary character-name-badge" href="button 1 link">Button 1</a>
<br>
<br><a class="btn btn-sm btn-primary character-name-badge" href="button 2 link">Button 2</a>
<br>
<br><a class="btn btn-sm btn-primary character-name-badge" href="button 3 link">Button 3</a>
<br>
<br><a class="btn btn-sm btn-primary character-name-badge" href="button 4 link">Button 4</a></p>
Paste this code: https://toyhou.se/~forums/28852.codes/212941.fullscreen-code into your custom box while in code view. The background image will cover the entire screen and page content will appear over it (you can paste any custom code for your page content).
Fullscreen Code's Comments