Custom Site Banners

[Vae]

Here's the deal: Lemon was specifically brought on to do site graphics. That's kind of her thing.
We're gonna let her do her thing, because you certainly wouldn't like it if someone walked in and took your job from you, either.

BUT you can also customize your site banner (on your end) with a little knowledge of userstyles and CSS.
So sit your ass down. Vae gonna teach you some shit.

NOTE: This will not show for everyone. It will only show on your end, in your browser. This is just for you, not for everyone else to see.

1. USERSTYLES

[page with download links for browsers]

If you don't know what the Stylish extension is, download it.

  > Once you have Stylish installed, go to "Userstyles" in your extensions / addons menu.
  > Go to "write new style."
  > Name it whatever the fuck you want.

Keep in mind: You can save several banners in your userstyles, as long as you ONLY have one turned on at a time, and they're listed as separate stylesheets.
Name them unique things, and turn them on / off at your whim. Go nuts.

2. CSS
Paste this code into the large box:

@-moz-document domain("phoenix.corvidae.org") {

    #elLogo img {
        display: block;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
     
        background: url(YOUR BANNER URL GOES HERE) no-repeat;      
        width: BANNER WIDTHpx;
        height: BANNER HEIGHTpx;
        padding-left: BANNER WIDTHpx;
        padding-top: 0px;}
}

  > Change the banner URL text to whatever your banner's link is.
  > Width and height are your image dimensions.
  > Padding-left should be at least as wide as your image, or it will look wonky.
  > Padding-top describes how much space you want between the banner and the site's contents. So if your banner feels a bit squished by the rest of the page, try increasing that value.


3. USER SUBMISSIONS

Feel free to post any headers you're offering for other people to use, in this thread.
Please post dimensions (in px), along with your image, just to make the rewriting process easier.

ALL BANNER POSTS MUST FOLLOW PG-13 SITE RULES.
NO NSFW / FETISH STUFF.
DON'T POST ANYTHING STUPID-HUGE.

If you want to use someone else's embedded banner: Save it, upload it to an image service, grab the URL, and adjust the code on your stylesheet accordingly.

_________________________________________________________________________________________
 

Here's some I made, if you want em:

8-bit Phoenix white / red / gray / blue (447x96)
[These are all transparent, so I'm screenshotting them with a bg and linking them offsite. I haven't tested these on the various themes so use them at your own risk.]


[link]


[link]


[link]


[link]