joy black and white

Installing the template in your NEW BLOG

>> Monday, October 19, 2009

It's not too difficult...just follow these steps:

Download the template and save it in your computer (as xml file).

Go to your Layout > Template > Edit HTML page.

Choose the file from the Browse... button, and then click to the Upload button.

It may ask you to delete some widgets - so just delete them. (Widgets are the extra page element added to the sidebars).

Save it. You're done! View your new blog.

Download here

or

Download here
Next step: Save in your computer

Upload the template

and Save it.

View the blog. This is the original Joy template
Go to back the Layout > Template > Edit HTML page.
Click the Expand Widget Templates (EWT) button.

Now we will change some codes. Please
follow next 18 little steps.
The end of the procedure your new blog will be very professional and beautiful.

Click here to start.

Installing the template in your OLD BLOG

Before you start changing your template, make sure you save your old template file just in case you need to start again.

METHODS TO INSTALL BLOGGER TEMPLATES

Download the template and save it in your computer (as xml file).

Go to your Layout > Template > Edit HTML page.

Choose the file from the Browse... button, and then click to the Upload button.

It may ask you to delete some widgets - so just delete them. (Widgets are the extra page element added to the sidebars).

Save it. You're done! View your new blog.

Download here
Next step: Save in your computer

Upload the template

and Save it.

View the blog. This is the original Joy template
Go to back the Layout > Template > Edit HTML page.
Click the Expand Widget Templates (EWT) button.

Now we will change some codes. Please
follow next 18 little steps.
The end of the procedure your new blog will be very professional and beautiful.

Click here to start.

Joy Black and White Blogger Theme

Joy Black and White page elements

Subscribe to: Posts (Atom)

Step 1. Design

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.

Click the Expand Widget Templates (EWT) button then search for this section in your template code:

/*-------- Blogger Template design: Joy.................................Ourblogtemplates.com-------- */

Select it and paste it the new section.

Save the template and go to the next step.

Step 2. Variable Definition

Go to the Layout > Fonts and Colors Tab.
Click the name of the page element in the textbox (left side), and Edit Color Hex Code (right side):
Select, Copy and Paste or type manual the code, push enter and go to the next line etc…
Every page elements and codes are in this textbox what you must to change.
When you are ready click to Save Changes, View the blog and go to the next step.

Body Background Color    "  #000000  "

Blog Background Color    "   #808080   "

Blog Border Color    "   #ffffff   "

Header Background Color    "   #ffffff   "

Header Border Color    "   #ffffff   "

Blog Title Color    "   #000000   "

Blog Description Color    "   #000000   "

Save changes

Linkbar Background Color    "   #ffffff   "  
 
Linkbar Main Border Color    "   #000000   "

Linkbar Border Color    "   #000000   "

Linkbar Text Color    "   #000000   "

Linkbar Hover Background Color    "   #ffffff   "

Linkbar Hover Text Color    "   #808080   "

Middlebar Background Color     "   #ffffff   "

Save changes

Content Background Color    "   #ffffff   "

Content Border Color     "   #ffffff   "

Post Background Color    "    #ffffff   "

Post Border Color    "   #ffffff   "

Post Title Color     "   #000000   "

Post Title Background Color    "   #ffffff   "

Post Title Border Color    "   #ffffff   "

Save changes

Date Header Color    "   #000000   "

Text Color    "   #000000   "

Main Link Color    "   #000000   "

Main Hover Link Color    "   #808080   "

Main Visited Link Color    "   #000000   "

Blockquote Background Color    "   #ffffff   "

Blockquote Border Color    "   #ffffff   "

Blockquote Color    "   #000000    "

Code Text Color    "    #000000   "

Save changes

Photo Background Color    "   #ffffff   "

Photo Border Color    "    #ffffff   "

Postfooter Background Color    "   #ffffff   "

Postfooter Border Color    "   #ffffff   "

Postfooter Text Color    "   #000000   "

Postfooter Link Color    "    #000000   "

Comment Tab Link Color    "    #000000   "

Feed Links Color    "   #000000   "

Save changes

Main Sidebar Background Color    "   #ffffff   "

Sidebar1 Background Color    "   #ffffff   "

Sidebar2 Background Color    "    #ffffff   "

Sidebar1 Border Color    "   #ffffff   "

Sidebar2 Border Color    "   #ffffff   "

Sidebar1 Header Background Color    "   #ffffff   "

Sidebar2 Header Background Color    "   #ffffff   "

Sidebar1 Header Border Color    "   #ffffff   "

Save changes

Sidebar2 Header Border Color    "   #ffffff   "

Sidebar1 Header Color    "    #000000   "

Sidebar2 Header Color    "    #000000   "

Sidebar1 Text Color    "    #000000   "

Sidebar2 Text Color    "    #000000   "

Sidebar1 Link Color    "    #000000   "

Sidebar2 Link Color    "    #000000   "

Save changes

Sidebar1 Hover Link Color    "    #808080   "

Sidebar2 Hover Link Color    "   #808080   "

Sidebar1 Visited Link Color    "   #000000   "

Sidebar2 Visited Link Color    "   #000000   "

Sidebar List Line Color    "   #000000   "

Lowerbar Background Color    "   #ffffff   "

Lowerbar Border Color    "    #000000   "

Save changes

Lowerbar Header Color    "   #000000   "

Lowerbar Header Background Color    "   #ffffff   "

Lowerbar Header Border Color    value="#ffffff">

Lowerbar Text Color    "   #000000   "

Lowerbar Link Color    "    #000000   "

Lowerbar Hover Link Color    "    #808080   "

Lowerbar Visited Link Color    "   #000000   "

Lowerbar List Line Color     "    #000000   "

Save changes

Comment Background Color    "   #ffffff   "

Comment Border Color    "   #ffffff   "

Comment Header Color    "   #000000   "

Comment Author Background Color    "    #ffffff   "

Comment Author Border Color    "    #ffffff   "

Comment Author Color    "   #000000   "

Comment Timestamp Color    "    #000000   "

Comment Text Color    "   #000000  "

Save changes

Footer Background Color    "   #ffffff   "

Footer Border Color    "   #ffffff   "

Footer Header Color    "   #000000   "

Footer Text Color    "   #000000   "

Footer Link Color    "   #000000   "

Footer Hover Link Color    "   #808080   "

Footer Visited Link Color    "   #000000   "

Save changes and view the blog.

Go to the next step.

Step 3. Global

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the Expand Widget Templates (EWT) button then
search for this section in your template code:

/* ----- GLOBAL ----- Blogger template design by Ourblogtemplates.com ……………............../* visibility: hidden; */ /* display: none; */ }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   GLOBAL   ----- Blogger template design by Ourblogtemplates.com */
/* -----   GLOBAL   ----- Blogger theme design by klara-web.blogspot.com */

* {margin:0; padding:0;}

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: $bodybgColor url(http://static1.grsites.com/user/folders/klaraweb67/t61918/hbg2.jpg) repeat top right;
background-attachment: fixed;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

#outer-wrapper {
margin: 0 auto;   /* auto - to make the template lay in the screen center */
padding: 0px 0px 0px 0px;
margin-top: 25px;
margin-bottom: 20px;
position: relative;
width: 100%;
text-align: center;
}

#blog-wrapper {
margin: 0 auto;   /* auto - to make the template lay in the screen center */
padding: 20px;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
position: relative;
width: 930px;
background: $blogframeColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2935578/texture2627766.jpg) repeat top right;
border: 4px double $blogBorderColor;
}

#spacer {clear: both; margin: 0; padding: 0;}

/* global link attributes */
a {color: $mainLinkColor; text-decoration: underline;}
a:hover {color: $mainHoverLinkColor; text-decoration: underline;}
a:visited {color: $mainVisitedLinkColor; text-decoration: underline;}

/* Blogger Navigation Bar */
#Navbar1 {
margin: 0;
padding: 0;
/* visibility: hidden; */
/* display: none; */
}

Step 4. Top Ads

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- TOP ADS ----- Blogger template design by...............................#topads .widget {margin: 0; padding: 5px 0;}

Select it and paste it the new section. Save the template and go to the next step.

Step 5. Header

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- HEADER ----- Blogger template design by....................padding: 0px 0px 0px 0px; border: 0; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   HEADER   ----- Blogger template design by Ourblogtemplates.com */
/* -----   HEADER   ----- Blogger theme design by klara-web.blogspot.com */

#header-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 930px;
text-align: center;
background: $headerbgColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2937339/texture6857113.jpg) repeat top right;
border-bottom: 2px solid $linkbarmainBorderColor;
}

#header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}

#header h1 {
color: $blogTitleColor;
font: $blogTitleFont;
text-align: left;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 20px 20px 0px 20px;
}

#header h1 a {
text-decoration: none;
color: $blogTitleColor;
}

#header h1 a:hover {
text-decoration: underline;
color: $blogDescriptionColor;
}

#header .description {
color: $blogDescriptionColor;
font: $blogDescriptionFont;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 2px 20px 17px 20px;
}

#header h1 p, #header .description p {margin:0;padding:0}

#header a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}

Step 6. Linkbar

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- LINKBAR ----- Blogger template design by........................background: $linkbarHoverBgColor; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   LINKBAR   ----- Blogger template design by Ourblogtemplates.com */
/* -----   LINKBAR   ----- Blogger theme design by klara-web.blogspot.com */

#linkbar-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 930px;
position: relative;
background: $linkbarbgColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2937339/texture6857113.jpg) repeat top right;
border-bottom: 2px solid $linkbarmainBorderColor;
}

#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 6px 5px 5px 5px;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
list-style-type:none;
border-right: 0px solid $linkbarBorderColor;
}

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 9px 20px 6px 20px;
width:100%;
text-decoration:none;
font: $linkbarTextFont;
color: $linkbarTextColor;
/* text-transform: uppercase; */
border-right: 0px solid $linkbarBorderColor;
border-left: 0px solid $linkbarBorderColor;
}

#linkbar a:hover {
color: $linkbarHoverTextColor;
background: $linkbarHoverBgColor;
}

Step 7. Middle Ads

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- MIDDLE ADS ----- Blogger template design by.........................background: $middlebarbgColor; }

Select it and paste it the new section. Save the template and go to the next step.

Step 8. Main

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- MAIN ----- Blogger template design by .....................border: 1px solid $imageBorderColor; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   MAIN   ----- Blogger template design by Ourblogtemplates.com */
/* -----   MAIN   ----- Blogger theme design by klara-web.blogspot.com */

#content-wrapper {
width: 930px;
margin: 0px 0px 0px 0px;
padding: 15px 0px 0px 0px;
position: relative;
text-align: left;
/* background: $contentbgColor; */
background: url(http://static1.grsites.com/user/folders/klaraweb67/r5507879/gradient33591454.png) repeat top right;
border: 0px solid $contentBorderColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#subcontent-wrapper {
float: left;
position: relative;
width: 555px;
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 0px;
background: $postbgColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2937339/texture6857113.jpg) repeat top right;
border: 1px solid $contentBorderColor;
}

#main-wrapper {
float: left;
position: relative;
max-width: 415px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: justify;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main {
width: 415px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: justify;
color: $textColor;
font: $textFont;
}

#main .widget {
margin: 0px 0px 7px 0px;
padding: 15px 5px 15px 10px;
background: $postbgColor; /* url(http://farm4.static.flickr.com/3135/2746541297_c4c9e6dae2_o.jpg) repeat-y top left; */
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2937339/texture6857113.jpg) repeat top right;
border: 0px solid $postBorderColor;
}

.post {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.6em;
text-align: justify;
}

.post h3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 1px 0px;
color: $postTitleColor;
font: $postTitleFont;
text-decoration: none;
text-align: left;
line-height: 1.6em;
/* text-transform: uppercase;
background: $posttitlebgColor;
border-top: 1px solid $posttitleBorderColor;
border-bottom: 2px solid $posttitleBorderColor; */
background: url(http://static1.grsites.com/user/folders/klaraweb67/r5507879/gradient33591454.png) repeat top right;
}

.post h3 a, .post h3 a:visited {
color: $postTitleColor;
text-decoration: none;
}
.post h3 a:hover {
color: $textColor;
text-decoration: underline;
}

.post-header-line-1 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 17px 0px;
}

h2.date-header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
color: $dateHeaderColor;
font: $dateHeaderFont;
text-decoration: none;
text-transform: uppercase;
}

.date-header span {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-body p {
/* Fix bug in IE5/Win with italics in posts */
margin: 0px 0px 0px 0px;
padding: 1px 0px 1px 0px;
display: inline; /* to fix floating-ads wrapping problem in IE */
height: 1%;
overflow: visible;
}

.post-body p a, .post-body p a:visited {
color: $mainLinkColor;
text-decoration: underline;
}

.post-body a:hover {
text-decoration: underline;
color: $mainHoverLinkColor;
}

.post ul {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
list-style-type: disc;
line-height: 1.6em;
font-size: 95%;
}

.post ol {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
line-height: 1.6em;
font-size: 95%;
}

.post li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 8px 0px;
}

a img {
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;
}

.post img {
margin: 5px;
padding: 5px;
background: $imagebgColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/r5507879/gradient33591454.png) repeat top right;
border: 1px solid $imageBorderColor;
}

Step 9. Post Footer

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- POST-FOOTER ----- Blogger template design by......................feed-links a:hover {color: $mainHoverLinkColor}

Select it and paste it the new section. Save the template and go to the next step.

/* -----   POST-FOOTER   ----- Blogger template design by Ourblogtemplates.com */
/* -----   POST-FOOTER   ----- Blogger theme design by klara-web.blogspot.com */

.post-footer {
display: block;
margin: 15px 0px 25px 0px;
padding: 4px 0px 5px 0px;
text-align: left;
font: $postfooterTextFont;
color: $postfooterTextColor;
font-weight: normal;
line-height: 1.6em; 
text-decoration: none;
/* background: $postfooterBgColor; */
background: url(http://static1.grsites.com/user/folders/klaraweb67/r5507879/gradient33591454.png) repeat top right;
border-top: 1px solid $postfooterBorderColor;
}

.post-footer-line {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer-line-1, .post-footer-line-2, .post-footer-line-3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer a {
color: $postfooterLinkColor;
text-decoration: none;
}

.post-footer a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}

.post-footer .post-comment-link a {
margin: 0px 0px 0px 7px;
padding: 0px 0px 0px 9px;
border-left: 1px solid $postfooterTextColor;
color: $commentTabLinkColor;
font-weight: normal;
text-decoration: none;
}

.post-footer .post-comment-link a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}

.post-footer .post-icons {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
background: $postfooterBgColor;
}

#blog-pager {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
font: $postfooterTextFont;
color: $feedlinksColor;
}

#blog-pager a {color: $feedlinksColor}
#blog-pager a:hover {color: $mainHoverLinkColor}

#blog-pager-newer-link {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#blog-pager-older-link {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.feed-links {
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear: both;
text-align: left;
font: $postfooterTextFont;
color: $feedlinksColor;
}

.feed-links a, .feed-links a:visited {color: $feedlinksColor}
.feed-links a:hover {color: $mainHoverLinkColor}

Step 10. Blockquote

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- BLOCKQUOTE ----- */ blockquote { ..............border: 2px solid $blockquoteBorderColor; }

Select it and paste it the new section. Save the template and go to the next step.

Step 11. Sidebar

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- SIDEBAR ----- Blogger template design by...............sidebar a img { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   SIDEBAR   ----- Blogger template design by Ourblogtemplates.com */
/* -----   SIDEBAR   ----- Blogger theme design by klara-web.blogspot.com */

#side-wrapper1 {
max-width: 140px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: $postbgColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2937339/texture6857113.jpg) repeat top right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#side-wrapper2 {
max-width: 373px;
float: right;
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.sidebar {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
font: $sidebarTextFont;
}

#sidebar1 {
width: 120px;
margin: 0px 0px 0px 0px;
padding: 15px 10px 0px 10px;
color: $sidebar1TextColor;
line-height: 1.6em;
}

#sidebar2 {
width: 358px;
margin: 0px 0px 0px 15px;
padding: 0px 0px 0px 0px;
color: $sidebar2TextColor;
line-height: 1.6em;
}

#sidebar1 .widget {
margin: 0px 0px 0px 0px;
padding: 0px 0px 20px 0px;
border: 0px solid $sidebar1BorderColor;
}

#sidebar2 .widget {
margin: 0px 0px 15px 0px;
padding: 10px 10px 10px 10px;
background: $sidebar2bgColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2937339/texture6857113.jpg) repeat top right;
border: 1px solid $sidebar2BorderColor;
}

/* sidebar heading ----- Blogger template design by Ourblogtemplates.com */

#sidebar1 h2 {
margin: 0px 0px 2px 0px;
padding: 0px 0px 2px 0px;
text-align: left;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: uppercase;
text-decoration: none;
 background: $sidebar1HeaderBgColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/r5507879/gradient33591454.png) repeat top right;
border-top: 0px solid $sidebar1HeaderBorderColor;
border-bottom: 1px solid $sidebar1HeaderBorderColor; 
}

#sidebar2 h2 {
margin: 0px 0px 2px 0px;
padding: 0px 0px 2px 0px;
text-align: left;
color: $sidebar2HeaderColor;
font: $sidebarHeaderFont;
text-transform: uppercase;
text-decoration: none;
 background: $sidebar2HeaderBgColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/r5507879/gradient33591454.png) repeat top right;
border-top: 0px solid $sidebar2HeaderBorderColor;
border-bottom: 1px solid $sidebar2HeaderBorderColor; 
}

.sidebar ul, #BlogArchive1 ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

.sidebar li, #BlogArchive1 li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/* border-bottom: 1px solid $sidebarListLineColor; */
}

#sidebar1 a {
color: $sidebar1LinkColor;
text-decoration: none;
}

#sidebar1 a:hover {
text-decoration: underline;
color: $sidebar1HoverLinkColor;
}

#sidebar1 a:visited {
text-decoration: none;
color: $sidebar1VisitedLinkColor;
}

#sidebar2 a {
color: $sidebar2LinkColor;
text-decoration: none;
}

#sidebar2 a:hover {
text-decoration: underline;
color: $sidebar2HoverLinkColor;
}

#sidebar2 a:visited {
text-decoration: none;
color: $sidebar2VisitedLinkColor;
}

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

Step 12. Comment

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- COMMENT ----- Blogger template design by................../* respecified, for ie5/mac's benefit */ padding-left: 0px; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   COMMENT   ----- Blogger template design by Ourblogtemplates.com */
/* -----   COMMENT   ----- Blogger theme design by klara-web.blogspot.com */

#comments {
margin: 0px 0px 0px 0px;
padding: 0px 15px 20px 15px;
text-align: left;
color: $commentTextColor;
font: $commentTextFont;
background: $commentbgColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2937339/texture6857113.jpg) repeat top right;
border: 1px dashed $commentBorderColor;
}

/* comment-header */
#comments h4 {
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTitleColor;
font: $commentTitleFont;
}

.deleted-comment {
font-style:italic;
color:gray;
margin: 3px 0px 3px 0px;
}

.comment-author {
display: block;
margin: 10px 0px 0px 0px;
padding: 8px 10px 3px 0px;
color: $commentauthorColor;
/* background: $commentAuthorBgColor; */
border-top: 1px solid  $commentboxBorderColor;
border-bottom: 0px dotted $commentboxBorderColor;
font-weight: normal;
}

.comment-author a {color: $commentauthorColor; text-decoration: none;}
.comment-author a:hover {color: $commentTimeStampColor; text-decoration: underline;}
.comment-author a:visited {color: $commentauthorColor; text-decoration: none;}
.comment-body {margin: 0; padding: 5px 0px 5px 40px;}
.comment-body p {margin: 0; padding: 0; line-height: 1.7em;}
.comment-footer, .comment-footer a {margin: 0px 0px 0px 0px; padding: 4px 0px 0px 0px;}

.comment-timestamp {
margin: 0px 0px 0px 4px;
padding: 0px 0px 7px 4px;
color: $commentTimeStampColor;
text-decoration: none;
font-weight: normal;
font-style: italic;
font-size: 96%;
}

.comment-timestamp a {
color: $commentTimeStampColor;
text-decoration: none;
}

.comment-timestamp a:hover {color: $commentauthorColor; text-decoration: underline;}

#comments ul {margin: 0; padding: 0; list-style-type: none;}
#comments li {margin: 0; padding: 0;}

a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
so we hide these two declarations from it */
padding: 0px 0px 0px 0px;
}

html>body a.comment-link {
/* respecified, for ie5/mac's benefit */
padding-left: 0px;
}

Step 13. Lower Section

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- LOWER SECTION ----- Blogger template design by.................color: $lowerbarVisitedLinkColor;}

Select it and paste it the new section. Save the template and go to the next step.

/* -----   LOWER SECTION   ----- Blogger template design by Ourblogtemplates.com */
/* -----   LOWER SECTION   ----- Blogger theme design by klara-web.blogspot.com */

#lower-wrapper {
margin: 15px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 930px;
font: $sidebarTextFont;
color: $lowerbarTextColor;
background: $lowerbarbgColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2937339/texture6857113.jpg) repeat top right;

border-bottom: 2px solid $lowerbarBorderColor;
}

#lowerbar-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 15px 0px 25px 0px;
width: 33%;
text-align: left;
line-height: 1.8em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#lowerads-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
text-align: center;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 15px 20px 25px 34px;}
.lowerads {margin: 0; padding: 0;}
.lowerads .widget {margin: 0; padding: 10px 0px 10px 0px;}

.lowerbar h2 {
margin: 0px 0px 2px 0px;
padding: 10px 0px 2px 0px;
color: $lowerbarHeaderColor;
font: $sidebarHeaderFont;
text-align: left;
text-transform: uppercase;
text-decoration: underline;
/* background: $lowerbarTitleBgColor;
border-bottom: 1px solid $lowerbarTitleBorderColor; */
}

.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

.lowerbar li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/* border-bottom: 1px solid $lowerbarListLineColor; */
}

.lowerbar a {color: $lowerbarLinkColor; text-decoration: none;}
.lowerbar a:hover {text-decoration: underline; color: $lowerbarHoverLinkColor;}
.lowerbar a:visited {text-decoration: none; color: $lowerbarVisitedLinkColor;}

Step 14. Footer

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- FOOTER ----- Blogger template design by..................color: $footerVisitedLinkColor; text-decoration: none; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   FOOTER   ----- Blogger template design by Ourblogtemplates.com */
/* -----   FOOTER   ----- Blogger theme design by klara-web.blogspot.com */

#footer-wrapper {
clear: both;
display: inline; /* handles IE margin bug */
float: left;
width: 930px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: $footerbgColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2937339/texture6857113.jpg) repeat top right;
border-top: 1px solid $footerBorderColor;

}

#footer {
margin: 0px 0px 0px 0px;
padding: 15px 0px 0px 0px;
text-align: center;
color: $footerTextColor;
font: $footerTextFont;
line-height: 1.6em;
}

#footer h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 2px 0px;
color: $footerHeaderColor;
font: $footerHeaderFont;
}

#footer .widget {
margin: 0px 0px 0px 0px;
padding: 0px 10px 15px 10px;
}

.footer p {margin: 0; padding: 0}

.footer a {
color: $footerLinkColor;
text-decoration: none;
}

.footer a:hover {
color: $footerHoverLinkColor;
text-decoration: underline;
}

.footer a:visited {
color: $footerVisitedLinkColor;
text-decoration: none;
}

Step 15. Credit

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- CREDIT ----- */.................color: $postbgColor; text-decoration: underline; }

Select it and paste it the new section. Save the template and go to the next step.

Step 17. Page Structure: Credit

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

< div id='creditleft' >..........Ourblogtemplates.com< /a > 2008< /b >< /p > < /div >

Select it and paste it the new section. Save the template and go to the next step.