To all moderators: Here is how you can add banner using CSS very easily to your Kbin magazines!

Full credit goes to: /u/Pamasich for working on it and helping me out with CSS, the below CSS I will mention is fully made by he/her with my feedback, again thank you!

To all kbin magazine moderators,

Below is the CSS you can use to include your own banner of choice to your Kbin magazine/community:

h1[hidden] {
    height: 12vh;
    background-image: url(https://i.imgur.com/wbZa4eI.png);
    background-size: cover;
    background-position: center;
    display: block;
    color: transparent;
    user-select: none;
}

DEMO: Check m/cars using this CSS

NOTE: Change height's value according to your needs to fit your banner accordingly. You should also replace the image link in the above CSS with your choice, I used imgur to upload the image there, and copy/paste the image's address/link here.

This is what we have so far thanks to /u/Pamasich, and I hope this comes to rescue all of the moderators just like myself.

Why should you add a banner? This simply makes the community look more appealing and welcoming for users to participate, depending on what kind of topic your magazine is based on, a banner is invaluable.

And if you guys have your own further modifications to the given CSS above, feel free to mention them in the comments so everyone else can find this thread useful in the future!

minnieo,
minnieo avatar

THIS LOOKS AWESOOOOME!

minnieo,
minnieo avatar

this is awesome! ive just been using the mag sidebar itself as a banner like in my alternative mag but this is a lot less loud. i love it!

attached pic is what i had tried before at the suggestion of someone who's name i am forgetting now, its cool but invasive and maybe not good for people with vision issues

Limitless_screaming, (edited )
Limitless_screaming avatar

There's a hidden h1 at the top of the page?

That looks nice, but you could also change the margin to margin: 0.25rem 0; margin: 0.5rem 0; so it aligns with the top of the "sidebar-options":

edit: seems like the margin should be exactly 0.5rem not 0.25

minnieo,
minnieo avatar

that helped a lot! looks dope!

TheArstaInventor,
TheArstaInventor avatar

That looks awesome, great to see yall making it even better. Can you guys post the full CSS code with the changes here? I'd love to try it myself and an be easier for others who are re-visiting or just visiting this thread in the future as well. Thanks!

minnieo,
minnieo avatar

for me that was just the one you posted, the margin limitless suggested, plus a border radius for rounded edges

`
h1[hidden] {
height: 12vh;
background-image: url(insert-image-url);
background-size: cover;
background-position: center;
display: block;
color: transparent;
user-select: none;
margin: 0.25rem 0;
border-radius: 5px;
}

`

ripcord,
ripcord avatar

Very nice, thanks.

DarkThoughts,

Is there an example magazine that shows how this looks like?

daredevil, (edited )
daredevil avatar

I imagine something like this

Duly noted, I missed a line of text. Won't try to help in the future

Pamasich, (edited )
Pamasich avatar

Better to use /m/cars which OP mentioned. I removed the image from mine, just leaving a red box as a reference for a codeberg issue. So it doesn't show how it looks with an image.

TheArstaInventor,
TheArstaInventor avatar

Yes, I mentioned in the above post with a "demo" man, please do read the post :)

  • All
  • Subscribed
  • Moderated
  • Favorites
  • kbinMeta
  • DreamBathrooms
  • magazineikmin
  • thenastyranch
  • Youngstown
  • Durango
  • rosin
  • slotface
  • GTA5RPClips
  • InstantRegret
  • PowerRangers
  • kavyap
  • tsrsr
  • ngwrru68w68
  • khanakhh
  • Leos
  • hgfsjryuu7
  • everett
  • osvaldo12
  • cubers
  • tacticalgear
  • cisconetworking
  • mdbf
  • vwfavf
  • ethstaker
  • tester
  • modclub
  • normalnudes
  • anitta
  • All magazines