Thursday, November 8, 2007

Fourth Version of the Light Green Theme:

The fourth & probably the last version of the Light Green blogspot template made for Soft BlogSpot Themes blog.

This one has two sidebars on the right plus a box above them in which you may put some text, some cool widget, a banner, adsense, well the possibilities are unlimited especially with the HTML/Javascript elements offered by blogger, you can put anything from the web there (videos, games, etc)

I can make the same with the sidebars on the left but I think it's enough with this skin, only if I get some requests I would make it, anyways I hope you like, enjoy!

Copy Then Paste the Code:

Below is the code you have to copy then paste in your blog, all the layout pictures were already uploaded to Blogger, if you want them for any reason, they are in HERE.

For detailed installation instructions checkout THIS POST.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Light Green - Two Right Sidebars
Author: BlogSpot Soft Themes
URL: soft-themes.blogspot.com
Modified From: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="mainTextColor" description="Text Color"
type="color" default="#555544" value="#555544">
<Variable name="pageHeaderColor" description="Blog Title Color"
type="color" default="#2291FF" value="#F1F094">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#ffffff" value="#F9FCAE">
<Variable name="linkColor" description="Link Color"
type="color" default="#88bb22" value="#88bb22">
<Variable name="hoverLinkColor" description="Link Hover Color"
type="color" default="#E1F7C1" value="#E1F7C1">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#555544" value="#555544">
<Variable name="sidebarHeaderColor" description="Sidebar Title Color"
type="color" default="#555544" value="#555544">
<Variable name="sidebarTextColor" description="Sidebar Text Color"
type="color" default="#555544" value="#555544">

<Variable name="bodyFont" description="Text Font" type="font"
default="normal normal 100% tahoma, 'Trebuchet MS', lucida, helvetica, sans-serif" value="normal normal 100% tahoma, 'Trebuchet MS', lucida, helvetica, sans-serif">
<Variable name="titleFont" description="Blog Title Font" type="font"
default="normal bold 190% Georgia, Times, serif" value="normal bold 190% Georgia, Times, serif">
<Variable name="descriptionFont" description="Blog Description Font" type="font"
default="normal normal 110% Verdana, sans-serif" value="normal normal 99% Verdana, sans-serif">
<Variable name="postTitle" description="Post Title Font" type="font"
default="normal normal 131% Verdana, sans-serif" value="normal normal 131% Verdana, sans-serif">
*/

/* Primary layout */

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #008A00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicx6Q-I8avfGo3FgxhGYoWEdM_n0T6zuw34Rzfy9-ydsetO0kSKjxDbmwmJgK8YYdZNN0yROJTVOrBNUohjfYafnhffYXe8ejvbab8o_bop91GBUXHMMxezTFdTK-fpvtVG1DODxEA6Blm/s1600/outerwrap.png) fixed top center repeat-y;
font-size: small;
}

img {
border: 0;
display: block;
}

.clear {
clear: both;
}
/* Wrapper */

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 780px;
text-align: left;
font: $bodyFont;
}

/* Header */

#header-wrapper {
background: #009900 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBFKlEGNKLI5j3JAcQSXR4X2mJCdHG_E7nM7U03fOky0MzhUuVvxueBztTIEopQjB36bVevAW5TWACfmQ-R4na6V-lQ_BRbLZ-2qYne4LBJAHuuB6vU_qll9RP2v31HAYVlAJKIaZea_P/s1600/topper.png) top center no-repeat;
margin: 0 auto;
padding: 0 0 0px 0;
border: 0;
}

#header h1 {
text-align: left;
font: $titleFont;
color: $pageHeaderColor;
margin: 0;
padding: 15px 20px 5px 20px;
}

h1 a, h1 a:link, h1 a:visited, h1 a:hover {
color: $pageHeaderColor;
text-decoration: none;
}

#header .description {
font: $descriptionFont;
text-align: left;
padding: 0 20px 100px 23px;
margin: 0;
line-height:140%;
color: $blogDescriptionColor;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOeppZYXddII38LBjEXqGdt1cXFzgDqme8hkkSxuUW2Ln19r4ikTJtBpVNicoG1mFKv5G8E_c1ukkWyhrmcJaeePV5LRQnIiuNXH_RuyE2I7BAuGy9QErZFY4arXFwzwJBX6M6dPn5dP9l/s1600/headbotborder.png) bottom center no-repeat;
}


/* Inner layout */

#content-wrapper {
padding: 0;
background: #F2FFF0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitx_9hzdOKw511SN38HSXX8whPD09CJ2ZqW5LcvqI_0CkpOKPctIG2fD8EM7ObfRBB27wltWeVdXCRVXnSB8rcH8WC4cjOAl-dmjKGCVqMGH45WuXdrSd6GrOOyFb-8NOsCaMtKqoIZVem/s1600/innerwrap.gif) top right repeat-y;
}

#main {
width: 409px;
padding: 0 5px 0 10px;
float: left;
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 {
width: 356px;
float: right;
}

#right-box {
width: 340px;
float: right;
padding: 0 7px 0 9px;
color: $sidebarTextColor;
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-1 {
width: 168px;
padding: 0 2px 0 9px;
float: left;
color: $sidebarTextColor;
border-right: 1px dotted #669922;
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-2 {
width: 165px;
padding: 0 8px 0 3px;
float: right;
color: $sidebarTextColor;
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 */
}

/* Bottom layout */

#footer {
clear: left;
margin: 0;
padding-top: 20px;
border: 0;
text-align: left;
background: #C2EEB7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKF0wzgm_wV2KuquDy-MYhmSj94gZ535NpyrhsPqrq1z4yiC7Pksg0wLaYyEYi8vIB7Frf-z2a69sxsu-ZT7SrFmUBoJRfsKpvaSFSaUPXyzF4-7sf_Q4z38vg5VKTDGreOCgh7TplWR8S/s1600/footertopborder.gif) top center no-repeat;
}

#footer .widget {
text-align: left;
margin: 0;
padding: 10px 0;
background-color: transparent;
}

/* Default links */

a:link, a:visited {
font-weight: bold;
text-decoration: none;
color: $linkColor;
background: transparent;
}

a:hover {
font-weight: bold;
text-decoration: none;
color: $hoverLinkColor;
background: #669922;
}

a:active {
font-weight : bold;
text-decoration : none;
color: $hoverLinkColor;
background: transparent;
}

/* Typography */

.main p, .sidebar p {
line-height: 140%;
margin-top: 5px;
margin-bottom: 1em;
}

h2, h3, h4, h5 {
margin: 0;
padding: 0;
}

h2 {
font-size: 130%;
}

h2.date-header {
color: $dateHeaderColor;
font-size: 88%;
padding-top: 10px;
}

.post h3 {
margin-top: 5px;
font: $postTitle;
}

.post-footer {
font-size: 88%;
padding-bottom: 5px;
border-bottom: 1px dotted #669922;
}

.sidebar h2 {
color: $sidebarHeaderColor;
padding-left: 5px;
padding-bottom: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT3sn_okAL4E-86mVfXQB3Az_bKMT0FKHdwmmiUoRv9_K8HWssus0HK6tPUbBJkV8Mtsu5u1CG2qVSuVECSBKXnEfk2EW5BSey2SRmaivfK_XYY8wT6WkqyiHIg3Odu9ZrbMScxhI9Wz1q/s1600/sidebartitle.gif) top center repeat-y;
}

.sidebar .widget {
margin: 12px 0 13px 0;
padding: 0;
}

.main .widget {
margin: 12px 0 0 0 ;
}

li {
line-height: 160%;
}

.sidebar ul {
margin-left: 0;
margin-top: 0;
padding-left: 0;
}

.sidebar ul li {
list-style: disc url(http://www.blogblog.com/moto_son/diamond.gif) inside;
vertical-align: top;
padding: 0;
margin: 0;
}

.widget-content {
margin-top: 0.5em;
}


/* Profile
----------------------------------------------- */

.profile-datablock {
margin: 3px 0 5px 0;
line-height: 140%;
}
.profile-textblock {
margin-left: 0;
}

.profile-img {
float: left;
margin: 0 5px 5px 0;
border:4px solid #8b2;

}



#comments {
border: 0;
border-top: 1px dashed #eed;
margin: 10px 0 0 0;
padding: 0;
}

#comments h4 {
margin-top: 10px;
margin-bottom: -10px;
font-weight: normal;
letter-spacing: 1px;
}

#comments dl dt {
font-weight: bold;
margin-top: 35px;
padding: 1px 0 0 18px;
background: transparent url(http://www.blogblog.com/moto_son/commentbug.gif) top left no-repeat;
}

#comments dl dd {
padding: 0;
margin: 0;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
}
body#layout #header,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Light Green Two Right Sidebars (Header)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='right-box' preferred='yes'>
</b:section>

<b:section class='sidebar' id='sidebar-1' preferred='yes'>
</b:section>

<b:section class='sidebar' id='sidebar-2' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='LinkList1' locked='false' title='Links List' type='LinkList'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> <!-- end outer-wrapper -->
</body>
</html>

Layout Pictures

Below are the pictures used as backgrounds in this template, you don't need them but only the HTML code you can copy from here, but you still can save them on your computer for any use.

To save a picture, click on its preview below then right click & from the menu that shows choose "save image" (or a slightly different option depending on your browser).