you are viewing a single comment's thread.

view the rest of the comments →

[–]d3rr 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (5 children)

is it possible to switch the banner to a secondary image, depending on whether the user is using night or daytime Saidit?

yeah it should be possible in your custom css. <body> has changing classes theme-nightmode and theme-daymode

for your banner, I see the saidit banner poking through on the top. I know we've deviated from reddit CSS which maybe we shouldn't have, but you could try setting

#header { background-image: yours }

That would just be custom css and not setting the header image directly.

With your approach you have now, try this to get rid of the scroll bar:

#header-img { max-width: 100%; margin: 0; }

[–]Vigte[S] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (4 children)

Thanks so much d3rr!

Alright, so:

header-img { max-width: 100%; margin: 0; }

Worked, the banner was compressed (looks a little distorted, but that's life).

The saidit banner poking through does that no matter how large I make the banner height, it simply forces the rest of the page down. Anything less than approximately 175px has the saidit banner sticking out beneath, also.

I tried:

header { background-image: yours }

but there seemed to be no change.

I haven't worked with websites in a longgggg time, like, live journal long ago. Sorry for being the low-end of the tech support spectrum!

Guess I am off to learn some CSS!

[–]d3rr 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (0 children)

Hey man... yeah CSS is the hugest pain in the ass ever. I see my css made the image stretch and that sucks. Try adding this, and get rid of the max-width:100% style for #header-img (keep the margin:0 though)

#header-img-a { overflow: hidden; }

If you want to hide the saidit banner from being used on top, also add:

#header, #header-img.default-header { background-image: none; }

[–]d3rr 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (2 children)

Here's a completely different approach, that mimics the saidit banner more. I made this demo temporarily for you to check out, not jacking your sub or anything

So to do this approach, remove any header image set in sub settings and just use the 'edit stylesheet' page. For this example, I uploaded your header image as younger-dryas, then in the css I could use %%younger-dryas%%.

Anyway, this is the entirety of the css:

#header { background-image: url(%%younger-dryas%%); }
#header-img, #header-img.default-header { background-image: none; min-height: 162px; }

The 162px height makes #header add up to 200px plus a border (as shown in the page inspector when you look at height), to match your 200px image height, in case you were wondering or end up using a different image.

[–]Vigte[S] 2 insightful - 2 fun2 insightful - 1 fun3 insightful - 2 fun -  (1 child)

All I can say is wow! Thank you so much... you're probably the best technical support I've ever received from an admin, including services I have paid for!

I can't wait to work harder on making my banner less 1998 lol!

[–]d3rr 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 1 fun -  (0 children)

No problem man. I'm happy to see someone using this stuff and bringing/backing up a cool sub to saidit. Let us know if anything else is off or not working like you expect.

Hah, 1998 looks good to me