Ken,
I had already created an HTML file with the theme as I
wanted it. I ran into some behavior issue when I brought it over to the CSS and
view files in Graffiti
I wanted to try this in live mode as I feel that other users
are likely to do just that. Besides converting a theme I know also that some
are not going to want some of the themes available today and will probably go
from scratch. I have been trying both IE 7 and Firefox -haven't tried any of
the others yet.
Let me update you and others to what I have so far. I have
managed to get the margins where I want them. I have figured out the menu and
how I want it to show up. I will include the code for the style.view and the
layout.view below. My hopes are that when I am through here I can share the
theme in XML as a basic theme without background images - let you add what you
want.
Kind of thinking out loud here, in the add widgets area,
what would happen if instead of two columns there were three plus a top and
bottom box and if in the widgets your post were a widget too, this way when a
user went to a site and wanted the post on the left, it could be dragged and
dropped just like the other widgets and then the user could put twitter widget
in the center and the tag widget in the right as an example.
I am currently working on how the code works for the post
from what I see so far in most of the themes that came with the beta is after
the navigation there is this code;
<div id="content_box">
<div id="content">
$childContent
</div>
<div id="sidebar">
$childContent calling the file index.view which than
calls the post.view. I did not include the div close above as the next called
is the sidebar which I will get into later. My thoughts here are to wrap the
post and to the left side of the post the leftsidebar and the rightsidebar.
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;
background-position: left top;
background-image: url( 'Images/header.png' );
background-repeat: repeat-x;
height: 150px;
top: 0px;
}
#logo
{
margin: 40px 50px 10px 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color: #FFFFFF;
position: absolute;
}
#logo a
{
display: block;
text-decoration: none;
font-size: x-large;
color: #FFFFFF;
}
#menu
{
background-image: url( 'images/navbar.png' );
background-repeat: repeat-x;
height: 30px;
}
#menu ul
{
list-style-type: none;
margin: 0px 50px 0px 50px;
padding-top: 5px;
}
#menu li {
display: inline;
}
#menu ul li
{
font-size: 18px;
float: left;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
color: #FFFFFF;
}
#menu a {
display: block;
text-decoration: none;
font-size: 18px;
color: #FFFFFF;
}
#menu a:hover {
border: thin solid #3d3d3d;
padding-right: 5px;
padding-left: 5px;
}
#menu .selectedli a {
border: thin solid #3d3d3d;
background: #808080 left bottom;
background-image: url( 'images/Button.png' );
background-repeat: repeat-x;
height: 22px;
padding-right: 5px;
padding-left: 5px;
}
#container
{
margin-right: 50px;
margin-left: 50px;
background-image: url('Images/content.png' );
background-repeat: repeat-x;
height: 250px;
background-color: #474747;
}
#content
{
margin: 10px;
float: left;
width: 400px;
}
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 class="header">
<div id="logo">
<a href="$urls.Home" title="$data.Site.Title">$data.Site.Title</a>
</div>
</div>
<div id="menu">
<ul>
$macros.NavBar()
<li></li>
</ul>
</div>
<div id="container">
<div id="content">$post</div>
</div>
</body>
</html>