Knowledgebase and support

Home > Blog presentation and its personalisation

Inserting banners into my blog

Question

  • How do I insert a banner into my blog?

Answer

If you want to insert a banner into your blog, you have to be logged in.

The insertion of a banner requires the execution of two steps:

  1. Add your banner to your file manager.
  2. Place your banner via the heading Advanced settings in the category Design.



Insertion of your banner in the file manager

  1. Click on the category Control Panel and there on the File manager heading.
  2. Load your banner on the blogspirit server :
    1. Click on the images folder.
    2. Add your banner by using the Add a new file form.
    3. Once the downloading is finished, memorize the address (the URL) of your banner. The address has the following format : http://my-blog.blogspirit.com/images/mabanniere.jpg. Remember: if your banner is saved on a different server you do not need to upload it on our server in order to get to it. You simply need to know its URL.

Place your banner on your blog

  1. Click on the category Design and there on the heading Advanced settings.
  2. Click on the Edit template link corresponding to the Style sheet template.
  3. A window regarding the style sheet modification opens. The code that must be added to your banner is displayed between the commands /** and */ (it means "treat as a comment, do not consider the contents for the navigator"). Before you modify your style sheet, you can create a back-up by copying the entire contents and pasting them in a text editor of your choice.
  4. Look for the "#banner" style.
    • Delete the lines /** code for your own banner : and */.
  5. Look for the "#banner-img" style.
    • Delete the line display: none;
    • Delete the lines /** code for your own banner : and */.
    • Replace : "background-color: #xxxxxx;", by the following expression : "background: #xxxxxx url(http://my-blog.blogspirit.com/images/mabanniere.jpg) no-repeat 0% 0%;" (where xxxxxx is the hexadecimal code of the background color of your banner and http://my-blog.blogspirit.com/images/mabanniere.jpg is the URL of the image that you had previously uploaded in your file manager).
    • Give the height of your banner (in pixels). Example: if the height of your banner is 90 pixels, write : "height: 90px;"
  6. Look for the "div.img-link a" style:
    • Delete the lines /** code for your own banner : and */.
    • Give the height of your banner (the same pixel seize that you have indicated before).
  7. Click on the Save button to apply all changes : you banner is finally inserted in your blog ! You can instantly look at your new banner in your blog by clicking on the View weblog link located on top of the page.


If your new banner is not displayed on your blog, verify each of the previous steps once again. Additionally, verify if the given URL address regarding your banner is valid. The verification of your URL is very simple: copy and paste your banner URL in a navigator : if your banner is not displayed you have a wrong address.



It could also be that your banner is not large enough for the existing space (771px). In this case you can insert a color code to fill up the remaining space : background: #xxxxxx url([URL_de_votre_bannière].jpg) no-repeat 0% 0%; (where #xxxxxx is the color code).



Specific cases concerning design 4 and 5

Modifications regarding design 4 only (counting from the top left to the right):
  • Concerning "#container .container-decorator1" styles: replace "90px" located in background: transparent url(http://[...]) no-repeat 0% 90px; by the following amount : height of your image + margin of 9px.. Example : your image's height is 120px, then the right code to insert would be : "129px"
Modifications regarding design 4 only (counting from the top left to the right):
  • Concerning "#container .container-decorator1" and ".album-container .container-decorator3" styles: replace "90px" located in background: transparent url(http://[...]) no-repeat 0% 100px; by the following amount : height of your image + margin of 8px.. Example : your image's height is 120px, then the right code to insert would be : "128px"



You have made a mistake and you would like to return to the initial style sheet ?

In order to return to the initial display, go to the heading Template in the category Design. Next, choose a template.



Attention ! If you choose a blog presentation from the Template category, you will automatically erase all executed style sheet modifications.



Important remark : if you want to look at your blog after all changes have been executed, please remember to empty the cache and to reload the page of your blog by using the command ctrl + F5 (PC) or Cmd-Shift-r (Mac). This way your effected changes become visible on your blog.