Three Column Pyzam Templates

PREVIEW
Return to Templates
Get the 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: Pyzam left and right three column two row sidebars Designer: Elizabeth Nesbitt URL: http://moneyblog.hopto.org Date: June 8, 2009 Updated by: Elizabeth Nesbitt ----------------------------------------------- */ /* Variable definitions ==================== <Variable name="mainBgColor" description="Main Background Color" type="color" default="#390100" value="#ffffcc"> <Variable name="mainBorderColor" description="Main Border Color" type="color" default="#333" value="#ffffcc"> <Variable name="mainTextColor" description="Main Text Color" type="color" default="#333" value="#FF6FCF"> <Variable name="postTitleColor" description="Post Title Color" type="color" default="#333" value="#C94093"> <Variable name="postWrapColor" description="Post Color" type="color" default="#357" value="#E895CC"> <Variable name="borderColor" description="Header Border Color" type="color" default="#333" value="#ffffcc"> <Variable name="headerBorderColor" description="Header Outer Border Color" type="color" default="#333" value="#E895CC"> <Variable name="headerBgcolor" description="Header Title Color" type="color" default="#333" value="#ffff66"> <Variable name="innerPageHeaderColor" description="Page Header Inner Background Color" type="color" default="#333" value="#C94093"> <Variable name="postborderColor" description="Post Border Color" type="color" default="#333" value="#C94093"> <Variable name="postFooterBackgroundColor" description="Post Footer Background Color" type="color" default="#333" value="#ffff66"> <Variable name="mainLinkColor" description="Link Color" type="color" default="#333" value="#000000"> <Variable name="mainVisitedLinkColor" description="Visited Link Color" type="color" default="#333" value="#b3b3b3"> <Variable name="sidebarFontColor" description="Sidebar Font Color" type="color" default="#333" value="#000000"> <Variable name="sidebarHeaderColor" description="Sidebar Title Color" type="color" default="#333" value="#000000"> <Variable name="topSidebarBgColor" description="Sidebar Background Color" type="color" default="#333" value="#ffffcc"> <Variable name="sidebarTextColor" description="Sidebar Text Color" type="color" default="#345" value="#000000"> <Variable name="sidebarLinkColor" description="Sidebar Link Color" type="color" default="#258" value="#000000"> <Variable name="sidebarVisitedLinkColor" description="Sidebar Visited Link Color" type="color" default="#258" value="#b3b3b3"> <Variable name="bodyFont" description="Text Font" type="font" default="normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 88% Verdana, sans-serif"> <Variable name="pageTitleFont" description="Blog Title Font" type="font" default="normal bold 200% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 200% Verdana, sans-serif"> <Variable name="descriptionFont" description="Blog Description Font" type="font" default="normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 100% Verdana, sans-serif"> <Variable name="headerFont" description="Sidebar Title Font" type="font" default="normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 100% Verdana, sans-serif"> <Variable name="postTitleFont" description="Post Title Font" type="font" default="normal bold 135% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 135% Verdana, sans-serif"> <Variable name="sidebarFontSize" description="Sidebar Font Size" type="font" default="normal bold 135% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 89% Verdana, sans-serif"> <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"> */ body { background:$mainBgColor; margin:0; color:$mainTextColor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; background-color:$mainBgColor; background-image: url(http://sites.google.com/site/internetcashinformation/images/tattooVI.png?attredirects=0); background-attachment: fixed; background-position: center bottom; /* change to top left, top right, top center etc... to adjust background image */ background-repeat: no-repeat; border-color:#ffffff; border-width:0px ; border-style: solid; } /* Page Structure ----------------------------------------------- */ /* The images which help create rounded corners depend on the following widths and measurements. If you want to change these measurements, the images will also need to change. */ #outer-wrapper { width:990px; margin:0 auto; text-align:left; font: $bodyFont; filter:alpha(opacity=100); -moz-opacity:0.70; opacity:0.70; -khtml-opacity:0.70; } #main-wrap1 { width:485px; float:$startSide; background:$mainBgColor no-repeat $startSide bottom; margin:30px 0 0 30px; padding:0 0 10px; color:$sidebarTextColor; font-size:$bodyFont; line-height:1.5em; border:2px solid $mainBorderColor; 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-wrap2 { float:$startSide; width:100%; background: no-repeat $startSide top; padding:10px 0 0; font-size:$bodyFont; } #main { background:repeat-y $startSide; padding:0; width:485px; font-size:$bodyFont; } #sidebar-wrap { width:220px; float:$endSide; margin:15px 0 0; font-size: $sidebarFontSize; font-color: $sidebarFontColor; line-height:1.5em; 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 */ } #left-sidebar-wrap { width:220px; float:$startSide; margin:0px 0 0; font-size: $sidebarFontSize; font-color: $sidebarFontColor; line-height:1.5em; word-wrap: break-word; /* fix for long ... IE */ overflow: hidden; /* fix for long non-text ... float */ } .main .widget { margin-top: 4px; width: 468px; padding: 0 13px; } .main .Blog { margin: 0; padding: 0; width: 484px; } /* Links ----------------------------------------------- */ a:link { color: $mainLinkColor; } a:visited { color: $mainVisitedLinkColor; } a:hover { color: $mainVisitedLinkColor; } a img { border-width:0; } /* Blog Header ----------------------------------------------- */ #header-wrapper { width:980px; margin:0 auto 10px; border:3px solid $borderColor; background-color:$headerBorderColor; } #header-inner { background-position: center; margin-left: auto; margin-right: auto; background-color: $innerPageHeaderColor; } #header { margin: 5px; border: 1px solid $borderColor; text-align: center; color:$headerBgcolor; background-color:#borderColor; filter:alpha(opacity=100); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pageTitleFont; } #header a { color:$headerBgcolor; text-decoration:none; } #header a:hover { color:$headerBgcolor; } #header .description { margin:0 5px 5px; padding:0 20px 15px; max-width:700px; text-transform:uppercase; letter-spacing:.2em; line-height: 1.4em; font: $descriptionFont; color: $postWrapColor; } #header img { margin-left: auto; margin-right: auto; } /* Posts ----------------------------------------------- */ h2.date-header { margin-top:0; margin-$endSide:28px; margin-bottom:0; margin-$startSide:28px; font-size:85%; line-height:2em; text-transform:uppercase; letter-spacing:.2em; border:1px solid $postborderColor; border-width:1px 0; } .post { margin:.3em 0 5px; padding:0 13px; } .post h3 { margin:0; line-height:1.5em; background: no-repeat 10px .5em; padding-top:2px; padding-$endSide:14px; padding-bottom:2px; padding-$startSide:29px; color: $postTitleColor; font: $postTitleFont; } .post h3 a, .post h3 a:visited { text-decoration:none; color: $postTitleColor; } a.title-link:hover { background-color: $borderColor; color: $mainTextColor; } .post-body { padding-top:10px; padding-$endSide:14px; padding-bottom:1px; padding-$startSide:10px; } html>body .post-body { border-bottom-width:0; } .post-body { margin:0 0 .75em; } .post-body blockquote { line-height:1.3em; } .post-footer { background: $topSidebarBgColor; margin:0; padding-top:2px; padding-$endSide:14px; padding-bottom:2px; padding-$startSide:29px; display: block; border-width:1px; font-size:100%; line-height:1.5em; } /* The first line of the post footer might only have floated text, so we need to give it a height. The height comes from the post-footer line-height */ .post-footer-line-1 { min-height:1.5em; _height:1.5em; } .post-footer p { margin: 0; } html>body .post-footer { border-bottom-color:transparent; } .uncustomized-post-template .post-footer { text-align: $endSide; } .uncustomized-post-template .post-author, .uncustomized-post-template .post-timestamp { display: block; float: $startSide; text-align:$startSide; margin-$endSide: 4px; } .post-footer a { color: #258; } .post-footer a:hover { color: #666; } 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/rounders/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/rounders/icon_comment_$startSide.gif") no-repeat $startSide 45%; padding-$startSide:14px; } .post img { margin-top:0; margin-$endSide:0; margin-bottom:5px; margin-$startSide:0; padding:4px; border:1px solid $borderColor; } blockquote { margin:.75em 0; border:1px dotted $borderColor; border-width:1px 0; padding:5px 15px; color: $postWrapColor; } .post blockquote p { margin:.5em 0; } #blog-pager-newer-link { float: $startSide; margin-$startSide: 13px; } #blog-pager-older-link { float: $endSide; margin-$endSide: 13px; } #blog-pager { text-align: center; } .feed-links { clear: both; line-height: 2.5em; margin-$startSide: 13px; } /* Comments ----------------------------------------------- */ #comments { margin:-25px 13px 0; border:1px dotted $borderColor; border-width:0 1px 1px; padding-top:20px; padding-$endSide:0; padding-bottom:15px; padding-$startSide:0; } #comments h4 { margin:0 0 10px; padding-top:0; padding-$endSide:14px; padding-bottom:2px; padding-$startSide:29px; border-bottom:1px dotted $borderColor; font-size:120%; line-height:1.4em; color:$postTitleColor; filter:alpha(opacity=100); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80; } #comments-block { margin-top:0; margin-$endSide:15px; margin-bottom:0; margin-$startSide:9px; } .comment-author { background:url("http://www.blogblog.com/rounders/icon_comment_$startSide.gif") no-repeat 2px .3em; margin:.5em 0; padding-top:0; padding-$endSide:0; padding-bottom:0; padding-$startSide:20px; font-weight:bold; } .comment-body { margin:0 0 1.25em; padding-top:0; padding-$endSide:0; padding-bottom:0; padding-$startSide:20px; } .comment-body p { margin:0 0 .5em; } .comment-footer { margin:0 0 .5em; padding-top:0; padding-$endSide:0; padding-bottom:.75em; padding-$startSide:20px; } .comment-footer a:link { color: #333; } .deleted-comment { font-style:italic; color:gray; } .comment-form { padding-$startSide:20px; padding-$endSide:5px; } #comments .comment-form h4 { padding-$startSide:0px; } /* Profile ----------------------------------------------- */ .profile-img { float: $startSide; margin-top: 5px; margin-$endSide: 5px; margin-bottom: 5px; margin-$startSide: 0; border: 4px solid $topSidebarBgColor; } .profile-datablock { margin-top:0; margin-$endSide:15px; margin-bottom:.5em; margin-$startSide:0; padding-top:8px; } .profile-link { background:url("http://www.blogblog.com/rounders/icon_profile_$startSide.gif") no-repeat $startSide .1em; padding-$startSide:15px; font-weight:bold; font-color: $sidebarLinkColor; } .profile-textblock { clear: both; margin: 0; } .sidebar .clear, .main .widget .clear { clear: both; } #sidebartop-wrap { background:$topSidebarBgColor no-repeat $startSide bottom; margin:0px 0px 15px; padding:0px 0px 10px; font-color:$sidebarTextColor; } #sidebartop-wrap2 { background: no-repeat $startSide top; color:$sidebarTextColor; padding: 10px 0 0; margin:0; font-color:$sidebarTextColor; } #sidebartop h2 { line-height:1.5em; color:$sidebarHeaderColor; border-bottom: 1px dotted $sidebarHeaderColor; margin-bottom: 0.5em; font: $sidebarFontSize; } #sidebartop a { color: $sidebarLinkColor; } #sidebartop a:hover { color: $sidebarVisitedLinkColor; } #sidebartop a:visited { color: $sidebarVisitedLinkColor; } /* Sidebar Boxes ----------------------------------------------- */ .sidebar .widget { margin:.5em 13px 1.25em; padding:0 0px; } .widget-content { margin-top: 0.5em; } #sidebarbottom-wrap1 { background:$mainBgColor no-repeat $startSide top; border-size: 2px; margin:0 0 15px; padding:10px 0 0; color: $sidebarTextColor; } #sidebarbottom-wrap2 { background: no-repeat $startSide bottom; border-size: 2px; padding:0 0 8px; } .sidebar h2 { margin:0; padding:0 0 .2em; line-height:1.5em; font:$sidebarFontColor; font-size: $sidebarFontSize; } .sidebar ul { list-style:none; margin:0 0 1.25em; padding:0; } .sidebar ul li { background:url("http://www2.blogblog.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em; margin:0; padding-top:0; padding-$endSide:0; padding-bottom:3px; padding-$startSide:16px; margin-bottom:3px; border-bottom:1px dotted $borderColor; line-height:1.4em; } .sidebar p { margin:0 0 .6em; } #sidebar h2 { color: $postTitleColor; border-bottom: 1px dotted $postTitleColor; } #left-sidebartop h2 { line-height:1.5em; color:$sidebarHeaderColor; font: $sidebarFontSize; } #left-sidebartop a { color: $sidebarFontColor } #left-sidebartop a:hover { color: $sidebarFontColor; } #left-sidebartop a:visited { color: $sidebarVisitedLinkColor; } #left-sidebar a { color: $sidebarFontColor; } #left-sidebar a:hover, #left-sidebar a:visited { color: $sidebarVisitedLinkColor; } #left-sidebar h2 { color: $sidebarFontColor; } /* Footer ----------------------------------------------- */ #footer { width:980px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; padding: 5px; border:1px solid $borderColor; background-color:e0c4c8; filter:alpha(opacity=100); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80; } /** Page structure tweaks for layout editor wireframe */ body#layout #header-wrapper, body#layout #outer-wrapper, body#layout #footer-wrap1 { width:840px; } body#layout #main-wrap1 { width: 485px; margin-right:10px; } body#layout #sidebar-wrap, body#layout #left-sidebar-wrap { width:150px; } ]]></b:skin> </head> <body> <div id='outer-wrapper'> <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Tattoo VI (Header)' type='Header'/> </b:section> </div> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'> <b:widget id='AdSense2' locked='false' title='' type='AdSense'/> </b:section> </div> <div id='left-sidebar-wrap'> <div id='sidebartop-wrap'><div id='sidebartop-wrap2'> <b:section class='sidebar' id='left-sidebartop'> <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/> </b:section> </div></div> <div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'> <b:section class='sidebar' id='left-sidebar' preferred='yes'> <b:widget id='CustomSearch1' locked='false' title='Search This Blog' type='CustomSearch'/> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/> </b:section> </div></div> </div> <div id='main-wrap1'><div id='main-wrap2'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Label1' locked='false' title='Labels' type='Label'/> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div></div> <div id='sidebar-wrap'> <div id='sidebartop-wrap'><div id='sidebartop-wrap2'> <b:section class='sidebar' id='sidebartop'> <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/> <b:widget id='BlogList1' locked='false' title='My Blog List' type='BlogList'/> </b:section> </div></div> <div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='AdSense1' locked='false' title='' type='AdSense'/> </b:section> </div></div> </div> <div id='footer-wrap1'><div id='footer-wrap2'> <b:section class='footer' id='footer'/> </div></div> </div> </body> </html>

Three Column Pyzam Templates

Search This Blog

Blog Archive

17 June, 2009

Tattoo VI Left and right column template

Widgetbox Blog Network: Art & Design