TechnoBlog : open your blog.

It is possible for you to insert your own banner instead of title of your blog. For that, follow these steps :

1. Go in the section "File Manager" of the heading "Control Panel"
2. Upload your banner image on blogspirit:

* Click on the " images " directory
* Add your banner with the 'Upload' form
* Once the finished loading, note address (the URL) of your banner. The address should be like: http://myblog.blogspirit.com/images/mybanner.jpg

Note that if your banner is on another server you do not need to upload it on our server, on the other hand it is necessary for you to know his URL to reach this image.
3. Go now in the section "Advanced Settings" of the heading "Design".
4. Locate the "Style Sheet" template and click on "Edit Template".
5. A window of modification of the css file opens. We will help you step by step to modify CSS code (the code of the style sheet) to insert your banner. Note that for each modification the code to be added for your banner is in comments: between "/*" and "*/".

* Locate the style " #banner ".

o Insert at the end of the style the following code:
" display: none; "

* Locate the style " #banner-img ".

o Replace: " background-color: #xxxxxx; ", by this line:
" background: #xxxxxx url([banner_URL].jpg) no-repeat 0% 0%; "
o Insert at the end of the style the following code:
" display: block; "
o Give to the attribute "height:" the height of your banner (in pixels).
Example: if your banner is 90px, write: " height: 90px; "

* Locate the style " div.img-link a ".

o Give to the attribute " height: "the height of your banner (in pixels).
Example: if your banner is 90px, write: " height: 90px; "

* For the modifications related to design 4 (by counting starting from the top left towards the line) only.

o On the level of the styles " #container .container-decorator1 ": replace " 90px "in
" background: transparent url(http://[... ]) no-repeat 0% 90px; "
by the following sum:
Height of your image + margin of 9px
Ex: your image is 120px height, the code to be inserted is: " 129px "

* For the modifications related to design 5 (by counting starting from the top left towards the line) only.
o On the level of the styles " #container .container-decorator1 " and " .album-container .container-decorator3 " : replace " 90px "in
" background: transparent url(http://[... ]) no-repeat 0% 100px; "
by the following sum:
Height of your image + margin of 8px..
Ex: your image made 120px in height, the code to be inserted is: " 128px "

6. Click on the "Save information" button to apply the changes: your banner is inserted in your blog! You can check it by clicking on the "View blog" link in top of the page.

If such were not the case, check well that you proceeded to each stage (the code to insert must-to be the same). Also check that the URL given for your banner is quite valid: to check it simply, copy the URL of your banner in a navigator: if your image does not appear, your address is false.

It is also probable that your banner is not sufficiently broad for space available (771px), in this case insert a code color to fill remaining space :
background: #xxxxxx url([banner_URL].jpg) no-repeat 0% 0%; (where #xxxxxx is the code color).

You can return to a basic solution, in the section "Advanced settings" of the heading "Design", tick a template then click on the "Restore original Version". Caution! All your modifications of design will be lost.

--------------------------------

Note that this is not the only method to display your own banner, but this one was tested on :
Win : IE 5.01 5.5 6 - Firefox 0.8 0.9 1 - Mozilla 1.7 - Opera 7.52
Mac : IE 5.1 - Safari - Firefox

Do not forget that all the code needed is in comments in your style sheet (/* code */) : delete '/*' & '*/' to valid this code.

--------------------------------

Edit : Here's a sample of the way your CSS shoud look like :


#banner {
height: 90px;
background-color: #d9c0e6;
color: #fff;
display : none;
}
#banner h1 {
padding: 15px;
font-weight: bold;
padding-bottom: 10px;
}
#banner h2 {
font-size: 80%;
padding: 0px 0px 0px 15px;
}
#banner a {
color: #fff;
font-weight: bold;
font-size: 70%;
text-decoration: none;
}
#banner-img {
display: none;
display : block;
background: #fff url("http://[BLOG].blogspirit.com/images/[BANNER].jpg") no-repeat 0% 0%;
height: [HEIGHT]px;
}
div.img-link a {
display: block;
text-decoration: none;
width: 100%;
height: [HEIGHT]px;
}

--------------------------------

In #banner-img, '#fff' is the background color which 'complete' your banner area, choose the one used in #banner.