First off, let's look at the default CSS code that WhoaVerse sets for the header image:
#header {
background-image: url("../Graphics/whoaverse-bg.jpg");
border-bottom: 1px solid #5f99cf;
height: 150px !important;
position: relative;
z-index: 99;
}
Okay! Think of this as the defaults — they will only take place if we don't edit them. So, next, let's strip the code down to what we'll actually be using. This is the actual code we'll put on the subverse settings:
#header {
background-image: url("../Graphics/whoaverse-bg.jpg");
}
Now, we're only worrying about one thing: the actual background image. Remember, just because we omitted the other code, doesn't mean it'll be messed up — we're just making changes to what's already there.
So, go ahead and upload any picture you want to have as the header and report back with the URL. You'll typically want to use an image with a size of 2000 x 200 pixels (width x height).
Got the URL? Nice. Let's put it in the code like so:
#header {
background-image: url("http://i.imgur.com/IVAIgeY.png");
}
As you can see, I uploaded my header to Imgur and placed the URL inside the parentheses (the quotations are optional). Make sure you get the URL to the actual image and not the page the image is on. Two good ways to test this:
- Put the URL in your browser address bar and press [Enter] or click 'Go'. If nothing but the image is showing on the page, you probably got a good URL to use.
- Look at the end of the URL. If it ends with an extension — .png, .jpg, etc. — it's good!
That's the basic gist of changing the header image. What? Hungry for more customization? All right, but just because you asked me.
Let's look at how to adjust the height of the header, which is 150 pixels by default. We're going to add a line of code to our custom CSS:
#header {
background-image: url("http://i.imgur.com/IVAIgeY.png");
height: 150px !important;
}
As a general rule of thumb here on WhoaVerse, the height should always be at least ten pixels smaller than the image height. Let's say our uploaded header image is 200px. Keeping the 10-pixel rule in mind, let's now edit the height value to 190px:
#header {
background-image: url("http://i.imgur.com/IVAIgeY.png");
height: 190px !important;
}
Note: Keep in mind that you shouldn't remove the !important from the code or else your new height value won't do anything.
Uh-oh. Looks like we have a problem. Our logo and tab menu is in the wrong place. Don't fret, though! It's an easy fix. We just have to add a few lines of code:
#header {
background-image: url("http://i.imgur.com/IVAIgeY.png");
height: 190px !important;
}
#header-bottom-left {
margin-top: 129px;
}
margin-top is the distance, in pixels, the tab menu and logo is from the top header bar (the gray one with links to other subverses). Confusing? Don't worry, all you have to do is a little math:
margin_top = 89 + ( background_height - 150 )
margin_top is the number we'll put after margin-top.
background_heightis the number after height in our code.
Next, we just need to plug in the numbers and solve! Remember: parentheses first!
margin_top = 89 + ( 190 - 150 )
margin_top = 89 + 40
margin_top = 129
And we put 129 after margin-top: in our code and the tab menu will be fixed!
#header-bottom-left {
margin-top: 129px;
}
But, wait! What if our chosen background picture is smaller than the default? Well, then, we'll just get a negative number! Look:
margin_top = 89 + ( 50 - 150 )
margin_top = 89 + ( -100 )
margin_top = -11
Don't worry if the number is negative! It'll work:
#header-bottom-left {
margin-top: -11px;
}
And BOOM! We're done. You did it. Here is the finished code:
#header {
background-image: url("http://i.imgur.com/IVAIgeY.png");
height: 190px !important;
}
#header-bottom-left {
margin-top: 129px;
}
Note: Your code will differ (obviously)!
Give yourself a pat on the back because, now, your subverse header is beautiful! Happy whoaversing!
view the rest of the comments →
[–] RedditRefugee 0 points 1 point 1 point (+1|-0) ago
This is very helpful. Thanks!
[–] Nurdoidz [S] ago
You're welcome!