Creating a Graffiti Theme from Scratch
Kevin Tunis 1/4/2008 2:34:00 PMThis the second in a series for Graffiti CMS (graffiticms.com); after migrating my blog from Community Server to Graffiti CMS, I decided to create a theme from scratch instead of using the ones that are available or converting a WordPress theme. I thought I would start by going over to Visual Studio and create the theme there so I can get the look I wanted. My general idea is that I want both the left and right side bar on the left side of my content so I can take advantage of Graffiti’s widgets. I have managed to do this with one of the prepackaged themes that came with Graffiti – so I kind of got an idea of how to do that. First I just wanted to show the title and make it a link back for home – here is the basic idea http://www.screencast.com/t/a1Wj8bii . Now here is where I ran into some issues with CSS, when copied the html I had to make some changes. Below are the style.css page and the view layout.view page that Graffiti uses. When using the html the page looks like I want it with the title position but in the layout.view page, the title is not in the location I wanted; it is in the top left and it seem that no matter what changes I make it does not affect the title. I have emailed this to Graffiti-Beta@Telligent.com and I am moving this over to the forums http://support.graffiticms.com/p/104/305.aspx#305 I will keep you updated here. I’m sure this is something simple and the guys at Teligent can help me get my thoughts around this.
Style.css
body
{
margin: 0px;
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: normal;
color: #FFFFFF;
}
#header
{
margin: 0px;
height: 150px;
}
#logo
{
margin: 40px 50px 10px 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color: #FFFFFF;
}
Layout.view
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>$title</title>
$macros.Style("style.css","screen")
$macros.Head()
</head>
<body>
<div id="header">
<div id="logo">
<a href="$urls.Home" title="$data.Site.Title">$data.Site.Title</a>
</div>
</div>
</body>
</html>
