Thursday, December 25, 2008

Welcome to Thisaway Pearl blogger template



Hi everyone, this is my first blogger template, and i'm giving it away for free. This template was created based on one of blogger's default templates - Thisaway. While making this template, i aimed for something clean, simple and minimal. You are allowed to use this template anyway you like but please, do not claim it as your own, sell or redistribute it.

The code for this template can be found here.

And maybe you could leave a note in the comments if you use it.

Thank you and enjoy!


0 comments

Thisaway Pearl template code

Here's the template code for your use. Enjoy!
Copy the entire code!


<?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: Thisaway: Pearl
Designer: Lee Yung Tyng
URL: visualsanity.blogspot.com
Date: 25 Oct 2008
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================
<Variable name="textColor" description="Text Color"
type="color" default="#999999" value="#999999">
<Variable name="blogTitleColor" description="Blog Title Color"
type="color" default="#d8d8d8" value="#d8d8d8">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#d6d6d6" value="#d6d6d6">
<Variable name="postTitleColor" description="Post Title Color"
type="color" default="#898989" value="#898989">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#d6d6d6" value="#d6d6d6">
<Variable name="sidebarHeaderColor" description="Sidebar Title Color"
type="color" default="#898989" value="#898989">
<Variable name="mainLinkColor" description="Link Color"
type="color" default="#e2a059" value="#e2a059">
<Variable name="mainVisitedLinkColor" description="Visited Link Color"
type="color" default="#ba742a" value="#ba742a">
<Variable name="sidebarLinkColor" description="Sidebar Link Color"
type="color" default="#e2a059" value="#e2a059">
<Variable name="sidebarVisitedLinkColor"
description="Sidebar Visited Link Color"
type="color" default="#ba742a" value="#ba742a">

<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 100% Tw Cen MT" value="normal normal 100% Tw Cen MT">
<Variable name="headerFont" description="Sidebar Title Font"
type="font"
default="normal normal 100% Tw Cen MT" value="normal normal 100% Tw Cen MT">
<Variable name="pageTitleFont" description="Blog Title Font"
type="font"
default="normal normal 100% Tw Cen MT" value="normal normal 100% Tw Cen MT">
<Variable name="blogDescriptionFont" description="Blog Description Font"
type="font"
default="normal normal 80% Tw Cen MT" value="normal normal 80% Tw Cen MT">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">

*/

/* global
----------------------------------------------- */
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #ffffff url(http://img238.imageshack.us/img238/343/bgbodydw7.gif) repeat-x $startSide top;
color: $textColor;
font-size: small;
}

blockquote {
margin: 0;
padding-top: 0;
padding-$endSide: 10px;
padding-bottom: 0;
padding-$startSide: 10px;
border-$startSide: 6px;
border-$endSide: 6px;
color: $postTitleColor;
}

code {
color: $postTitleColor;
}

hr {
display: none;
}

.toggleopacity img {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:15;
}

.toggleopacity:hover img {
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}

/* layout
----------------------------------------------- */
#outer-wrapper {
margin: 0 auto;
margin-bottom: 0px;
width: 800px;
text-align: $startSide;
font: $bodyFont;
}

#header-wrapper {
padding-bottom: 35px;
margin-left: -20px;
background: url(http://img201.imageshack.us/img201/1848/bgheaderbottomsr5.png) no-repeat $startSide bottom;
}

#header {
padding-top: 78px;
align: center;
background: url(http://img440.imageshack.us/img440/576/bgheadertm2.png) no-repeat $startSide bottom;
}

#content-wrapper {
position: relative;
margin-left: -20px;
width: 800px;
background: url(http://img384.imageshack.us/img384/9876/bgmainwrapperwq1.png) repeat-y $startSide top;
}

#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $startSide;
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 20px;
padding: 0;
width: 483px;
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 {
padding-top: 22px;
padding-$endSide: 8px;
padding-bottom: 0;
padding-$startSide: 8px;
background: none repeat-x $startSide top;
}

.post {
margin-top: 0;
margin-$endSide: 8px;
margin-bottom: 14px;
margin-$startSide: 21px;
padding: 0;
border-bottom: 3px solid #d8d8d8;
}

#comments {
margin-top: 0;
margin-$endSide: 16px;
margin-bottom: 14px;
margin-$startSide: 29px;
padding: 10px;
border: 1px solid #f0e0ce;
background-color: #f5ede4;
}

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $endSide;
margin-top: 0;
margin-$endSide: 30px;
margin-bottom: 0;
margin-$startSide: 0;
width: 260px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: none repeat-x $startSide top;
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 {
padding-top: 22px;
padding-$endSide: 11px;
padding-bottom: 0;
padding-$startSide: 14px;
background: none repeat-y 179px 0;
}

#sidebar .widget {
margin-bottom: 20px;
}


#footer-wrapper {
padding-top: 35px;
margin-left: -20px;
background: url(http://img201.imageshack.us/img201/1848/bgheaderbottomsr5.png) no-repeat $startSide top;
clear: both;
}

#footer {
background: url(http://img384.imageshack.us/img384/9876/bgmainwrapperwq1.png) repeat-y $startSide top;
text-align: center;
min-height: 1em;
}

/* headings
----------------------------------------------- */

#header h1 {
margin: 0;
padding-top: 24px;
padding-$endSide: 0;
padding-bottom: 0;
background: none no-repeat 16px 26px;
}

h2.date-header {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 0;
padding-$startSide: 29px;
text-transform: uppercase;
color: $dateHeaderColor;
background: url(http://img373.imageshack.us/img373/4875/icondateux2.gif) no-repeat 13px 0;
font-size: 80%;
font-weight: normal;
}

.date-header span {
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 5px;
padding-top: 0;
padding-$endSide: 25px;
padding-bottom: 0;
padding-$startSide: 25px;
background: url(http://www.blogblog.com/thisaway/bg_date.gif) no-repeat $startSide 0;
}


.sidebar h2 {
padding-top: 1px;
padding-$endSide: 0;
padding-bottom: 0;
padding-$startSide: 36px;
color: $sidebarHeaderColor;
background: url(http://img386.imageshack.us/img386/3381/iconsidebarheadingwx2.gif) no-repeat $startSide 45%;
font: $headerFont;
}

.sidebar .Profile h2 {
color: $sidebarHeaderColor;
background: url(http://img386.imageshack.us/img386/3381/iconsidebarheadingwx2.gif) no-repeat $startSide 45%;
}

.post h3 {
margin-top: 13px;
margin-$endSide: 0;
margin-bottom: 13px;
margin-$startSide: 0;
padding: 0;
color: $postTitleColor;
font-size: 140%;
}

.post h3 a, .post h3 a:visited {
color: $postTitleColor;
}

#comments h4 {
margin-top: 0;
font-size: 120%;
}


/* text
----------------------------------------------- */

#header h1 {
text-align: center;
color: $blogTitleColor;
font: $pageTitleFont;
}

#header .description {
text-align: center;
margin: 0;
padding-top: 7px;
padding-bottom: 0;
color: $blogDescriptionColor;
font: $blogDescriptionFont;
}

.post-body p {
line-height: 1.4em;
/* Fix bug in IE5/Win with italics in posts */
margin: 0;
height: 1%;
overflow: visible;
}

.post-footer {
font-size: 80%;
color: $dateHeaderColor;
}

.uncustomized-post-template .post-footer {
text-align: $endSide;
}

.uncustomized-post-template .post-footer .post-author,
.uncustomized-post-template .post-footer .post-timestamp {
display: block;
float: $startSide;
text-align: $startSide;
margin-$endSide: 4px;
}

p.comment-author {
font-size: 83%;
}

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

.comment-body p {
line-height: 1.4em;
}

.feed-links {
clear: both;
line-height: 2.5em;
margin-bottom: 0.5em;
margin-$startSide: 29px;
}

#footer .widget {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 10px;
padding-$startSide: 0px;
color: #d6d6d6;
font-size: 90%;
line-height: 1.4em;
background: none no-repeat 16px 0;
}


/* lists
----------------------------------------------- */

.post ul {
padding-$startSide: 32px;
list-style-type: none;
line-height: 1.4em;
}

.post li {
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 4px;
padding-$startSide: 17px;
background: url(http://img372.imageshack.us/img372/7407/iconlistitemra9.gif) no-repeat $startSide 3px;
}

#comments ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#comments li {
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 1px;
padding-$startSide: 17px;
background: url(http://www.blogblog.com/thisaway/icon_comment_$startSide.gif) no-repeat $startSide 3px;
}

.sidebar ul {
padding: 0;
list-style-type: none;
line-height: 1.2em;
margin-$startSide: 0;
}

.sidebar li {
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 4px;
padding-$startSide: 17px;
background: url(http://img372.imageshack.us/img372/7407/iconlistitemra9.gif) no-repeat $startSide 3px;
}

#blog-pager-newer-link {
float: $startSide;
margin-$startSide: 29px;
}

#blog-pager-older-link {
float: $endSide;
margin-$endSide: 16px;
}

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

/* links
----------------------------------------------- */
a {
color: $mainLinkColor;
font-weight: normal;
}

a:hover {
color: $mainVisitedLinkColor;
}

a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/* */:/**/url(http://www.blogblog.com/thisaway/icon_comment_$startSide.gif) no-repeat $startSide 45%;
padding-$startSide: 14px;
}

html>body a.comment-link {
/* respecified, for ie5/mac's benefit */
background: url(http://www.blogblog.com/thisaway/icon_comment_$startSide.gif) no-repeat $startSide 45%;
padding-$startSide: 14px;
}

.sidebar a {
color: $sidebarLinkColor;
}

.sidebar a:hover {
color: $sidebarVisitedLinkColor;
}


#header h1 a {
color: $blogTitleColor;
text-decoration: none;
}

#header h1 a:hover {
color: #d9c6b4;
}

.post h3 a {
text-decoration: none;
}

a img {
border-width: 0;
}

.clear {
clear: both;
line-height: 0;
height: 0;
}

.profile-textblock {
clear: both;
margin-bottom: 10px;
margin-$startSide: 0;
}

.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 3px;
border: none;
}

.profile-link {
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 0;
padding-$startSide: 17px;
background: url(http://www.blogblog.com/thisaway_blue/icon_profile_$startSide.gif) no-repeat $startSide 0;
}

.credittext {
width:800px;
background: url(http://img384.imageshack.us/img384/9876/bgmainwrapperwq1.png) repeat-y $startSide top;
margin-left:-20px;
padding:20px 0 20px 0;
text-align:center;
}


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

body#layout #main,
body#layout #sidebar {
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='Thisaway Pearl (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='sidebar' preferred='yes'>
<b:widget id='Text1' locked='false' title='Welcome!' type='Text'/>
<b:widget id='Text3' locked='false' title='About Me' type='Text'/>
<b:widget id='Poll1' locked='false' title='Do you like Thisaway Pearl?' type='Poll'/>
<b:widget id='Text2' locked='false' title='Bugs' type='Text'/>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
</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>
<sub><div class='credittext'><a href='http://pearltemplate.blogspot.com'>Thisaway Pearl</a> © All Rights Reserved. Developed by <a href='http://visualsanity.blogspot.com/'>visualsanity</a>. Based on Thisaway Theme.</div>
<div class='clear'/></sub>
</div></div> <!-- end outer-wrapper -->
</body>
</html>


Do not modify the code without my consent. You'll only screw up your own blog page.
0 comments
Subscribe to: Comments (Atom)
 
Thisaway Pearl © All Rights Reserved. Developed by visualsanity. Based on Thisaway Theme.