Enough foo-foo. (At least for now...I have a soft spot for the swirlies, and another swirlie is almost ready to publish!) This is a down and dirty, no frills, we got business to do blog template. And I love it!! So, roll up your sleeves and getter dun.
This template is packed full of goodies:
- Fluid Widebar (Hack by me)
- Label Cloud (Hack by phydeaux3)
- Fluid style (Hack by me)
- Two sidebars
- Post area
- Lovely footer
- Custom favicon
- Fancy links (go ahead...hover over one!)
- Clickable header on post page
- Custom blockquotes
- Awesome Coffee Ring Brushes for Photoshop by On Thin Air
UPDATES:
02/19/08 - Do to some inner problem with Blogger, beyond my control and that I can't figure out, please use the 'Copy and Paste' txt file instead of uploading the xml file. Simply copy and paste it in the 'Edit Template' window. Save.
03/07/08: Fixed problem in IE to eliminate horizontal scrollbar.
04/09/08: Added text file in this post to copy and paste. You will still have to add the images as indicated in the instructions from the zip file. Go to the Dashboard | Layout | Edit HTML | Edit Template window. +/-Paste this text in that window:
<?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>
<link href='IMAGE/favicon2.png' rel='shortcut icon'/>
<link href='IMAGE/favicon2.png' rel='icon'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: anniebluesky
Name: Deadlines
URL: www.bloggeruniversity.blogspot.com
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#987654" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#987654" value="#333333">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#987654" value="#333333">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#987654" value="#4c4c4c">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#191919">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ffb6c1" value="#808080">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#191919">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#987654" value="#4c4c4c">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#6f3c1b">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 119% Georgia, Times, serif">
<Variable name="posttitlefont" description="Post Title Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 119% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="italic bold 115% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 382% Georgia, Times, serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 116% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/
/* Use this with templates/template-twocol.html */
body {
background: url('IMAGE/top_sides.png') top left repeat-x #FFFFFF;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
background-color: #636363;
color: #ffffff;
text-decoration: none;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:800px;
margin: -5px 0 35px 158px;
}
#header-inner {
background-image:url(IMAGE/header.png);
background-repeat:no-repeat;
height: 370px;
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0 -250px;
padding: 40px 15px 20px 5px;
line-height:1.2em;
text-transform:none;
letter-spacing:.2em;
font: $pagetitlefont;
color: $pagetitlecolor;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
background-color: #FADADD;
color: #987654;
text-decoration: none;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 5px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
#navbar-iframe {
display: none !important;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
margin-left: 5%;
margin-right: 2%;
text-align: left;
width: 93%;
padding: 0 10px 10px 10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 45%;
padding: 0 10px 0 10px;
border: 2px solid $bordercolor;
float: $startSide;
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 */
}
#widebar-wrapper {
float: right;
margin: 0px 05px 0 15px;
padding: 10px;
width: 47%;
border: 2px solid $bordercolor;
word-wrap: break-word;
color: $textcolor;
}
#widebar {
padding: 10px 0 5px 0px;
width: 100%;
word-wrap: break-word;
color: $textcolor;
}
#leftsidebar-wrapper {
float: right;
margin: 30px 0 0 10px;
padding: 10px;
overflow: hidden;
border: 2px solid $bordercolor;
width: 23%;
word-wrap: break-word;
}
#rightsidebar-wrapper {
float: right;
margin: 30px 10px 0 0;
padding: 10px;
overflow: hidden;
width: 21%;
border: 2px solid $bordercolor;
word-wrap: break-word;
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px 0px;
font: $posttitlefont;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
background-color: #636363;
color: #ffffff;
text-decoration: none;
}
.post-body {
line-height:1.6em;
}
.post p {
margin:0 0 .75em;
line-height:1.6em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:2px solid $bordercolor;
}
blockquote{
background-color: transparent;
border-top: 3px dotted #4c4c4c;
border-bottom: 3px dotted #4c4c4c;
padding: 15px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
p.credits {
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: small;
line-height: 100%;
word-spacing: normal;
letter-spacing: 0.3ex;
text-decoration: none;
text-transform: lowercase;
text-align: center;
text-indent: 0ex;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
width: 400px;
}
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:none; color: #ffffff !important;}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
]]></b:skin>
</head>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [102,102,102];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
<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='annie"s template tester (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='widebar-wrapper'>
<b:section class='sidebar' id='widebar1' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section></div>
<div id='leftsidebar-wrapper'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='It "s all about me...' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
<div id='rightsidebar-wrapper'>
<b:section class='sidebar' id='rightsidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='Link Love' type='LinkList'/>
<b:widget id='Text1' locked='false' title='Lorem ipsum' type='Text'/>
</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'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
<!--Please do not remove the credit links below, thank you.-->
<p class='credits'><span style='color : #4c4c4c; '>
designer : anniebluesky : </span>
<a href='http://bloggeruniversity.blogspot.com/'>
<span>www.bloggeruniversity.blogspot.com</span></a></p>
<!--END FOOTER -->
</body>
</html>
No comments:
Post a Comment