UPDATE:
ich habe den code noch einmal überarbeitet.
bis jetzt sieht das theme wie folgt aus:
http://img22.imageshack.us/img22/8826/istgb8.jpg
der code dazu (die wichtigen einträge habe ich markiert):
index.php
<?php get_header(); ?>
[B] [U]<div id="content">[/U][/B]
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- item -->
<div class="item entry" id="post-<?php the_ID(); ?>">
<div class="itemhead">
<img src="http://kaspianshore.com/posticon.png"> <h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="chronodata"><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></div>
</div>
<div class="storycontent">
<?php the_content('Read more »'); ?>
</div>
<!-- <small class="metadata">
<span class="category">Filed under: <?php the_category(', ') ?> <? if(!is_single()) echo "|"; ?> <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('Comment (0)', ' Comment (1)', 'Comments (%)'); ?></span>
<?php if ( function_exists('wp_tag_cloud') ) : ?>
<?php the_tags('<span class="tags">Article tags: ', ', ' , '</span>'); ?>
<?php endif; ?>
</small> -->
</div>
<!-- end item -->
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
<p> </p>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
<!-- end content -->
<!-- 2nd sidebar -->
<!-- end 2nd sidebar -->
</div>
</div>
</div>
<div class="yui-b" id="secondary">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
Alles anzeigen
style.css
/*
Theme Name: Kaspian Shore
*/
body {
background-color: #000000;
}
[I][U][B]#sidebar[/B][/U][/I] {
position: absolute; top: 0px;
left: 50%;
margin-left: -460px;
margin-top:22.5em;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font color= #ffffff; font-weight:bold;
text-decoration: none;
}
h3 a:link, h3 a:hover, h3 a:visited{
color: #655153;
}
.item {
/* padding: 20px; */
margin-bottom: 5em;
}
[U][I][B]div#content[/B][/I][/U]{
width: 470px;
background: url(http://www.kaspianshore.com/post.png) top left repeat-y;
padding: 80px 80px 30px 30px;
text-align:left;
font-family: Verdana, Arial, Helvetica, sans-serif, sans-serif; font-size: 14px; /* padding: 20px; margin: 0px; */ color:#ffffff;
position: absolute; top: 0px;
left: 50%;
margin-left: -200px;
margin-top:22em;
}
#nav {
position: absolute; top: 0px;
left: 50%;
margin-left: -480px;
}
a, a:link {
padding: 2px;
color: #655153;
text-decoration: none;
}
a:hover {
color: #ffffff;
text-decoration: none;
;
}
h1 {
font-family: monospace;
/*font-weight: bold;*/
font-size: 190%;
padding-top: .1em;
padding-bottom: .5em;
}
h2 {
font-family: Arial;
font-weight: bold;
font-color: #ffffff
font-size: 170%;
}
h4 {
font-size: 140%;
font-color: #ffffff
}
#hd{
text-align: center;
padding-top: 24px;
padding-bottom: 24px
}
#hd h1{
font-size: 290%;
color: #000000;
}
#hd h1 a{
text-decoration: none;
color: #ffffff;
}
.itemhead{
padding-top: 5px;
padding-bottom: 5px;
/*margin:0 0 20px 0; dieser Wert */
background: url(http://kaspianshore.com/postline.png) bottom left no-repeat;
margin-bottom: 20px;
padding-bottom: 20px;
}
.itemhead h3{
display: inline;
}
input{
font-size: 80%;
}
.commentlist p {
clear: both;
font-size: 95%;
}
cite{
font-size: 95%;
}
blockquote {
margin: 15px 30px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}
blockquote cite {
margin: 5px 0 0;
display: block;
}
.commentmetadata {
font-size: 80%;
float: right;
}
.commentlist {
margin-top: 5px;
}
.commentlist li {
padding: 2px;
border-top: 1px solid #FFFFFF;
}
#ft {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
color: #000000;
}
#ft a:link, #ft a:hover, #ft a:visited{
color: #000000;
}
Alles anzeigen
header.php
<!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" <?php
if(function_exists('language_attributes')) {
language_attributes();
}else{
echo "<h1>Oops:</h1><font color=\"red\">This theme only works with WordPress 2.1.* or higher. You seem to have an <b>outdated version</b> of wordpress. Please download the latest <a href=\"http://www.wordpress.com\">WordPress</a> to use this theme and also get the latest security patches.</font>";
// exit();
}
?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/reset-fonts-grids-tabs.css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="doc3" class="yui-t7">
<!-- -->
[U][I][B]<div id="nav"> [/B][/I][/U]
<img src="http://kaspianshore.com/nav.jpg" alt="" border="0" width="" height="" usemap="#menu">
<map name="menu">
<area shape="rect" coords="55,177,231,246"
href="http://www.kaspianshore.com/"
alt="Home"
title="Home"
<area shape="rect" coords="235,267,297,308"
href="http://www.kaspianshore.com/about/"
alt="About"
title="About"
<area shape="rect" coords="312,267,408,308"
href="http://www.kaspianshore.com/gallery"
alt="Portfolio"
title="Portfolio"
<area shape="rect" coords="422,267,469,308"
href="http://www.kaspianshore.com/"
alt="Blog"
title="Blog"
<area shape="rect" coords="491,267,585,308"
href="http://www.kaspianshore.com/purchase"
alt="Purchase"
title="Purchase"
<area shape="rect" coords="595,267,674,308"
href="http://www.kaspianshore.com/contact"
alt="Contact"
title="Contact"
<area shape="rect" coords="863,331,911,341"
href="http://www.twitter.com/kaspianshore"
alt="Twitter"
title="Twitter"
>
<area shape="rect" coords="878,345,938,362"
href="http://kaspianshore.com/feed"
alt="RSS Feed"
title="RSS Feed"
>
</map>
</div>
</div>
Alles anzeigen
jetzt brauche ich nur noch einen weißen hintergrund. bisher ist es mir aber nicht gelungen, die <div id="content"> so zu verschachteln, dass dort, wo die header grafik aufhört, der hintergrund weiß ist.
vielleicht liegt es an den verschiednen divs, die sich gegenseitig beeinflussen?
