Scribd
Upload
455 views

Blogger Template

This document contains CSS code for customizing the design and layout of a blog template. It includes variable definitions for colors, fonts, sizes, and other style properties that can be modified. Sections of CSS code are grouped and labeled to configure different page elements like the header, tabs, posts, sidebar, and footer.

Uploaded by

Steffi Jasmyn Belderol
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
455 views

Blogger Template

This document contains CSS code for customizing the design and layout of a blog template. It includes variable definitions for colors, fonts, sizes, and other style properties that can be modified. Sections of CSS code are grouped and labeled to configure different page elements like the header, tabs, posts, sidebar, and footer.

Uploaded by

Steffi Jasmyn Belderol
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 15

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='htt p://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/gm l/expr'> <head> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maxi mum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:skin><![CDATA[/* ----------------------------------------------Blogger Template Style Name: Travel Designer: Sookhee Lee URL: www.plyfly.net ----------------------------------------------- */ /* Variable definitions ==================== <Variable name="keycolor" description="Main Color" type="color" default="#539 bcd" value="#8553cd"/> <Group description="Page Text" selector="body"> <Variable name="body.font" description="Font" type="font" default="normal normal 13px 'Trebuchet MS',Trebuchet,sans-serif" value= "normal normal 14px Covered By Your Grace"/> <Variable name="body.text.color" description="Text Color" type="color" defa ult="#bbbbbb" value="#bbbbbb"/> </Group> <Group description="Backgrounds" selector=".body-fauxcolumns-outer"> <Variable name="body.background.color" description="Outer Background" type= "color" default="#539bcd" value="#8552cd"/> <Variable name="content.background.color" description="Main Background" typ e="color" default="transparent" value="transparent"/> </Group> <Group description="Links" selector=".main-outer"> <Variable name="link.color" description="Link Color" type="color" default=" #ff9900" value="#65ff00"/> <Variable name="link.visited.color" description="Visited Color" type="color " default="#b87209" value="#4eb809"/> <Variable name="link.hover.color" description="Hover Color" type="color" de fault="#ff9900" value="#65ff00"/> </Group> <Group description="Blog Title" selector=".header h1"> <Variable name="header.font" description="Font" type="font" default="normal normal 60px 'Trebuchet MS',Trebuchet,sans-serif" value= "normal normal 60px Crafty Girls"/> <Variable name="header.text.color" description="Text Color" type="color" de fault="#ffffff" value="#ff0064"/>

</Group> <Group description="Blog Description" selector=".header .description"> <Variable name="description.text.color" description="Description Color" typ e="color" default="$(body.text.color)" value="$(body.text.color)"/> </Group> <Group description="Tabs Text" selector=".tabs-inner .widget li a"> <Variable name="tabs.font" description="Font" type="font" default="normal bold 16px 'Trebuchet MS',Trebuchet,sans-serif" value="n ormal bold 16px 'Trebuchet MS',Trebuchet,sans-serif"/> <Variable name="tabs.text.color" description="Text Color" type="color" defa ult="#ffffff" value="#ffffff"/> <Variable name="tabs.selected.text.color" description="Selected Color" type ="color" default="#ffffff" value="#ffffff"/> </Group> <Group description="Tabs Background" selector=".tabs-outer .PageList"> <Variable name="tabs.background.color" description="Background Color" type= "color" default="transparent" value="transparent"/> <Variable name="tabs.selected.background.color" description="Selected Color " type="color" default="transparent" value="transparent"/> </Group> <Group description="Date Header" selector=".main-inner h2.date-header"> <Variable name="date.font" description="Font" type="font" default="normal normal 14px 'Trebuchet MS',Trebuchet,sans-serif" value= "normal normal 14px 'Trebuchet MS',Trebuchet,sans-serif"/> <Variable name="date.text.color" description="Text Color" type="color" defa ult="$(body.text.color)" value="$(body.text.color)"/> </Group> <Group description="Post Title" selector="h3.post-title a"> <Variable name="post.title.font" description="Font" type="font" default="normal bold 20px 'Trebuchet MS',Trebuchet,sans-serif" value="n ormal bold 20px 'Trebuchet MS',Trebuchet,sans-serif"/> <Variable name="post.title.text.color" description="Text Color" type="color " default="#ffffff" value="#ffffff"/> </Group> <Group description="Post Background" selector=".column-center-inner"> <Variable name="post.background.color" description="Background Color" type= "color" default="transparent" value="transparent"/> <Variable name="post.background.url" description="Post Background URL" type ="url" default="none" value="none"/> </Group> <Group description="Gadget Title Color" selector="h2"> <Variable name="widget.title.font" description="Font" type="font" default="normal bold 14px 'Trebuchet MS',Trebuchet,sans-serif" value="no rmal bold 14px 'Trebuchet MS',Trebuchet,sans-serif"/> <Variable name="widget.title.text.color" description="Title Color" type="co lor" default="#ffffff" value="#ffffff"/> </Group> <Group description="Gadget Text" selector=".footer-inner .widget, .sidebar .w idget">

<Variable name="widget.font" description="Font" type="font" default="$(body.font)" value="$(body.font)"/> <Variable name="widget.text.color" description="Text Color" type="color" de fault="$(body.text.color)" value="$(body.text.color)"/> </Group> <Group description="Gadget Links" selector=".sidebar .widget"> <Variable name="widget.link.color" description="Link Color" type="color" de fault="$(body.text.color)" value="$(body.text.color)"/> <Variable name="widget.link.visited.color" description="Visited Color" type ="color" default="$(link.visited.color)" value="$(link.visited.color)"/> <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#ffffff" value="#ffffff"/> </Group> <Group description="Sidebar Background" selector=".column-left-inner .columnright-inner"> <Variable name="widget.outer.background.color" description="Background Colo r" type="color" default="transparent" value="transparent"/> <Variable name="widget.border.bevel.color" description="Bevel Color" type=" color" default="transparent" value="transparent"/> </Group> <Variable name="body.background" description="Body Background" type="backgrou nd" color="$(body.background.color)" default="$(color) none repeat-x scroll t op center" value="#ecefd4 url(http://themes.googleusercontent.com/image?id=1-TVQ tkFGGxr1HLklpQFYqj48HITLjNoYpsRAVkDPHqOiEGiy6MPuoAZlsq7zO8UvxXO9) no-repeat fixe d top center /* Credit: Graffizone (http://www.istockphoto.com/googleimages.php? id=6437369&platform=blogger) */"/> <Variable name="content.background" description="Content Background" type="ba ckground" color="$(content.background.color)" default="$(color) none repeat scroll top center" value="transparent url(http://blogblog.com/1kt/travel/bg_black_70.pn g) repeat scroll top left"/> <Variable name="comments.background" description="Comments Background" type=" background" default="#cccccc none repeat scroll top center" value="transparent url(ht tp://blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top center"/> <Variable name="content.imageBorder.top.space" description="Content Image Bor der Top Space" type="length" default="0" value="0"/> <Variable name="content.imageBorder.top" description="Content Image Border To p" type="url" default="none" value="none"/> <Variable name="content.margin" description="Content Margin Top" type="length " default="20px" value="20px"/> <Variable name="content.padding" description="Content Padding" type="length" default="20px" value="20px"/> <Variable name="content.posts.padding" description="Posts Content Padding" ty pe="length" default="10px" value="10px"/> <Variable name="tabs.background.gradient" description="Tabs Background Gradie nt" type="url" default="url(http://www.blogblog.com/1kt/travel/bg_black_50.png)" value=" url(http://www.blogblog.com/1kt/travel/bg_black_50.png)"/> <Variable name="tabs.selected.background.gradient" description="Tabs Selected Background Gradient" type="url" default="url(http://www.blogblog.com/1kt/travel/bg_black_50.png)" value=" url(http://www.blogblog.com/1kt/travel/bg_black_50.png)"/>

<Variable name="widget.outer.background.gradient" description="Sidebar Gradie nt" type="url" default="url(http://www.blogblog.com/1kt/travel/bg_black_50.png)" value=" url(http://www.blogblog.com/1kt/travel/bg_black_50.png)"/> <Variable name="footer.background.gradient" description="Footer Background Gr adient" type="url" default="none" value="none"/> */ /* Content ----------------------------------------------- */ body { font: $(body.font); color: $(body.text.color); background: $(body.background); } html body .region-inner { min-width: 0; max-width: 100%; width: auto; } a:link { text-decoration:none; color: $(link.color); } a:visited { text-decoration:none; color: $(link.visited.color); } a:hover { text-decoration:underline; color: $(link.hover.color); } .content-outer .content-cap-top { height: $(content.imageBorder.top.space); background: transparent $(content.imageBorder.top) repeat-x scroll top center; } .content-outer { margin: 0 auto; padding-top: $(content.margin); } .content-inner { background: $(content.background); background-position: left -$(content.imageBorder.top.space); background-color: $(content.background.color); padding: $(content.padding); } .main-inner .date-outer { margin-bottom: 2em; } /* Header ----------------------------------------------- */

.header-inner .Header .titlewrapper, .header-inner .Header .descriptionwrapper { padding-left: 10px; padding-right: 10px; } .Header h1 { font: $(header.font); color: $(header.text.color); } .Header h1 a { color: $(header.text.color); } .Header .description { font-size: 130%; } /* Tabs ----------------------------------------------- */ .tabs-inner { margin: 1em 0 0; padding: 0; } .tabs-inner .section { margin: 0; } .tabs-inner .widget ul { padding: 0; background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center; } .tabs-inner .widget li { border: none; } .tabs-inner .widget li a { display: inline-block; padding: 1em 1.5em; color: $(tabs.text.color); font: $(tabs.font); } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { position: relative; z-index: 1; background: $(tabs.selected.background.color) $(tabs.selected.background.gradi ent) repeat scroll top center; color: $(tabs.selected.text.color); } /* Headings ----------------------------------------------- */ h2 { font: $(widget.title.font);

color: $(widget.title.text.color); } .main-inner h2.date-header { font: $(date.font); color: $(date.text.color); } .footer-inner .widget h2, .sidebar .widget h2 { padding-bottom: .5em; } /* Main ----------------------------------------------- */ .main-inner { padding: $(content.padding) 0; } .main-inner .column-center-inner { padding: $(content.posts.padding) 0; } .main-inner .column-center-inner .section { margin: 0 $(content.posts.padding); } .main-inner .column-right-inner { margin-left: $(content.padding); } .main-inner .fauxcolumn-right-outer .fauxcolumn-inner { margin-left: $(content.padding); background: $(widget.outer.background.color) $(widget.outer.background.gradien t) repeat scroll top left; } .main-inner .column-left-inner { margin-right: $(content.padding); } .main-inner .fauxcolumn-left-outer .fauxcolumn-inner { margin-right: $(content.padding); background: $(widget.outer.background.color) $(widget.outer.background.gradien t) repeat scroll top left; } .main-inner .column-left-inner, .main-inner .column-right-inner { padding: 15px 0; }

/* Posts ----------------------------------------------- */ h3.post-title { margin-top: 20px; }

h3.post-title a { font: $(post.title.font); color: $(post.title.text.color); } h3.post-title a:hover { text-decoration: underline; } .main-inner .column-center-outer { background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image: none; } .post-body { line-height: 1.4; position: relative; } .post-header { margin: 0 0 1em; line-height: 1.6; } .post-footer { margin: .5em 0; line-height: 1.6; } #blog-pager { font-size: 140%; } #comments { background: $(comments.background); padding: 15px; } #comments .comment-author { padding-top: 1.5em; } #comments h4, #comments .comment-author a, #comments .comment-timestamp a { color: $(post.title.text.color); } #comments .comment-author:first-child { padding-top: 0; border-top: none; } .avatar-image-container { margin: .2em 0 0; }

/* Widgets ----------------------------------------------- */ .sidebar .widget { border-bottom: 2px solid $(widget.border.bevel.color); padding-bottom: 10px; margin: 10px 0; } .sidebar .widget:first-child { margin-top: 0; } .sidebar .widget:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .footer-inner .widget, .sidebar .widget { font: $(widget.font); color: $(widget.text.color); } .sidebar .widget a:link { color: $(widget.link.color); text-decoration: none; } .sidebar .widget a:visited { color: $(widget.link.visited.color); } .sidebar .widget a:hover { color: $(widget.link.color); text-decoration: underline; } .footer-inner .widget a:link { color: $(link.color); text-decoration: none; } .footer-inner .widget a:visited { color: $(link.visited.color); } .footer-inner .widget a:hover { color: $(link.color); text-decoration: underline; } .widget .zippy { color: $(widget.alternate.text.color); } .footer-inner { background: transparent $(footer.background.gradient) repeat scroll top center ;

} /* Mobile ----------------------------------------------- */ body.mobile { padding: 0 10px; background-size: 100% auto; } body.mobile .AdSense { margin: 0 -10px; } .mobile .footer-inner .widget a:link { color: $(widget.link.color); text-decoration: none; } .mobile .footer-inner .widget a:visited { color: $(widget.link.visited.color); } .mobile-post-outer a { color: $(post.title.text.color); } .mobile-link-button { background-color: $(link.color); } .mobile-link-button a:link, .mobile-link-button a:visited { color: $(body.background.color); } .mobile-index-contents { color: $(body.text.color); } ]]></b:skin> <b:template-skin> <b:variable default='930px' name='content.width' type='length' value='860p x'/> <b:variable default='0' name='main.column.left.width' type='length' value= '260px'/> <b:variable default='360px' name='main.column.right.width' type='length' v alue='0px'/> <![CDATA[ body { min-width: $(content.width); } .content-outer, .content-fauxcolumn-outer, .region-inner { min-width: $(content.width); max-width: $(content.width); _width: $(content.width); } .main-inner .columns { padding-left: $(main.column.left.width);

padding-right: $(main.column.right.width); } .main-inner .fauxcolumn-center-outer { left: $(main.column.left.width); right: $(main.column.right.width); /* IE6 does not respect left and right together */ _width: expression(this.parentNode.offsetWidth parseInt("$(main.column.left.width)") parseInt("$(main.column.right.width)") + 'px'); } .main-inner .fauxcolumn-left-outer { width: $(main.column.left.width); } .main-inner .fauxcolumn-right-outer { width: $(main.column.right.width); } .main-inner .column-left-outer { width: $(main.column.left.width); right: 100%; margin-left: -$(main.column.left.width); } .main-inner .column-right-outer { width: $(main.column.right.width); margin-right: -$(main.column.right.width); } #layout { min-width: 0; } #layout .content-outer { min-width: 0; width: 800px; } #layout .region-inner { min-width: 0; width: auto; } ]]> </b:template-skin> </head> <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> <div class='body-fauxcolumns'> <div class='fauxcolumn-outer body-fauxcolumn-outer'> <div class='cap-top'> <div class='cap-left'/> <div class='cap-right'/> </div> <div class='fauxborder-left'> <div class='fauxborder-right'/> <div class='fauxcolumn-inner'> </div> </div>

<div class='cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div> </div> <div class='content'> <div class='content-fauxcolumns'> <div class='fauxcolumn-outer content-fauxcolumn-outer'> <div class='cap-top'> <div class='cap-left'/> <div class='cap-right'/> </div> <div class='fauxborder-left'> <div class='fauxborder-right'/> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div> </div> <div class='content-outer'> <div class='content-cap-top cap-top'> <div class='cap-left'/> <div class='cap-right'/> </div> <div class='fauxborder-left content-fauxborder-left'> <div class='fauxborder-right content-fauxborder-right'/> <div class='content-inner'> <header> <div class='header-outer'> <div class='header-cap-top cap-top'> <div class='cap-left'/> <div class='cap-right'/> </div> <div class='fauxborder-left header-fauxborder-left'> <div class='fauxborder-right header-fauxborder-right'/> <div class='region-inner header-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='it&apos;s Steffi&apos;s diary (Head er)' type='Header'/> </b:section> </div> </div> <div class='header-cap-bottom cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div> </header> <div class='tabs-outer'> <div class='tabs-cap-top cap-top'> <div class='cap-left'/>

<div class='cap-right'/> </div> <div class='fauxborder-left tabs-fauxborder-left'> <div class='fauxborder-right tabs-fauxborder-right'/> <div class='region-inner tabs-inner'> <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/ > <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/> </div> </div> <div class='tabs-cap-bottom cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div> <div class='main-outer'> <div class='main-cap-top cap-top'> <div class='cap-left'/> <div class='cap-right'/> </div> <div class='fauxborder-left main-fauxborder-left'> <div class='fauxborder-right main-fauxborder-right'/> <div class='region-inner main-inner'> <div class='columns fauxcolumns'> <div class='fauxcolumn-outer fauxcolumn-center-outer'> <div class='cap-top'> <div class='cap-left'/> <div class='cap-right'/> </div> <div class='fauxborder-left'> <div class='fauxborder-right'/> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div> <div class='fauxcolumn-outer fauxcolumn-left-outer'> <div class='cap-top'> <div class='cap-left'/> <div class='cap-right'/> </div> <div class='fauxborder-left'> <div class='fauxborder-right'/> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div>

<div class='fauxcolumn-outer fauxcolumn-right-outer'> <div class='cap-top'> <div class='cap-left'/> <div class='cap-right'/> </div> <div class='fauxborder-left'> <div class='fauxborder-right'/> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div> <!-- corrects IE6 width calculation --> <div class='columns-inner'> <div class='column-center-outer'> <div class='column-center-inner'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> </div> <div class='column-left-outer'> <div class='column-left-inner'> <aside> <macro:include id='main-column-left-sections' name='sections'> <macro:param default='0' name='num' value='1'/> <macro:param default='sidebar-left' name='idPrefix'/> <macro:param default='sidebar' name='class'/> <macro:param default='true' name='includeBottom'/> </macro:include> </aside> </div> </div> <div class='column-right-outer'> <div class='column-right-inner'> <aside> <macro:include id='main-column-right-sections' name='sections'> <macro:param default='2' name='num' value='0'/> <macro:param default='sidebar-right' name='idPrefix'/> <macro:param default='sidebar' name='class'/> <macro:param default='true' name='includeBottom'/> </macro:include> </aside> </div> </div> </div> <div style='clear: both'/> <!-- columns --> </div> <!-- main -->

</div> </div> <div class='main-cap-bottom cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div> <footer> <div class='footer-outer'> <div class='footer-cap-top cap-top'> <div class='cap-left'/> <div class='cap-right'/> </div> <div class='fauxborder-left footer-fauxborder-left'> <div class='fauxborder-right footer-fauxborder-right'/> <div class='region-inner footer-inner'> <macro:include id='footer-sections' name='sections'> <macro:param default='2' name='num' value='1'/> <macro:param default='footer' name='idPrefix'/> <macro:param default='foot' name='class'/> <macro:param default='false' name='includeBottom'/> </macro:include> <!-- outside of the include in order to lock Attribution widget --> <b:section class='foot' id='footer-3' showaddelement='no'> <b:widget id='Attribution1' locked='true' title='' type='Attribution'/> </b:section> </div> </div> <div class='footer-cap-bottom cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div> </footer> <!-- content --> </div> </div> <div class='content-cap-bottom cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div> </div> <script type='text/javascript'> window.setTimeout(function() { document.body.className = document.body.className.replace(&#39;loading&# 39;, &#39;&#39;); }, 10); </script> </body> <macro:includable id='sections' var='col'> <macro:if cond='data:col.num == 0'> <macro:else/> <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot; -1&quot;' preferred='yes' showaddelement='yes'/>

<macro:if cond='data:col.num &gt;= 2'> <table border='0' cellpadding='0' cellspacing='0' mexpr:class='&quot;secti on-columns columns-&quot; + data:col.num'> <tbody> <tr> <td class='first columns-cell'> <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-1&quot;'/> </td> <td class='columns-cell'> <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-2&quot;'/> </td> <macro:if cond='data:col.num &gt;= 3'> <td class='columns-cell'> <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-3&quot;'/> </td> </macro:if> <macro:if cond='data:col.num &gt;= 4'> <td class='columns-cell'> <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-4&quot;'/> </td> </macro:if> </tr> </tbody> </table> <macro:if cond='data:col.includeBottom'> <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &q uot;-3&quot;' showaddelement='no'/> </macro:if> </macro:if> </macro:if> </macro:includable> <b:section-contents id='sidebar-left-1'> <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchiv e'/> <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/> <b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'/> </b:section-contents><b:section-contents id='footer-1'/></html>

You might also like