you are viewing a single comment's thread.

view the rest of the comments →

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

So... um, another question if that is okay?

I've put my banner up, the upload works great now! Thank you!

I resized it slightly and what not to fit - but I find it doesn't resize with the resolutions I tested (800x600, 1024x768, widescreen etc up to 1980x1080) - this is normal correct? What would you suggest for the dimensions of the banner, so it kind of flows for any resolution.

Additionally, is it possible to switch the banner to a secondary image, depending on whether the user is using night or daytime Saidit? I set it up with the nighttime setting in mind but realised it looks awful on daytime setting lol! (this is just a suggestion as I know it's not a thing yet!)

<3, you're doing good work Magnora, never quit!

Edit: ONE more, I promise only one! What is the name of the font you used? Is it okay to use the same font in the banner or would you prefer to keep that a secret ;)?

Edit 2: I just looked up the sub on an ipad, the image being 1900x200 forced the website to have a scroll bar all the way to the right, check it out if you have a mobile/or pad... not sure how to fix that one :\ Sorry!!! I keep breaking everything.

[–]magnora7 2 insightful - 2 fun2 insightful - 1 fun3 insightful - 2 fun -  (9 children)

Hi, our normal banner is 40x4500. The 40 tall is what really matters, then it's aligned to the left. Then the right side of the banner gets clipped off depending on how wide the user's browser is. So we use 4500 px width to support superwide browsers. Hopefully this will fix the scroll bar issue, let me know if it doesn't.

We don't have the capability to change banners on change of daymode/nightmode. /u/d3rr and I can consider adding it to our list.

The font is called "Ethnocentric" :)

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

The font is called "Ethnocentric"

The shame!

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

Lol I know it's pretty ironic tbh. I didn't even know the font name until last week

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

At least we know the font name. I'm pretty impressed.

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

Thanks again, I'll have to find that font with the very intriguing name.

What I meant by the width of the banner though, since yours is so long :O, when I uploaded a custom one, the resolution of my image caused the page to become scrolly and distended but the default saidit banner does not do this, best to just look at s/youngerdryas on a pad or phone to know what I mean :(

Sorry again!

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

to become scrolly and distended

This isn't happening for me when I visit /s/youngerdryas. The banner is a little taller than normal, but that's all. It looks fine to me!

When you say it's adding extra scrolling, do you mean it's making you scroll left-right, or it's adding extra to the up-down scrolling? If it's the left-right one, that's a new bug for us and we'd have to look in to that, because I don't see that on my browser. If it's adding extra up-down scrolling, the only way to alleviate that is to make the banner only 40px tall instead of taller than that.

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

Ahh, it doesn't do that anymore because d3rr showed me #header-img { max-width: 100%; margin: 0; }! Try putting up a custom banner on a sub that is wider than probably 1024 to see what I meant!

I still can't seem to get it to clip to the top however.

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

Nice! Glad it's working and that d3rr was able to help you.

What do you mean "clip to the top" exactly?

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

d3rr was saying how the saidit banner is peeking out through the top - but that's only behind the subscription bar.

I've never actually used CSS before, I gave it a shot, but I couldn't stop the banner from staying behind the sub-bar (doesn't matter to me, I'm just trying to beta test the banner upload for you guys before anyone else tries it).

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

Ah I see thanks. There's all sorts of CSS commands you can toss in there, you can usually add as many as you like.

https://www.csstutorial.net/css_misc_images.php

You might try adding a "display: block;" line in your parentheses. This is one of the many commands that helps with layering or ordering, so it might make it go behind the sub bar.

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