Blog: How to change the theme

• Log in to blogger.

• Change the template to Scribe. Click Customize > Pick new template > Scribe > Save template.
• Click Preview, your blog will look like this:

• Click Customize > Edit HTML. You will see a box containing weird codes. Don’t be intimidated, just scroll down.

• You will find the following:

/* Defaults

----------------------------------------------- */

body {

margin:0;

padding:0;

font-size: small;

text-align:center;

color:$textColor;

line-height:1.3em;

background:#483521 url("http://www2.blogblog.com/scribe/bg.gif") repeat;

• Pay attention to the last line. Delete the color code (#483521) and replace the above link with the link to your picture in Photobucket. It will become:

background: url("http://i789.photobucket.com/albums/yy172/ephthera/Blogger%20%20Blueberry/bluebackground.jpg") repeat;

• Click Preview, and you will see the background has changed.

• Find the following in the Edit HTML box:

/* Layout

----------------------------------------------- */

#outer-wrapper {

background-color:#473624;

border-$startSide:1px solid #332A24;

border-$endSide:1px solid #332A24;

width:700px;

margin:0px auto;

padding:8px;

text-align:center;

font: $bodyFont;

• Outer wrapper means the lines that become the borders of the box in the blog. You can change the colors of the lines by changing the color codes.
• Look at the HTML color codes in Computer Hope. We want to change the thick lines into Royal Blue (#2554C7) and the thin lines white (#ffffff). The above code becomes:

background-color:# 2554C7;

border-$startSide:1px solid #ffffff;

border-$endSide:1px solid #ffffff;

• Now you see the lines with new colors.

• Scroll down and you will see this:

#main-top {

width:700px;

height:49px;

background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top $startSide;

margin:0px;

padding:0px;

display:block;

}

#main-bot {

width:700px;

height:81px;

background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top $startSide;

margin:0;

padding:0;

display:block;

}

#wrap2 {

width:700px;

background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y;

margin-top: -14px;

margin-$endSide: 0px;

margin-bottom: 0px;

margin-$startSide: 0px;

text-align:$startSide;

display:block;

• Main-top, main-bottom and wrap2 refer to the background inside the box. We will change the light brown color into light blue.
• Delete the URL, and replace the code written in bold above into this:
  

background: #BDEDFF

• Click preview and you will see this:

• Now everything is blue!
• Finally, you need to change the buttons. Originally they are in the form of flowers. Because our theme is blueberry, we need to change the buttons into blueberries, too.

• Find the following:

.post li {

line-height:1.5em;

list-style:none;

background:url("http://www.blogblog.com/scribe/list_icon.gif") no-repeat $startSide .3em;

vertical-align:top;

padding-top: 0;

padding-$endSide: 0;

padding-bottom: .6em;

padding-$startSide: 17px;

margin:0;

• Change the URL into the link in Photobucket so that it becomes:

background:url("http://i789.photobucket.com/albums/yy172/ephthera/Blogger%20%20Blueberry/button.jpg") no-repeat $startSide .3em;

• Here is a snapshot of the buttons before and after editing.

DONE! Any questions? Please write in the comment box below.