Character css Sidebar help

Posted 6 years, 1 month ago by Nariel

Hello! I'm currently trying to edit some of my character css, and I want to change the header to a sidebar instead, how do I do that? It is the links to the Gallery and such.

KnightOfSpring

You have to get rid of the position: absolute in #sidebar and then edit it further to your liking as it will be stuck in the corner of the page when you do that.

Nariel

KnightOfSpring I removed the position abselute as you said but it's still at the top, not the side or anything? https://i.imgur.com/BLZAvwn.png

Pinky

so i'm viewing the source code on a random character and it appears your css is doubled... like it's pasted in there twice. i can't see your imgur link so i'm not sure what profile you are working on, but assuming your css is doubled there too, the sidebar css is in there twice, you'd need to remove it from both for it to work (though i'd suggest just not double the css! i can't access my drive links rn but i don't think i have it doubled in my drive file... i'll check it when i get home WEEPS)

Nariel

lowkeywicked can I link you to a google doc with the css? I'm uncertain what part of the code I should remove.

KnightOfSpring

Yeah, as Wicked said it's suddenly in there twice? It wasn't when I looked earlier though which is why I said to just remove that part but as it's now doubled it basically is still in there and that's why it stays the same.

Pinky

okay i checked the drive file & the css is not doubled... imma guess you must have accidentally hit past twice when you copied it over!

but regardless, you pasted in all your css twice. this means every line of css is doubled, and the bottom lines will override the top. you're going to need to go in your css and erase the double- just look at the first couple of lines of the css and find where it repeats somewhere in the middle so you can see where it starts over, then erase one of the halves

once it's no longer doubled, you can remove the position:absolute like suggested before and it will work fine!

EDIT also i'm suggesting this based off looking at your viewable profiles - i just saw your imgur link & i dont think that character is public. if i cannot view the character, i cannot see the source code & thus can not properly check for the issue.

also please add css credit to all layouts which use my css.

Nariel

lowkeywicked & KnightOfSpring I realized it was because I had a global character css enabled, ffs. But I was wondering if you know somewhere I can find tips/tricks/resources for editing the sidebar?

Edit: shit, sorry about that, will get it fixed right away!

Pinky

there aren't any guides out there rn i don't think...

changing cards CSS to have the sidebar on the side is gonna be a bit of an issue tho. i'll try to explain it so hopefully it makes sense WEEPS
but basically on the TH page, you have a #main div that holds everything. INSIDE of #main you have #sidebar div that holds the sidebar & #content which holds the content. by default, #sidebar & #content are set by percentages so they shift with the screen - as your screen resizes each scales with the screen

for cards, what i do is take #sidebar & set it to the full width of the page, then center it's content. so it's width is no long the default %, it's now 100%. i set the .side-nav list that holds all the #sidebar links to display inline-block so they all display next to each other.
i then take #content & give it a fixed max-width, so it's width is no longer the default %, it maxes out to whatever width i give it (but can get smaller as your screen resizes). i also adjust the margin on #content so it's centered on the page, and so it's pushed down a bit & doesn't run into the sidebar

to modify the the base CSS, you'd first need to undo all the sidebar bits - take away the position absolute & inline-block lists
you'd then need to undo the #content coding as well, so that the #sidebar can sit next to it properly. cuz when you undo #sidebar, it's gonna go back to it's default %, so you'll need #content to go back to it's default % as well or they won't fit together right

so basically you're gonna wanna get rid of some of the styling to #sidebar & #content to get it all back to the TH default. the stuff you need to erase will be in the foundation coding!