This page is designed to show you how you can change the banner of an existing Gandiblog theme. The methods are similar for making other changes, however Gandi's support cannot help you perform them or troubleshoot your code.
You first need to choose the theme that you want to use as the starting point and look at the CSS code (stylesheet).
Do this by going into “Blog's name” (old “Blog aspect” [*]) and then choosing the theme in question. For this example, we will choose “White Road”. Once you click on the desired theme, you'll see it on the right-hand column, along with a link that says 'stylesheet'.
Click on 'stylesheet' to see the code. The bit that interests us are the imports:
<style type="text/css" media="screen"> @import url(/themes/whiteroad/style.css); </style> <style type="text/css" media="print"> @import url(/themes/whiteroad/../default/print.css); </style> <file>
Copy this.
Back in the “Blog's Name” (old “blog aspect”) page where you can choose your theme, you will now want to choose the “Custom” theme and then “Use Theme”. If you don't the option “theme configuratiopn will not appear.
Then click on the 'Theme Configuration” button (remember you have to “Use theme” first). and you will now see an empty page with “Style sheet:” at the top. Add the @import lines from the code that you copied earlier, like this:
@import url(/themes/whiteroad/style.css); @import url(/themes/whiteroad/../default/print.css); ]
Save your work.
Upload the new banner image that you created to your blog by using the “media manager” tool. Once you have done that, get the banner's URL by clicking on it once it has been uploaded. In this example, it gives me the following for example:
You now need to tell the code where to find the new banner, so you need to find where this is.
Add the layout.css page to your blog's URL to see the layout code. The basic form is /themes/whiteroad/layout.css for example:
http://blog.example.com/themes/whiteroad/layout.css
This will show you the CSS of the theme's layout.
Find the area concerning the banner:
/* top */
#top {
float:left;
width:779px;
margin-left:auto;
margin-right:auto;
background:url(heading.jpg) top center no-repeat;
height:160px;
border-left:1px solid #6D6C61;
border-right:1px solid #6D6C61;
}
Copy this.
You can see that the line to edit in order to change the image is:
background:url(heading.jpg) top center no-repeat;
Go back to your blog's admin area and in the “Theme configuration” for your custom theme.
Below the @import lines you added earlier, add the CSS lines that will override the existing value in layout.css:
#top {
background:url(http://blog.andersonmail.eu/public/newbanner.jpeg) top center no-repeat;
}
You will note, that we replaced 'heading.jpg' (the current image) with the url that points to the new image that we did earlier when we uploaded it.
My final Custom Theme configuration page now looks like:
@import url(/themes/whiteroad/style.css);
@import url(/themes/whiteroad/../default/print.css));
#top {
background:url(http://blog.andersonmail.eu/public/newbanner.jpeg) top center no-repeat;
}
Click save, and you are done.
If your changes do not appear right away it is because of cache. Empty your cache and reload the page, or wait a bit. Once the cache has been emptied and reset you will see the new banner.
[*] Where is this “Blog aspect” option, please. Can't find it in the panel. Is this for an old version? '-Felipe-' Update: It is now called “Blog's name” or “Nombre del blog”