OpenDesigns.org : Open Web Templates for your website!

I found something interesting from StumbleUpon yesterday. An OpenSource website template community!!

The Open Design Community (TODC) is a group of Open Source Website Designers providing free web design templates helping to make the global internet a prettier place.
Our Goal

Our goal is to create a community owned and managed site, where users can share their free website designs and templates, discuss web design, and promote their services.


I browsed through the templates hosted there, and they are all awesome!. Almost all of them are well polished and professional looking and a lot are as high quality as expensive commercial web templates.

While browsing though, this Dark Ritual template caught my attention. I thought it'll look great for my blog. So I downloaded it and hacked it here and there to make it fit for Blogger's Layout engine and the product is, you're looking at it now!! (^-^)

Below is the modified Dark Ritual template for use in Blogger. For the image files , you can search and get it from OpenDesigns.org

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html 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[
/*#############################################################
Name: Dark Ritual
Date: 2006-11-06
Description: Tribal-style three column layout.
Author: Viktor Persson
URL: http://templates.arcsin.se

Feel free to use and modify but please provide credits.
#############################################################*/
/*#############################################################
Changelog
Date: 2007-01-18
Hikaru Amano <http://kagesenshi.blogspot.com>
-> roughly modified template for use in new blogger's layout engine

#############################################################*/


/* standard elements */
* {
margin: 0;
padding: 0;
}


/******************************************************/
.post-body pre {
font-size:small;
border: 2px dashed #cccccc;
background: #ffffff;
max-height:120px;
overflow:auto;
color: #000000;

padding: 2px;
}

textarea, input, select, option, button {
font-family: Tahoma, Verdana, Arial;
background-color : #F3F5F4;
color : #7B9685;
font-size : 10px;
border: 1px solid #B9CAC0;
}
/************************************************************/



a {color: #682;}

a img {border:0;}
a:hover {color: #9A6;}

body {
background: #333 url(img/bg.gif);
color: #333;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
margin: 3% 0;
}

p,ul {
padding-bottom: 1em;
}

ul {margin-left: 1.2em;}

li {list-style: none;}
.main li {list-style-image: url(img/li.gif);}

h1 {font-size: 1.2em;}

blockquote {
background: #FFF;
border-bottom: 1px solid #EEE;
border-top: 1px solid #EEE;
color: #333;
display: block;
font-size: 0.9em;
margin-bottom: 1.2em;
padding: 6px 12px;
}
blockquote p {padding: 3px 0;}

h1,h2,h3 {color: #994;}

/* misc */
.clearer {clear: both;}
.main_right .padded {padding: 6px 2px 6px 16px;}
.main .padded {padding: 7px 10px;}
.meta {font-size: 0.8em; color: #666;}
.left {float: left;}
.right {float: right;}

/* structure */
.container {
font-size: 1.2em;
background: url(img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 840px;
border: 12px solid #222;
}

/* header */
.header {
float: left;
width: 640px;
background: url(img/header.jpg) no-repeat;
font: normal 2.4em Verdana,sans-serif;
height: 150px;
line-height: 100px;
text-align: center;
vertical-align:bottom;
}


.header h1.title {
color:#000000;
}

.header h1 a {
text-decoration:none;
color:#000000;
}

.header .description {
font: normal small Verdana,sans-serif;
}

/* structure */
.top {
background: #222;
color: #DDD;
float: left;
font: normal 1.4em Verdana;
height: 50px;
text-align: center;
width: 639px;
}
.subnav {
float: left;
width: 160px;
color: #CCC;
}
.main {
float: left;
width: 480px;
}

.main .post-title {
font-size: large;
}

.main .date-header {
font-size:small;
}

.main img {
border:1px solid #000000;
padding: 5px;
}

.main .footnav img {
border:0;
padding:0;
}
.main_right {
float: right;
width: 200px;
color: #CCC;
}

/* sub-navigation */

.subnav h1 {
background: #222;
color: #FFE;
font: bold 1.1em Verdana,sans-serif;
line-height: 24px;
padding-left: 8px;
}
.subnav ul {margin: 0; padding: 0;}
.subnav li {
border-bottom: 1px solid #696755;
list-style: none;
}
.subnav li a {
background: #89866F;
color: #111;
display: block;
padding: 8px 0 8px 12px;
width: 148px;
text-decoration: none;
}
.subnav li a:hover {
background: #9C997C;
color: #000;
}


div.widget {
margin: 0 0 15px 0;
}
/* footer */
.footer {
background: url(img/bgfooter.gif) repeat-x;
color: #CCC;
font-size: 0.9em;
line-height: 39px;
width: 100%;
text-align: center;
}
.footer .left,.footer .right {padding: 0 16px;}
.footer a {color: #EEE;}
.footer a:hover {color: #FAFCB0;}


/** Page structure tweaks for layout editor wireframe */
body#layout {
padding:0;
margin:0;

}

body#layout #main_wrap {
width:380px;
}

body#layout #outer-wrapper {
width: 740px;
}

body#layout #header{
width:540px;
height:50px;
}



]]></b:skin>
</head>

<body>
<div class='container' id='outer-wrapper'>

<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='&amp;laquo; Shadow Logs &amp;raquo; (Header)' type='Header'/>
</b:section>

<div class='main_right' id='sidebar_right'>

<b:section class='padded' id='sidebar' preferred='yes'>
<!-- Right sidebar widgets here -->
</b:section>

</div>
<div class='subnav'>
<b:section id='subnav'>
<!-- Left sidebar widgets here -->
</b:section>
</div>

<div class='main' id='main_wrap'>

<b:section class='padded' id='main_section' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<hr id='hrule1'/>
<b:section class='footnav' id='footer'>
</b:section>
</div>

<div class='clearer'><span/></div>

<div class='footer'>
<span class='left'> 2006 <a href='index.html'>Website.com</a>. Valid <a href='http://jigsaw.w3.org/css-validator/check/referer'>CSS</a> &amp; <a href='http://validator.w3.org/check?uri=referer'>XHTML</a></span>

<span class='right'>Template design by <a href='http://templates.arcsin.se'>Arcsin</a>. Hacked for use in Blogger by <a href='http://kagesenshi.blogspot.com'>KageSenshi</a> </span>

<div class='clearer'><span/></div>

</div>

</div>

</body>

</html>

Comments

k4ml said…
thx, you could also look at www.oswd.org and www.openwebdesign.org (fork of oswd) for free web templates.
Anonymous said…
hi, im new in editing this.. can you teach me how to? i try the whole nite.. but i still cant get it rite..sheerz08@hotmail.com

Popular posts from this blog

Tee'ing Python subprocess.Popen output

Announcing PlatoCDP, a Plone distribution for enterprises.

Consolidated community site infrastructure on Plone