Skip to main content

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>
2 comments

Popular posts from this blog

Consolidated community site infrastructure on Plone

In Inigo, we believe in helping out local FOSS communities and help them grow. We help out in community events where we can, present FOSS talks, and provide some platforms for local communities to grow. One of such platform is our consolidated community site infrastructure on Plone.

The system/infra and its components was originally developed for the Fedora Malaysia website, while keeping in mind to keep it generic enough so that other communities could use the same components for their own community sites. The infra is already at a usable state, and we can add new sites easily with just a few clicks.

Features in this consolidated infra are:
Document/Content management (Plone built-in)Calendar system (powered by solgema.fullcalendar addon)Conference/BarCamp system (powered by collective.conference addon, which was developed for FUDCon Kuala Lumpur 2012)Blog (powered by Products.Scrawl)Simple yet powerful theming engine (powered by plone.app.theming/ Diazo) - Check out Diazo, you'l…

HOWTO: Mirroring Yum repositories using Yum-Utils

As promised before in one of my previous post, a Howto on how to mirror and manage yum repositories using some of the utilities in yum-utils.

The first step is, well, of course, is to get yum-utils from fedora repository
yum install yum-utils

Reposync
Reposync is a utility for mirroring and synchronizing local copy of a yum/rpmmetadata repository.

This utility is very useful if you wanted to make a yum repository mirror. Before this, I used "wget -R -np -N" but this method is a little bit tedious and it doesnt work with repos that didn't use directory listing. Plus, it also download together additional site stuff that I don't need/want and it doesn't verify checksum of the downloaded packages.

Mirroring a repo using this utility is easy, just execute this command
reposync -r <repoid> -a <arch> -n
and the repo will be mirrored in a folder with the same name of the repoid in the directory you executed the command. Eg: you executed the command in /mnt/storage/mi…

Adding simple popup to Plone frontpage

Here is a little guide for those who want to add a simple popup to the Plone frontpage for some purpose (eg: announcements, advertisements, etc).

Create a basic html file containing the content you want to appear in the popup. Upload it into $PLONE_SITE/portal_skins/custom (as Page Template) and for the sake of this example, name it popup.html

Afterward, create a Javascript file with your Pop-Up loader script. For example , this script:


function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=220,height=400,scrollbars=no');
return false;
};

popup('popup.html', 'My Popup');


Also upload this file into $PLONE_SITE/portal_skins/custom (as Page Template too). For this example, name it as popup.js

Afterward, in $PLONE_SITE/portal_javascripts , add popup.js as a new script into portal_javascripts…