Ad Title
Description of the advertisement

Ads by Whatever

Tuesday, October 30, 2007

First Template, Third Look: A Three Columns Version

So it's here, the first Soft BlogSpot Themes three columns template.

The time I'm typing this I'm still working on the first template: the one I named 'Light Green' this is the third version & next there will be a fourth & I pass to something else.

If I'm requested to make other versions I most likely will with pleasure, it's all fun making templates, & even better if my work is appreciated, that for sure would impel me to do more & make more efforts creating nice & "soft" skins :)

Enjoy & leave a comment if you like (or dislike) :)

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 - Left and 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/AVvXsEhomMl1mHvBFuI6viA2GPP2GwsmW8oisctm-dBPWwvsyPspjtVnQ1Pkc_Vay3JkJzzYhcisOk3pbdO65zO_Thq1Eco5BDCNxXrSoFESHaD_hItrhimicRqDeezhBpUwvvlMm2oCqrVP0Qtf/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/AVvXsEig9yp7bey0TJEXpOEnYZYgTvBEtnGkB2JmmUTZicdkKKSgQwEulW6tn7JdsWMlVYgR_Z3HDn25LJ2aNHnu7QEYxfGctZvTvaSJfA7qBWHKPJRQJlRPWke86vimL5f8RD06kq-TA-suiKgQ/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/AVvXsEi3sUXOBpGp6RI7I68W2vL_4Ra5GbgfpwBiPyuv3YErUbo7omV9uacyrVALYo6OyXQXu3XLnoSzyJ3NhyphenhyphenE1K9wbspJbFVeFPn2brgGEQcAC54R9RxZhyt3bPKkQx3kPSJpzkq22V1bcoXjs/s1600/headbotborder.png) bottom center no-repeat;
}


/* Inner layout */

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

#content-wrapper-2 {
padding: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNjI56H6t9EIKYM3PPIYctGs8xoU4iyjzs_CLa6SmUTS0LyzQJo-UMblpgHAQmhPFO0Cd0y0he8ysxNNV6yNMX4aJzzEmrfaw_bOvKrfrscBWx7YGJ4sM75VFQPtE22Mvqcfbri-BQX3Y/s1600/innerwrap-left.gif) top left repeat-y;
}

#main {
width: 370px;
padding: 0 5px 0 5px;
float: 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 */
}

#left-sidebar {
width: 180px;
padding: 0 13px 0 7px;
float: left;
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 */
}

#right-sidebar {
width: 180px;
padding: 0 7px 0 13px;
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/AVvXsEjfusJ7wPMUw8ID61Vgk-Yi_Zjeb30QKd5On1DiQ7JHiQrMgacGDRw5ukhdDn4SuTYTRhqU_7p5K04ApNvF1sPn5nyKUw7g9WT8lAeNuxOsVu8eE8LnPnhHIhsKOQ-t-swVuKtAL7Fs56zi/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/AVvXsEiPekCxjUxsplMAoofl4NekmDwvaYbxszqW3vI3xicnHjw28aeXRvY5CJaDfIBlRYn-_OhnACJJ17RXrq8UI9V_cKESi0p7fdFuFbGtVNKJrmN9cZhrdCjdgwPxy26OAoKqHQ0r1WOkrBnc/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='(Header)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>
<div id='content-wrapper-2'>

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

<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='Links List' type='LinkList'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</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>

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

</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).