Dear Friend,
Cecilia left a comment asking me if I know anything about changing the default background of the blog. As usual, I go looking for answers in several of my CSS books (Bulletproof Web Design, CSS CookBook, Eric Meyer on CSS, etc.) For this one, the answer is right on Chapter 1 of the "Bulletproof Web Design" book. So here it is, if you have one of the Minima designs, please alter the equivalent tags of the template's CSS portion like this:
body {
/*background:$bgcolor;*/
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background: $bgcolor url(http://photos1.blogger.com/blogger2/7873/821550570340913/1600/bg.gif) repeat-x top left;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border-bottom:1px solid $bordercolor;
}
#header {
margin: 5px;
/*border: 1px solid $bordercolor;*/ text-align: center;
color:$pagetitlecolor;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
border: 1px solid $bordercolor;
font: $bodyfont;
background: #fff;
}
Discussion:
* In CSS, if you want some effects to be temporary disabled, use this /* xxxxxx */ format. Notice that a comment inside another comment is not acceptable, such as
/* xxx /* xxxxxx */ xxx */
*This line, in particular, adds a faded yellow picture to the top-left of the screen, and repeats that picture in the horizontal (x) direction.
background: $bgcolor url(http://photos1.blogger.com/blogger2/7873/821550570340913/1600/bg.gif) repeat-x top left;
* In addition, I tweak some code so that instead of the default two boxes around my title, now I only have a line at the bottom. Since the line is added with same color as the border's, I can change it visually with the "Font and Color" Editing option.
#header-wrapper {
width:660px;
margin:0 auto 10px;
border-bottom:1px solid $bordercolor;
}
* You can add more font and color variables to the template, and they will show up in the "Font and Color" design tab. What this means is that you will have many more options to play around with, not just the default ones from Blogger templates.
For example, I could create a new color variable (inside the <b:skin> tag at the front of the template):
<Variable name="commenttextcolor" description="Comment Text Color"
type="color" default="#999" value="#999999">
and it would show up in the "Font and Color" tab,
This new variable has a name so you can add later as $commenttextcolor in the actual CSS code, a description name for it to show up in "Font and Color" design tab, the type of "color", and a default and actual value. I think Blogger will write whatever your choice back to this "value" so your template is always up-to-date and independent of Blogger's database.
Now that you have a variable, you can apply that to the CSS code, just like any other default variables.
* For my Vietnamese blog, I have used the same code showing in this article to modify its appearance. Please take a look.
Have a nice day,
Hoctro (10/2006)
Blog: http://hoctro.blogspot.com/