The third version of the Iceberg theme designed for Soft Blogger Themes blog, in which I added a third column.
This is still a template that has fluid width but with two sidebars (left & right), both sidebars are width fixed (210 pixels).
I know people mostly look for themes like this one having three columns, as BlogSpot doesn't offer any, till now except for one theme that I made for a friend, all others had different versions including three columns versions.
I still have to make a fourth version of the Iceberg theme, it will have 3 columns as well, it's maybe done the time you're reading this), then passing to something else ...
Tuesday, December 11, 2007
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.
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 - Right 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: left;
width: 100%;
margin:0 -210px 0 -210px;
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-right: 210px;
margin-left: 210px;
padding:0 10px 0 10px;
background: #fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8MxiQ2JOtpsAyY1nY6ksmUQMxCj0hv-tBa4WlK49QpGeB8DRCVfhI2nUmR_2kt24zvg9FqgAAi2ltB-6_VDrFHvsIDho6oPQyypx1tF3pPC30IaSmb3-Be3yayYpnp3jnW_izJ27lFE9L/s1600-r/body-back.jpg') bottom right no-repeat;
}
#left-sidebar-wrapper {
position: relative;
width: 200px;
float: left;
padding: 0 5px 0 5px;
text-align: left;
border-top: 18px solid #ffffff;
background: #C3D9FF url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz002XwYT6pUFgLI1GtVHq3UMCLnKltYIu4OYX54QKM7UXuAZYeYtFmdmR-RxYYxsRoMgWmEcZLPLhhyB2zcRWZJFG1oC9c2pkCjxAu_uWXUQwMNctL6sCLoaF13ITPmu9HLwm5lIkVaE/s1600/leftside-back.jpg') top left no-repeat;
}
#right-sidebar-wrapper {
position: relative;
width: 200px;
float: right;
padding: 0 5px 0 5px;
text-align: left;
border-top: 18px solid #ffffff;
background: #C3D9FF url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmtlxhVX2AWVVQaSCXTdYwR6LLwo7voDgKoypHaW0oTCgPE-gFHgbHTMXQKDJlPcG2HZRSpo4uBl4tfK3yLvQvw9G1dBjj7nhw-MouUE8fcPt2eAHhMJUtJUj00iUFOFG41sthiUz7Z4/s1600/rightside-back.jpg') top right 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 10px 0 10px;
min-width: 820px;
}
@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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbQLRUoUORPYRuVXVXlvA48HjD9NOwZIC2n63oE21bDtH8PhNeCFXFELTDYpRlNAw6L-flcZC8lqrMBDXXfJVUc685shyphenhyphen4s9gxUYwb9JY1t6SDtZ-KTZ5PWJpCSWpZUz84de3y24CuQJcb/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFSVOASXm297nI2Twe8VNx3uANxvqsuaAH-OB61ZNSPuZGO2pomXFS-tq-OCMlgayvFMLLnqzMvr3b8kmTP9blDZOVUlMUZbpzyI8jtkk6q0iiVNso_B9aDTUQbBcA7lmoxEf9-MQXsAO/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFlYQ1Q_nHWIrGcQmXO6Fd8PLzTkKLdD9DgcgcuV0OvGA9njEdPrE7N3w6y4StBsnPrOqh1FZo7ONhUv-kKG_MlEmVLzindu6fyktFDbtllGW05FAmivZ20PwRGwKY4bGM_5tj3vYLwIYL/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: 0;
}
.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='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</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='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='LinkList2' 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>
Monday, December 10, 2007
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).
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).
Subscribe to:
Posts (Atom)