• customcss!
• my sidebar tabs aren't showing up. it's "stuck" on my events tab -https://pastebin.com/GDq6hahQ

PLS HELP i'd like to be able to see how much sp i have on hand

Try adding this { margin-top: 0; position: relative; top: -20px; }

that worked! thank you so much!!

You're quite welcome!

That worked perfectly, Thank you so much!!

You're quite welcome, glad I could help!

This worked for me!! Thank you so much you're a gem!!

I've got a huge amount of profile issues now with multiple of my babe's profiles but that's probably because I made Brugmansia's first then based the rest on them.

My huge issue is that my content box is suddenly tiny whereas it used to not do that nonsense. I don't have a cached view of the page but it should be clear from the background that the content was supposed to expand over it. The story bit should be on the top half of the open book, the TC on the bottom half, name and species should be on the identification leaf, etc.

Code is:

SPOILER (click to toggle)

<style type=text/css>

• {margin: 0; padding: 0;}

{ height: auto!important; } , , , , , , {display: none;} , {background-color:transparent;background-image:none; no-repeat} h2, .pet_age_info_date, .prototip{display:none} {position: absolute; left:-66px; top:14px;}

::-webkit-scrollbar {width:3px; height:3px;} ::-webkit-scrollbar-button {height:6px; background:;} ::-webkit-scrollbar-thumb {background:;}

{ background-image: url(http://i.imgur.com/Jr7r7Fk.png); width: 450px; height:769px; position: absolute; top:84px; left:700px;}

{position:absolute; top:710px; left:1025px; width:80px; font-size:0px;} img{-moz-border-radius:32px; -webkit-border-radius:32px; border-radius:32px;}

.pet_color_info, .owner, .pet_wco_info_date, .pet_like{position: relative; left:610px; top:690px; font-family: Verdana; font-size:10px;} .pet_name{position: relative; left:610px; top:710px; font-family: Verdana; font-size:20px; }

p.pet_spotlight {position:absolute; left:613px; top:280px; width:100px; height:100px; border:1px solid red; font-size:10px; font-family: Verdana; display:none}

{position:absolute; left:1095px; top:285px; width:122px; font-family: Verdana; font-size:10px; text-align: left;} .statbar{display:none;} ul#pet_stats li:nth-child(1) {position:relative; left:80px;} ul#pet_stats li:nth-child(2) {position:relative; left:58px;} ul#pet_stats li:nth-child(3) {position:relative; left:50px;} ul#pet_stats li:nth-child(4) {position:relative; left:44px;} ul#pet_stats li:nth-child(5) {position:relative; left:32px;} ul#pet_stats li:nth-child(7) {position:relative; left:18px;} ul#pet_stats li:nth-child(6) {display: none;} ul#pet_stats li:nth-child(8) {display: none;} ul#pet_stats li:nth-child(9) {display: none;} li#pet_employment {position:relative; left:6px;}

{position: absolute; overflow: auto; height:320px; width:540px; margin-right: auto; margin-left: auto; top:495px; left:100px;} .treasure_item{margin-top:2px; margin-left:2px; opacity:0.8;} .treasure_item img{-moz-border-radius:16px; -webkit-border-radius:16px; border-radius:16px;}

body {background-image: url(https://i.imgur.com/oZpHEOC.png); background-position: top left; background-repeat: no-repeat; background-color:;}

a:link, a:visited {color:; font-weight:normal; font-family: Verdana;} body, td, div, p, {color:; font-size:12px; font-family: Verdana; line-height:14px} i, u {color:} b {color:}

{position: absolute; left:666px; top:110px; width:150px; height:355px; font-family: Verdana; font-size:16px;} {position: absolute; top:110px; left:95px; width:560px; height:330px; overflow:hidden;} {overflow:auto; height:310px; width:540px; font-family: Verdana; font-size:12px; padding: 10px; text-align: justify;} {overflow:auto; height:310px; width:540px; font-family: Verdana; font-size:12px; padding: 10px;} {overflow:auto; height:310px; width:540px; font-family: Verdana; font-size:12px; padding: 10px;} {overflow:auto; height:310px; width:540px; font-family: Verdana; font-size:12px; padding: 10px;} {overflow:auto; height:310px; width:540px; font-family: Verdana; font-size:12px; text-align: justify; padding: 10px;}

{position: absolute; top:180px; left:-50px; overflow:auto; height:350px; width:120px; font-family: Verdana; font-size:10px; border:1px solid red;} {position: absolute; top:715px; left:1100px; overflow:auto; height:80px; width:100px; font-family: Verdana; font-size:14px; color:; text-align: center} </style>

(all individual div sections cut for length)

Alishan, Longjing, and Tisanes all have the same exact issue and I'd presume the fix is the same for them all.

My pet

lmao i can't believe i forgot to get rid of the auto when i was putting in the pixel height.

i meant horizontally, not vertically. it's just a couple of pixels to the right it cuts off the TC and its scrollbar for the overflow. if the TC wasn't so massive i wouldn't mind, but i have nearly 2k items in there and i'm sure people would like to grab the scrollbar and drag it down to see all the items.

[EDIT]

i took some strain off and figured if maybe i added the width to my content code it might fix it, which it did! so i no longer need help as Trick-or-Treat is finally back up and running 100%. thank-you again so much for helping all of us with our coding. glad i figured out the rest of my problem on my own. c:

thanks for making this thread!

Most people's profiles use a lot of absolute positioning so they can be fixed by simply resetting the stacking context. In many cases, just adding the following two lines will fix it:

html,body,,-content,{position:static!important;background:none;} .container-fluid {position:absolute;top:0;left:0;right:0;bottom:0;}

So that's something to try that should be a very easy fix, just a copy-paste and at the very least it resets the stacking context to something easy to work with should anything else require a tweak.

that did help get rid of the weird cutting off it was doing. Now it's only in a different spot, which is work-able :)

Do you mind if I pick your brain for sec? ;) I wanted to figure out why it worked so this is what i found online- static: "The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value." So basically we're telling those divs not do anything by changing them to static? and then all the divs we use under (is that the right phrase lol?) that will be what is actually telling the page to do? It looks like the positioning used in I already had is over written by the .container-fluid um..thing. (word?) So would that be used to position the content element now instead of where i have it in ? i'm so sorry, i'm trying

The main thing you want to understand is what position: absolute means. When an element has position:absolute, it's positioned relative to its closest positioned parent. Here "positioned" means either absolutely or relatively positioned. An element with position: static is NOT positioned. Static is the default value for position.

So basically, what those two lines of CSS do is make it so that all the divs you position are positioned relative to the correct frame of reference (so to speak). What I'm doing is sorta getting rid of all those parent divs, and then setting an absolute position on .container-fluid. Unless you've also positioned your pet_info div, then all of the children of .container-fluid will then be absolutely positioned relative to .container-fluid (because it's their closest positioned parent). Setting .container-fluid's offsets to 0 makes it take up the entire screen so you can treat it like you would html/body.

if the pet_info div is the one with the name, age, color and stuff, I did position those. But everything is in the right place just up a little high on the page which I can fix. I think I get it now. It's not telling the page to ignore the stuff, rather it's kind of like making an outline and telling everything else to fit in that. I had a feeling the stuff was just 'trapped' under something but when i used inspect on my pages I couldn't figure out which container it was to get rid of it. Though I'm sure I wouldn't have thought of static to do it!. THANK YOU!!

Yeah!

So one of the main complications with the site layout, is that there's sooo many containers before you actually reach the meat of things. There's like html, body, page, content, main-content, etc etc. So by setting those to static, you're basically saying to your absolutely positioned elements "Ignore those, they're static. You just position yourself based on .container-fluid who is also absolutely positioned."

I just realized I can move the content if I add px to the end of the 0s, seems obvious but it took me a while to think of it haha. Makes things a lot easier to move it all at once! yay :) In case anyone else has this issue. For me I changed it to .container-fluid {position:absolute;top:100px;left:270px;right:0;bottom:0;} Just an example, others will be different. You have to play around with it. So if anyone's having problems with where stuff moves to try changing that part of it :)

And... here I am again. Because this is happening on all my profiles, but you can see it incredibly well on Jaffar's profile here.

Despite the fact that I set both the content and html to be the same size, there's still excess space under the background image; you can scroll and there'll just be empty dark purple space where there shouldn't be any.

You can also find this problem with other pets of mine, and... I really don't know what's causing it, because typically if I set the html to be the same size as the background image I'm using, there's never any excess scrolling. The extra space decreases slightly if I make the content smaller than the html, but it never goes away completely.

Any insight?

edit: nvm apparently the content is a mysterious being and I have no idea how it works. if there's excess space at the bottom of a profile, esp. ones with image backgrounds, reduce the content height and that should fix it

@/Hongske

i wasn't going to bother fixing my profiles bc it looks like the site isn't done pushing changes, but then i realised ruu is in the spotlight queue and i'm not very keen on getting kicked out and waiting another year for him to win lmao

so the whole content is pushed to the left which also cuts off part of the art i tried the code posted but it didn't help u __ u here for the pastebin anyway i don't have a screenshot of what it's supposed to look like but this is what the art should look like so you can see how it gets cut off

i might be able to fix it by physically moving every div to the right but there's so many ; D ; honestly if there's just some quick thing i can do to ix it i'd be happy af lol

[edit]

nevermind the legend themself helped me ❤️

Oh wow, I feel so stupid for not thinking of that! Thanks ever so much for that (I edited to first post to add the code) :D

You should try 's amazing fix.

Glad I could help!

Thank you for adding it to the first post!