Starting a sub-saidit

submitted by Vigte from self.SaidIt

sorted by:
top
newinsightfulfun
you are viewing a single comment's thread.

view the rest of the comments →

[–][deleted] 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!

[–][deleted] 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; }

[–][deleted] 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 https://saidit.net/s/HistoryVideos/

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!

[–][deleted] 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