Ad Title
Description of the advertisement
www.link.com

Ad Title
Description of the advertisement
www.link.com

Ad Title
Description of the advertisement
www.link.com

Ad Title
Description of the advertisement
www.link.com

Ads by Whatever

Saturday, December 1, 2007

Iceberg Fluid Width Theme - Left Sidebar

Iceberg theme in its 2nd version, another template designed for Soft Blogger Themes blog, the seventh counting all previous themes & the second that has a fluid width.

Fluid width as I said previously means that it will always fit your browser's window, it will also for most of users be larger then the previous skins I made, those have a fixed width of about 800 pixels to fit the smallest screen resolutions, while most of users have better resolution than that .. for these last this iceberg skin will look larger :)

The template in its second version has a fixed width left sidebar, in fact only the posts column is fluid while the sidebar keeps always the same width (270 pixels).

Other versions of this theme will follow, three columns versions ... with God's will of course ;)

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
* Iceberg - Left Sidebar
* by BlogSpot Soft Themes
* url: http://soft-themes.blogspot.com/
*
* Modified from:
* Herbert
* by Jason Sutter
* Updated by Blogger Team
*/

/*
* Variable definitions
* ====================

<Variable name="mainBgColor" description="Page Background Color"
type="color" default="#ffffff" / value="#ffffff">
<Variable name="mainTextColor" description="Text Color"
type="color" default="#000066" / value="#000066">

<Variable name="titleColor" description="Blog Title Color"
type="color" default="#ff0000"/ value="#ff0000">
<Variable name="descriptionColor" description="Blog Description Color"
type="color" default="#000000" / value="#000000">

<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#3D81EE" / value="#333333">

<Variable name="postTitleColor" description="Post Title Color"
type="color" default="#0000cc" / value="#0000cc">

<Variable name="postFooterColor" description="Post Footer Color"
type="color" default="#003366" / value="#003366">

<Variable name="mainLinkColor" description="Link Color"
type="color" default="#3D81EE" / value="#3D81EE">
<Variable name="mainVisitedLinkColor" description="Visited Link Color"
type="color" default="#66B5FF" / value="#66B5FF">

<Variable name="sidebarTitleColor" description="Sidebar Title Color"
type="color" default="#3D81EE" / value="#0000cc">

<Variable name="sidebarLinkColor" description="Sidebar Link Color"
type="color" default="#3D81EE" / value="#000066">
<Variable name="sidebarVisitedLinkColor"
description="Sidebar Visited Link Color"
type="color" default="#66B5FF" / value="#000066">

<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 87% Trebuchet, Trebuchet MS, Arial, sans-serif" / value="normal normal 87% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="titleFont" description="Blog Title Font"
type="font" default="normal bold 286% Trebuchet, Trebuchet MS, Arial, sans-serif" / value="normal bold 286% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="descriptionFont" description="Blog Description Font"
type="font" default="normal bold 99% Trebuchet, Trebuchet MS, Arial, sans-serif" / value="normal bold 99% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="postTitleFont" description="Post Title Font"
type="font" default="normal bold 144% Trebuchet, Trebuchet MS, Arial, sans-serif" value="normal bold 144% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="sidebarTitleFont" description="Sidebar Title Font"
type="font" default="normal bold 151% Trebuchet, Trebuchet MS, Arial, sans-serif" / value="normal bold 151% Trebuchet, Trebuchet MS, Arial, sans-serif">
*/
body {
margin: 0;
padding: 0;
background: $mainBgColor;
color: $mainTextColor;
font: $bodyFont;
}

a {
color: $mainLinkColor;
text-decoration: none;
}

a:hover {
color: $mainLinkColor;
text-decoration: none;
font-weight: bold;
}

a:visited {
color: $mainVisitedLinkColor;
}

a img {
border: 0;
}

@media all {
#main-wrapper {
padding:0;
float: right;
width: 100%;
margin:0 0 0 -270px;
background: #C3D9FF;
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-wrapper-2 {
margin:0;
margin-left: 270px;
padding:0 10px 0 0;
background: #fff url('http://4.bp.blogspot.com/_qP-1yjY3IyM/R1GGTk_WKYI/AAAAAAAAAn4/OqLvg8iNung/s1600-R/body-back.jpg') bottom right no-repeat;
}

#sidebar-wrapper {
position: relative;
width: 260px;
float: left;
padding: 0 5px 0 5px;
text-align: left;
border-top: 18px solid #ffffff;
background: #C3D9FF url('http://2.bp.blogspot.com/_qP-1yjY3IyM/R1GNDE_WKZI/AAAAAAAAAoA/XIn2K5Cre08/s1600-R/leftside-back.jpg') top left no-repeat;
}

#sidebar {
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 */
}
}

#content-wrapper {
padding: 0;
margin: 0 0 0 10px;
min-width: 780px;
}


@media handheld {
div#main-wrapper {
float: none;
width: 90%;
}

#sidebar-wrapper {
padding: 20px 1em 0 1em;
text-align: left;
}
}

#header {
position: relative;
height: 190px;
padding: 0;
margin: 0 0 10px 0;
border-bottom: solid 5px $titleColor;
background: url('http://3.bp.blogspot.com/_qP-1yjY3IyM/Rz8Q7Ms9nnI/AAAAAAAAAmE/VJLZdO16vPY/s1600/header.jpg') #C9D2E8 top left no-repeat;
color: $descriptionColor;
}

#footer {
padding: 0 0 50px 0;
margin: 0;
border-top: solid 5px $titleColor;
background: url('http://2.bp.blogspot.com/_qP-1yjY3IyM/Rz7BXMs9niI/AAAAAAAAAlc/z4mMq9ZujWk/s1600/footer.jpg') #2A4785 bottom left no-repeat;
color: $descriptionColor;
}

h1 a:link {
color: $titleColor;
}

h1 a:hover {
text-decoration: none;
color: $titleColor;
}

h1 a:visited {
color: $titleColor;
}

h1 {
padding: 18px 0px 0px 5%;
margin: 0;
color: $titleColor;
background: ;
font: $titleFont;
}

.description {
padding: 0px 0px 0px 5%;
margin: 0px;
color: $descriptionColor;
background: transparent;
font: $descriptionFont;
}


h3.post-title {
margin: 0;
padding: 2px 0px 2px 2%;
color: $postTitleColor;
background: #C3D9FF url('http://4.bp.blogspot.com/_qP-1yjY3IyM/Rz7I7ss9nlI/AAAAAAAAAl0/chiusej-xYU/s1600/post-title-bg.jpg') top left repeat-y;
font: $postTitleFont;
}

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

h3.post-title a:hover {
color: $postTitleColor;
letter-spacing: 5px;
text-decoration: none;
background: transparent;
}

h2.date-header {
margin: 0;
padding: 0px 0px 0px 1%;
color: $dateHeaderColor;
font-size: 90%;
text-align: left;
}

#sidebar h2 {
margin: 0px;
color: $sidebarTitleColor;
font: $sidebarTitleFont;
padding: 0;
border: none;
}

#sidebar .widget {
margin: 5px 0 25px 0;
padding: 0;
}

#sidebar ul {
list-style-type: none;
font-size: 100%;
margin-top: 0;
}

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

.Blog {
margin: 0;
}

.blog-posts, .feed-links {
margin-left: 10px;
}

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

.post {
margin: 0;
font-size: 100%;
}

.post-body {
margin: 0;
padding: 5px 6px 0 5px;
border: 5px solid #C3D9FF;
border-top-width: 0;
}

.post strong {
font-weight: bold;
}

#sidebar a {
text-decoration: none;
}

#sidebar a:link,
#sidebar a:visited {
color: $sidebarLinkColor;
}

#sidebar a:active,
#sidebar a:hover {
color: $mainLinkColor;
background: transparent;
font-weight: normal;
}

pre,code,strike {
color: #666666;
}

.post-footer {
padding: 0 0 0 15px;
margin: 0;
color: $postFooterColor;
font-size: 80%;
}

#comments {
padding: 2px 0px 2px 5px;
font-size: 100%;
font-weight: bold;
font-family: $bodyFont;
}

.comment-author {
margin-top: 20px;
}

.comment-body {
margin-top: 10px;
font-size: 100%;
font-weight: normal;
color: black;
}

.comment-footer {
padding: 0;
margin-bottom: 20px;
color: $postFooterColor;
font-size: 90%;
font-weight: normal;
display: inline;
margin-right: 10px;
}

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

.comment-link {
margin-left: .6em;
}


/* Profile
----------------------------------------------- */
.profile-textblock {
clear: both;
margin-left: 0;
}
.profile-img {
margin: 0 0 5px 5px;
float: right;
}

.BlogArchive #ArchiveList {
float: right;
}

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

#sidebar .widget {
clear: both;
}

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

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

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

.clear {
clear: both;
}

/** Tweaks for layout editor mode */

body#layout #outer-wrapper {
margin-top: 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='Another Theme (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'>
<div id='main-wrapper-2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' 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).