Canvas Green: Canvas Green Blogger theme

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 definitions

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    "   #11593C   "

Blog Background Color   "    #78B749   "

Blog Border Color   "   #ffffff   "

Header Background Color   "   #11593C   "

Header Border Color    "    #ffffff   "

Blog Title Color    "   #ffffff   "

Blog Description Color   "   #ffffff   "

Save changes

Linkbar Background Color   "   #78B749   "

Linkbar Main Border Color   "   #ffffff   "

Linkbar Border Color   "   #ffffff   "

Linkbar Text Color   "   #ffffff  "

Linkbar Hover Background Color   "   #78B749   "

Linkbar Hover Text Color   "   #ffffff   "

Middlebar Background Color   "   #11593C   "

Save changes

Content Background Color   "   #78B749    "

Content Border Color   "   #ffffff   "

Post Background Color   "   #11593C   "

Post Border Color   "   #ffffff   "

Post Title Color   "   #ffffff   "

Post Title Background Color   "   #11593C   "

Post Title Border Color   "    #ffffff   "

Save changes

Date Header Color   "   #ffffff   "

Text Color   "   #ffffff   "

Main Link Color   "   #ffffff   "

Main Hover Link Color   "   #ffffff   "

Main Visited Link Color   "   #ffffff   "

Blockquote Background Color   "   #11593C   "

Blockquote Border Color   "    #1b8c5e   "

Blockquote Color   "   #ffffff   "

Save changes

Code Text Color   "   #ffffff   "

Photo Background Color   "   #11593C   "

Photo Border Color   "   #ffffff   "

Postfooter Background Color   "   #11593C   "

Postfooter Border Color   "   #ffffff   "

Postfooter Text Color   "    #ffffff   "

Postfooter Link Color   "   #ffffff   "

Comment Tab Link Color   "    #ffffff   "

Feed Links Color   "    #ffffff   "

Save changes

Main Sidebar Background Color   "   #11593C   "

Sidebar1 Background Color   "   #11593C   "

Sidebar2 Background Color   "   #11593C   "

Sidebar1 Border Color   "   #1b8c5e   "

Sidebar2 Border Color   "    #ffffff   "

Sidebar1 Header Background Color   "    #ffffff   "

Sidebar2 Header Background Color  "   #fcfcfc   "

Sidebar1 Header Border Color   "   #ffffff   "

Sidebar2 Header Border Color   "   #ffffff   "

Save changes

Sidebar1 Header Color   "   #ffffff   "

Sidebar2 Header Color   "   #ffffff   "

Sidebar1 Text Color   "   #ffffff   "

Sidebar2 Text Color   "    #ffffff   "

Sidebar1 Link Color   "    #ffffff    "

Sidebar2 Link Color   "    #ffffff   "

Sidebar1 Hover Link Color   "    #d3ffb2   "

Sidebar2 Hover Link Color   "    #d3ffb2   "

Save changes

Sidebar1 Visited Link Color   "   #ffffff   "

Sidebar2 Visited Link Color   "   #ffffff   "

Sidebar List Line Color   "   #ffffff   "

Lowerbar Background Color   "   #78B749   "

Lowerbar Border Color   "   #ffffff   "

Lowerbar Header Color   "   #ffffff   "

Lowerbar Header Background Color   "   #78B749   "

Lowerbar Header Border Color   "   #ffffff   "

Save changes

Lowerbar Text Color   "   #ffffff   "

Lowerbar Link Color   "   #ffffff   "

Lowerbar Hover Link Color   "   #11593C   "

Lowerbar Visited Link Color   "   #ffffff   "

Lowerbar List Line Color   "   #ffffff   "

Comment Background Color   "   #1b8c5e   "

Comment Border Color   "   #1b8c5e   "

Comment Header Color   "   #ffffff   "

Save changes

Comment Author Background Color   "   #1b8c5e   "

Comment Author Border Color   "   #1b8c5e   "

Comment Author Color   "   #ffffff   "

Comment Timestamp Color   "   #ffffff   "

Comment Text Color   "   #ffffff   "

Footer Background Color   "   #11593C   "

Save changes

Footer Border Color   "   #ffffff   "

Footer Header Color   "   #ffffff   "

Footer Text Color   "   #ffffff   "

Footer Link Color   "   #ffffff   "

Footer Hover Link Color   "   #d3ffb2   "

Footer Visited Link Color   "   #ffffff   "

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/t2935840/texture7153987.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/t61951/reltis08.jpg) repeat top right;
border: 2px dashed $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/t2950233/texture1533184.jpg) repeat top right;
border-top: 2px dashed $headerBorderColor;
border-bottom: 2px dashed $headerBorderColor;
}

#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/t2935846/texture2345446.jpg) repeat top right;
border-bottom: 2px dashed $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: 1px dashed $linkbarBorderColor;
border-left: 0px solid $linkbarBorderColor;
}

#linkbar a:hover {
color: $linkbarHoverTextColor;
background: $linkbarHoverBgColor;
background: url() repeat top right;
}

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; */
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/t2950233/texture1533184.jpg) repeat top right;
border: 1px dashed $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; 
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2950233/texture1533184.jpg) repeat top right;
/* url(http://farm4.static.flickr.com/3135/2746541297_c4c9e6dae2_o.jpg) repeat-y top left; */
border-right: 1px dashed $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;
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2950233/texture1533184.jpg) repeat top right;
border-top: 1px dashed $posttitleBorderColor;
border-bottom: 1px dashed $posttitleBorderColor; 
}

.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() repeat top right;
border: 1px dashed $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; */
border-top: 1px dashed $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() 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: 1px dashed $sidebar1BorderColor;
}

#sidebar2 .widget {
margin: 0px 0px 15px 0px;
padding: 10px 10px 10px 10px;
background: $sidebar2bgColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2950233/texture1533184.jpg) repeat top right;
border: 1px dashed $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: underline;
/* background: $sidebar1HeaderBgColor;
border-top: 0px solid $sidebar1HeaderBorderColor;
border-bottom: 1px dashed $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: underline;
/* background: $sidebar2HeaderBgColor;
border-top: 0px solid $sidebar2HeaderBorderColor;
border-bottom: 1px dashed $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/t2950233/texture1533184.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/t2935846/texture2345446.jpg) repeat top right;
border-top: 2px dashed $lowerbarBorderColor;
border-bottom: 2px dashed $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;}

Step14. 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/t2950233/texture1533184.jpg) repeat top right;
border-bottom: 2px dashed $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.

/* -----   CREDIT   ----- */

#credit {
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
width: 100%;
height: 26px;
clear: both;
font-family: verdana, helvetica;
font-size: 70%;
color: $postbgColor; 
font-weight: normal;
background: $textColor; 
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2935846/texture2345446.jpg) repeat top right;
}

#creditleft {
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: left;
text-align: left;
display: inline;
width: 81%;
background: $textColor; 
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2935846/texture2345446.jpg) repeat top right;
}

#creditright {
margin: -33px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: right;
text-align:right;
display: inline;
width: 20%;
background: $textColor; 
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2935846/texture2345446.jpg) repeat top right;
}

#creditleft p {
margin: 0;
padding: 0
}

#creditright p {
margin: 0;
padding: 0
}

#creditleft a, .creditleft a:hover, .creditleft a:visited {
color: $postbgColor; 
text-decoration: underline;
}

#creditright a, .creditright a:hover, .creditright a:visited {
color: $postbgColor; 
text-decoration: underline;
}

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.