The 3rd designed template for Soft Blogger Themes blog, & the sixth if I count the different versions of the first Light Green template.
This new theme is different from the previous ones as it has a fluid width that 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 have a fixed width right 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 soon ... with God's will ;)
Saturday, November 17, 2007
Friday, November 16, 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: right;
width: 100%;
margin:0 -270px 0 0;
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: 270px;
padding:0 10px 0 0;
background: #fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGNZgBya9sRpfpGrBfvsnCIPgfIEaL0lHBOH1Mgk08yXY2PLYdf_kWkBYrzRT3lUvE1fWZh2sTMUZB8b54w9xUbF-5olXJi2b1xyazUFB5_d0jp01R0KFT3HTpX0B1NdiuKYx0VFCdfbZM/s1600/body-back.jpg') bottom left no-repeat;
}
#sidebar-wrapper {
position: relative;
width: 260px;
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/AVvXsEjUjnI5pTTRWnjR5SlHzrJbEbHbvHIEFkBYwxGIscnUUaXDlUSUAcrNqy8yOBmIRKMhDd-g267Viz8gTqFyu-kQGn9Pj29-CjgE8ZuIF6zIHNnQ8fQLe4cPkbGVQ8HtO143pcfb40o6Dm7J/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 0;
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCen85CXeXwujldIHBTjTuLtfku-swfmO9XZC9ZGnnJTa83yI7hlMIdoyAyqeudPZfWr8NmdoWi_Q76qa66ExPkCKH-CidNfY6cb1m5Li1715eoXzaIPzmHnXnHemvAd5pMPwBrlXx16i/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/AVvXsEhWW_MNkk7Lm1M-wvL1fV4zhUD0HN8ZadiMS-rWbvY-qjbnspuve2n0aoLFlp8socmGfxfyckxOZfeNXtjGRHt3dBY4m-zboq1-2dBn2oulRZeKmjC41YVVkkf2fOs4TdmEmY4kMB40FXMd/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/AVvXsEiUrqanYwgBaMIyWoPZ4ZlYLkDNvU49WMlpnHsmH4RMitSoAchzrpDdAdFAybr6kb89J584MCP_5rUj79HlAW_zd6Pi1ySEuhh6Yehk0izArj2I2tzbvAUsgBGm7SXj5c0y4L1sZch4igLH/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='Iceberg Theme - Right Sidebar (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='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>
<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>
<!-- 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, November 12, 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)