How to change your blog banner
Tuesday, 2. October 2007, 20:00:20
It's quite simple to change your blog banner with most of the blog themes available. Sleek Shady Beta is no exception.The default banners are 920 pixels horizontally and 170 pixels vertically. You should scale and crop the image you want to use as a banner to that size. You can make a smaller banner too if you want to. In my case, I made a transparent GIF image of Dr. Launch, drawn by Freek Zijlmans and used really simple CSS to put it in front of the default banner. The advantage of my method is that you can change your theme as much as you want and your banner will still look like it should.
So how do you change your banner image? By editing the custom stylesheet for your account. The custom stylesheet editor can be found by following these instructions:
- Go to your account
- Click Design in the ACCOUNT NAVIGATION sidebar
- Click the custom stylesheet link from the line below the Select a design text
You're now looking at the custom stylesheet editor. You're supposed to add CSS code to it to make modifications to your blog design. So how do you add a banner image of the size 920 x 170 to your design? By adding the following code to your custom stylesheet:
#top2 {
background:url(http://yourwebsite.com/yourdirectory/yourbanner.png);
}Change the address in the code to the address to your banner image. This only works properly if your background image is 920 x 170.
But if you'd like to do something a bit more advanced, like I did with my banner image, you can do so too:
#top2 {
background-image:url(http://yourwebsite.com/yourdirectory/yourimage.gif);
background-position:bottom right;
background-repeat:no-repeat;
}Change the address seen in the code to the address of your transparent GIF image. It will appear in the bottom right part of your banner. And it's not repeated. If you'd like to change the place the banner appears, you can change the background-position value. There are some other positions you can use for the background image. Here's a list of the basic ones:
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
Change bottom right in my example to the preferred position from the list. You can also position the background image in a specific location. You can read more here.
If you need more help adding a banner to your blog, please leave a comment below.
Copyrights
The Dr. Launch cartoon character is a trademark of and a copyright of DrLaunch.
The image used in this blog post is a copyright of Freek Zijlmans and DrLaunch.
You must be logged in to write a comment. if you're not a registered member, please 
By Furie, # 3. October 2007, 15:29:54
Anyway. My Sleek Shady Beta theme is compatible with your banner. And so is almost every one of the default blog themes. All you need to do is to remove the Night Skyline 2 import code.
If you want your banner in one of the existing themes, simply switch to the theme. If you want Sleek Shady Beta, simply follow the instructions and install it without removing your blog modifications. If you need any help, you know where to ask.
If you want any of the specific elements of any of my themes, such as the menu, or the titles for the elements in the sidebar, just ask. If you want to see an example in action, just check out the menu of I +.
By drlaunch, # 3. October 2007, 16:09:27
I'm actually using the Blue #2 theme as a base for Night Skyline 2 CSS and my own banner on top now.
The three compliment each other wonderfully.
By Furie, # 3. October 2007, 16:48:19
I did this : -
#top2 {
background:url(http://files.myopera.com/BabyJay99/blog/my20drawing20%materials.png);
}
Thanks
By BabyJay99, # 9. April 2008, 00:48:48
Hi there, how do put in the buttons ?
blog photos etc
By anonymous user, # 23. May 2008, 15:43:21
Anonymous: Log in or sign up then if you want to move the menu to the top, go to your account, click Design, custom stylesheet, and paste this:
#top {
position: relative;
top: 30px;
}
#menu {
position: relative;
top: -200px;
}
On the other hand if the links are missing from your menu, go to your account, Sidebars and menus. And under Menu check the menu items you want. Click SAVE CHANGES. The menu items you want are now enabled.
By drlaunch, # 23. May 2008, 17:45:19
Thanks so much, I hope I can build my castle the way I wanted.
By BabyJay99, # 24. May 2008, 01:08:45
By b_laudanum, # 30. May 2008, 02:33:54
I typed #top2 {
background-image:url(http://files.myopera.com/rayonx2/files/Haseo%20Banner.gif);
}
but nothing changes. can you help?
By rayonx2, # 12. June 2008, 21:12:34
By drlaunch, # 13. June 2008, 20:42:54
By Furie, # 13. June 2008, 20:58:40
By rayonx2, # 13. June 2008, 21:11:45
#top2 {
background-image:url(http://files.myopera.com/Southern20Cross/files/Zero.gif);
background-position:bottom right;
background-repeat:no-repeat;
}
By Southern Cross, # 5. July 2008, 22:48:49
By drlaunch, # 6. July 2008, 09:59:45
@import url(http://files.myopera.com/sleekshadytheme/user.css);
#top2 {
background-image:url(http://i273.photobucket.com/albums/jj215/VietFalcon/Zerobanner.gif);
background-position:bottom right;
background-repeat:no-repeat;
}
By Southern Cross, # 6. July 2008, 14:55:44
#top2 { background: url(http://i273.photobucket.com/albums/jj215/VietFalcon/Zerobanner.gif) bottom right no-repeat ;}
By drlaunch, # 6. July 2008, 16:13:23
By Southern Cross, # 6. July 2008, 18:39:48
Simply use the magic wand tool to select the background of the image, then delete it. Make sure you only have one layer enabled in your Paint.NET document when saving. You might also have to look for an option to enable transparency.
When saving the image, you should consider whether to use a GIF or PNG image.
The advantage of GIF (which I used in my banner) is that it's backwards compatible (ex. IE6) and supports animation.
The advantage of PNG, is that the image looks better and you'll avoid any pixelated edges. However, IE6 will display a colored box around the image.
By drlaunch, # 6. July 2008, 19:33:23
By Southern Cross, # 6. July 2008, 19:41:01
I think this code should work for a new backgruond?
body {
margin:0;
padding:0;
background:#dcdcdc url();
text-align:center;
font-family:'trebuchet ms',arial,sans-serif;
font-size:12px;
color:#444;
}
By Southern Cross, # 9. July 2008, 18:54:26
You don't need lots of code for something so simple as a background image. Keep your code short and manageable. That'll make things a lot easier in the future if you decide to add even more mods to the design.
The basic code you'll need is...
body { background:colorcode url() ; }This will add a background to the entire document.
The image will be repeated both vertically and horizontally.To repeat horizontally, add repeat-x after the background URL. Or repeat-y for vertical repeat. Or even no-repeat.
The reason you don't need all that code you pasted is that CSS cascades in a beautiful way. The stuff you add to your user.css file will overwrite the other CSS for your page. So all you need is the code for what you want to change.
If you want to remove the gray extensions of the banner background, add the following code:
#wrap0 { background:none ; }By drlaunch, # 9. July 2008, 19:38:45
Now...to go make a background...
By Southern Cross, # 9. July 2008, 19:57:09
body { background:colorcode url(http://i339.photobucket.com/albums/n458/VietCross/DeletionBLK.jpg); }
For "colorcode" what should I use?
By Southern Cross, # 9. July 2008, 20:04:45
By Furie, # 9. July 2008, 20:10:07
I got a great idea when I saw your background. The idea was to just fix it in the bottom right corner without repeating it. But the problem is that the waves in the picture extend outside the image, so it's probably not going to look too good. Try finding a image like that but with the motive that doesn't extend outside the top and left image borders.
Anyway, you could try it as it is now...
body { background:black url(http://i339.photobucket.com/albums/n458/VietCross/DeletionBLK.jpg) bottom right no-repeat ; }By drlaunch, # 9. July 2008, 20:18:37
By drlaunch, # 9. July 2008, 20:24:27
body { background:black url(http://i339.photobucket.com/albums/n458/VietCross/DeletionBLK.jpg) no-repeat fixed bottom right ; }There!
By drlaunch, # 9. July 2008, 20:29:33
By Southern Cross, # 9. July 2008, 20:53:16
I needed to change the banner of my blog and I succeeded.
By VanessaMk, # 12. July 2008, 12:27:38
By drlaunch, # 12. July 2008, 12:52:15
By VanessaMk, # 12. July 2008, 14:55:44
#top
#top2
By Southern Cross, # 12. July 2008, 15:19:34
By drlaunch, # 13. July 2008, 16:41:34
This might be my last one. Might[/].
How can you change the sidebar's color. The theme "purple" has a pink-ish sidebar colour. I would like to change that to teal. (I have the HEX # already)
And how would you change the "Read More..." "106 comments" color?
By Southern Cross, # 13. July 2008, 22:26:07
*sits and listens*
By Furie, # 13. July 2008, 23:14:10
#side {
background:#colorcode
}
EDIT:
By Southern Cross, # 13. July 2008, 23:36:29
By Furie, # 13. July 2008, 23:40:48
By Southern Cross, # 13. July 2008, 23:46:09
By Furie, # 13. July 2008, 23:49:40
#wrap4 {
background: color url("")
}
wrap4 is everything below the banner so you'll change the background of that too.
By drlaunch, # 14. July 2008, 08:02:17
By Furie, # 14. July 2008, 13:03:12
It'll only change the stuff straight below the banner. wrap4 is a rectangle which starts with the top side by side with the bottom of the banner or menu. It's the same width as the banner.
It'll change the background under all the stuff in the sidebar. You'll have to figure out the code to change the rest of the stuff in the sidebar too.
By drlaunch, # 14. July 2008, 15:10:29
By Furie, # 14. July 2008, 16:18:08
#menu_blog a
{
content: "";
}
#menu_friends a
{
content: "";
}
#menu_about a
{
content: "";
}
#menu_albums a
{
content: "";
}
#menu_links a
{
content: "";
}
#menu_archive a
{
content: "";
}
By Southern Cross, # 18. July 2008, 22:59:18
I myself use it in this form:
#menu_albums a {content: "Themes";
visibility: visible;
}
By drlaunch, # 19. July 2008, 08:26:06
You can find my CSS here.
By Southern Cross, # 26. July 2008, 01:52:38
By drlaunch, # 26. July 2008, 14:11:39
By Southern Cross, # 26. July 2008, 14:14:33