Thursday 18 June 2009

Modify background and transparency in Blogger templates

I decided to change template: the old one was too opaque and most importantly it was just a default template.
I made this template by myself modifying some pieces of the same template with a computer-graphic program and the result is not so bad.

For those who are interested, I suggest a few tips to modify colors and background images in the layout, editing the html and css.


In the "Edit HTML" menu there is the source code of the current template.
After the body tag there is the interesting part: the strings for the graphic of the blog.

body {
background:#123 url("LINK OF THE BACKGROUND PICTURE HERE");


is the main background and you can substitute the link with another picture to change it. The picture will be repeated automatically over the page.
If you are interested in just a color as background, this can be helpful:

body {
background-color:#000000;


in which #000000 is the hex color code.

The background in the panels can be modified too using the same procedure; the links for their backgrounds are situated under the "Page Structure" section. I modified: outer-wrapper, main-wrapper (the panel for the blog), sidebar-wrapper (the panel for the sidebar), post header, comment-link, sidebar bullet.

Transparency can be obtained for the wrappers pasting this code after the link or color for the background:

filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;


in which the number in red are the grade of transparency and they should be equal (50-0.50-0.50 or 30-0.30-0.30 etc...).

Hope this helps a bit.

No comments:

Post a Comment