细目

个性化留言(http://www.tamba2.org.uk/wordpress/graphicalcss/comments/index.html)

改变字体及大小
在你的css里找到这些代码：
ol#comments li p {
font-size: 100%;
}
在其中加入：
font-family: Tahoma;

加入边框
在css里加入下面的代码：
ol#commentlist li {
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
border-top: solid 1px #ff0000;
border-bottom: solid 1px #ff0000;
margin: 10px;
}
注意，上面的代码中没有用'p'来定义，如果这样的话，别人留言里只要打回车，就会以为是一条留言，然后就自动加上一个边框，这样一条留言会被分成好几条。
给留言框加上颜色或图片
在上面的代码中加入这一行：
ol#commentlist li {
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
border-top: solid 1px #ff0000;
border-bottom: solid 1px #ff0000;
margin: 10px;
background-image: url('image.gif');
}
注意，图片必须放在wp的根目录下。
如果你只是想加背景色，只要加上这一行代码：
ol#commentlist li {
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
border-top: solid 1px #ff0000;
border-bottom: solid 1px #ff0000;
margin: 10px;
background-colour: #0000ff;
}
修改“留言人”的样式
在你的wp-comments-popup.php或wp-comments.php中找到下面的代码：
<?php comment_text() ?>
<p><cite><?php comment_type(); ?> by <?php comment_author_link() ?> &#8212; <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite></p>
</li>
在cite后加上1，两个都要加：
<?php comment_text() ?>
<p><cite1><?php comment_type(); ?> by <?php comment_author_link() ?> &#8212; <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite1></p>
</li>
然后在你的css里加上下面的代码：
cite1 {
font-size: 90%;
font-style: normal;
background-color: #fff;
}
我们必须这样做，因为cite元素还在其它地方起作用，而我们只是要修改留言面。
修改页面的背景
在css里有这样的还没定义的div：
#commentspopup {
background-image: url('image.gif');
}
你也可以这样修改：
#commentspopup {
background-color: #ff00ff;
}
留言链接
默认下，下面的代码控制留言链接：
p, li, .feedback {
font: 90%/175% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: -1px;
}
把它修改为如下代码：
feedback {
font: 90%/175% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: -1px;
}
你可以改变留言链接的样式：
feedback a {
color: #00ff00;
}

.feedback a:hover {
color: #ffff00;
}

其它修改：
你还可以修改留言框里其它部分的颜色：
#commentform #author {
border: 1px dotted #000;
background: #ff0033;
padding: .2em;
}

#commentform #email {
border: 2px solid #000;
background: #ff6633;
padding: .3em;
}

#commentform #url {
border: 3px dotted #000;
background: #ff9933;
padding: .4em;
}

#commentform textarea {
width: 100%;
background: #ffff33;
}
效果如下：

你还可以修改提交框，在css里加入下面的代码：
.button {
repeat: no-repeat;
margin-bottom: -5px;
}
然后在wp-comments.php或wp-comments-popup.php里把：
<input name="submit" type="submit" tabindex="5" value="<?php _e("Say It!"); ?>" />
改成：
<input type="image" src="bug.gif" name="submit" alt="Submit" class="button" />

the rap div & images(http://www.tamba2.org.uk/wordpress/graphicalcss/rap/index.html)

默认页面是这样的：

注意index.php里的这行代码：
<div id="rap">
在默认状态下，rap标签没有被定义内容。我们要做的就是定义内容，包装我们的页面。
先在wp-layout.css添加下面的代码：
#rap {
margin: 0px 100px 0px 100px;
border: solid #000 1px;
background: white;
}
上面的代码说明页面没有上下边界，左右边界为100px,，边框是黑色实线，背景色是白色。
但菜单部分并没有改变，在css里找到下面的代码：
#menu {
background: #fff;
border-left: 1px dotted #ccc;
border-top: solid 3px #e0e6e0;
padding: 20px 0 10px 30px;
position: absolute;
right: 2px;
top: 0px;
width: 11em;
}

捣乱的是下面2行代码：
right: 2px;
top: 0px;
修改这2个数值来适应整个页面。
下面就是修改后的效果：

然后你需要加入背景颜色。
如果你觉得菜单的上边框是个麻烦的话，修改下面的代码：
border-top: solid 3px #e0e6e0;
把值改小或全部删掉。
图片
下面来看看怎么给页面插入背景图片
在wp-layout.css里找到#body标签：
body {
border: solid 2px #565;
border-bottom: solid 1px #565;
border-top: solid 3px #565;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: white;
color: black;
}
删掉背景颜色那行，加入下面的代码：
background-image: url('background.gif');
把图片放在你的css相同的目录下，头部图片也如此。
还有background-repeat:的选项，控制图片是水平还是垂直还是不重复。
如果你的图片很大，你要设定图片是适应页面还是滚动。通过下面的代码来控制：
background-attachment

把菜单移动到左边(http://www.tamba2.org.uk/wordpress/graphicalcss/moveleft/index.html)

移动菜单
在wp-layout.css里的代码是：
#menu {
background: #fff;
border-left: 1px dotted #ccc;
border-top: solid 3px #e0e6e0;
padding: 20px 0 10px 30px;
position: absolute;
right: 2px;
top: 0;
width: 11em;
}

把right改成left,菜单就移动到左边了。但把一部分标题和正文覆盖了。

移动头部
先移动blog标题。严格的说我们不是移动头部，而只是它的一部分。
在css里找到下面的代码：
#header {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% 'Times New Roman', Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}
我们要改的只是最后一行。把60改成260，现在标题全部都能看见了。

修改正文部分：
找到下面的代码：
#content {
margin: 30px 13em 0 3em;
padding-right: 60px;
}
em指你使用的字体中M的大小。
把左右边界的值换一下，现在正文被覆盖的部分也全部显示出来了。

链接(http://www.tamba2.org.uk/wordpress/graphicalcss/links/index.html)
在wp-layout.css的顶部是控制链接的代码：
a {
color: #675;
}
a img {
border: none;
}
a:visited {
color: #342;
}
a:hover {
color: #9a8;
}
img行指当用图片作为链接时不要边框。

让我们创建一个叫green的类，修改上面的代码为：
a.green {
color: #00ff00;
}
a.green:visited {
color: #669933;
}
a.green:hover {
color: #669933;
}
然后把这些代码复制回wp-layout.css的任何地方，当然最好是靠近链接的地方。
链接的代码通常是：
<a href="http://www.wordpress.org">WordPress</a>
然后我们加入class，就可以改变这个链接的颜色了：
<a class="green" href="http://www.wordpress.org">WordPress</a>
你还可以创建其它的类来改变颜色，只要起不同的类名就行了。
注意，这里只是讲的正文区里的链接。

图片对齐与阴影(http://www.tamba2.org.uk/wordpress/graphicalcss/align/index.html}

我们插入的图片默认是靠左的，下面来看看如何修改：

1.移动到中间

在你的css里加入下面的代码：

div.cent {
text-align: center;
}
虽然是'text-align'，但对图片也有效。然后如果你想把图片居中的话，加入下面的代码：
<div class="cent">
Everything here will be centred
</div>

然后你需要一些代码和图片，你可以到这个网站去找：http://weblogtoolscollection.com/archives/2004/03/24/wordpress-javascript-quicktags/

2.文字在右边环绕图片
先在css里加入下面的代码：
div.clearer {
clear: left;
line-height: 0;
height: 0;
}
然后在你插入的最后一张图片，但是在文字结束之前，加入下面的代码：
<div class="clearer"> &nbsp; </div>

3.文字在左边环绕图片
把下面的代码复制到你的css中：
.img-shadow1 {
clear: both;
float:right;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 20px 0 0 17px !important;
margin: 20px 0 0 8px;
}
.img-shadow1 img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

底部(http://www.tamba2.org.uk/wordpress/graphicalcss/footer/index.html)

在index.php里找到关于底部的代码：
</div>
</div>
<p class="credit"><!--<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. --> <cite><?php echo sprintf(__("Powered by <a href='http://wordpress.org' title='%s'><strong>WordPress</strong></a>"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform")); ?></cite></p>
</body>
</html>
移动其中1个[/div]到代码的下面：
</div>
<p class="credit"><!--<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. --> <cite><?php echo sprintf(__("Powered by <a href='http://wordpress.org' title='%s'><strong>WordPress</strong></a>"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform")); ?></cite></p>
</div>
</body>
</html>

1.例子的代码是：
credit {
background: #90a090;
border-top: double 3px #aba;
color: #fff;
font-size: 11px;
margin: 10px 0 0 0;
padding: 3px;
text-align: center;
}
可以修改背景颜色，边框样式和颜色，与正文的距离，填充，对齐方式。
你可以在上面的代码里加入width:来控制底部的宽度。
2.上面的代码还可以控制字体大小颜色，如果你要添加别的链接，就需要在index.php里编辑。
3.例子中的wordpress链接由css里的如下代码控制：
.credit cite a {
color: #00ff00;
}
.credit cite a:hover {
color: #ffff00;
}
如果你想显示你创建和美化你的blog的时间，加入下面的代码：
<p class="credit"><?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. <cite><?php echo sprintf(__("Powered by <a href='http://wordpress.org' title='%s'><strong>WordPress</strong></a>"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform.")); ?></cite></p>

菜单(http://www.tamba2.org.uk/wordpress/graphicalcss/menu/index.html)

菜单由以下代码控制：

#menu {
background: #fff;
border-left: 1px dotted #ccc;
border-top: solid 3px #e0e6e0;
padding: 20px 0 10px 30px;
position: absolute;
right: 2px;
top: 0;
width: 11em;
}
包括背景颜色，
边框：实线是solid，虚线是dotted，
填充：方向是上右下左，指菜单的四周与菜单文字之间的距离，
右：指菜单与屏幕右边的距离，
上：指菜单与屏幕顶部的距离，如果你想降低菜单的位置，增加上的数值，
如果你想把菜单放到左边，只要把右改成左，但你同时也必须修改头和正文的div.

1.链接标题
代码：#menu ul li {
font: italic normal 110% 'Times New Roman', Times, serif;
letter-spacing: 0.1em;
margin-top: 10px;
padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
}
修改字体和间距，也可以通过color来修改颜色。
链接本身可以通过下面的代码来控制：
#menu ul ul li {
border: 0;
font: normal normal 70%/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: 0;
margin-top: 0;
padding: 0;
padding-left: 12px;
}
#menu ul ul li a {
color: #000;
text-decoration: none;
}
#menu ul ul li a:hover {
border-bottom: 1px solid #809080;
}
2.目录
如果你想显示每个目录下的帖子数目，修改index.php里的这些代码：
<li id="categories">Categories:
<ul><?php list_cats(0, 'All', 'name', 'asc', '',1,0,1,1); ?></ul>
</li>
如果你想使目录以下拉菜单显示，在index.php里加入这些代码：
<form action="<?php echo $PHP_SELF ?>" method="get">
<?php dropdown_cats(); ?>
<input type="submit" name="submit" value="view" />
</form>
3.搜索框
首先，怎样只使搜索框只显示一行？
只要在wp-layout.css里加入这些代码：
form.searchform {display: inline;}
然后编辑index.php，
<form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" name="submit" value="<?php _e('Go!'); ?>" />
</div>
删掉<br /> ，这样就行了。
注意，search改成了go,你也可以改成其它的。
改变搜索框的颜色
在你的css里加入这些代码：
#menu li form input{
background-color: #ffff00;
}
改变搜索按钮的颜色
在你的css里加入这些代码：
#menu li form input.purple{
background-color: #ff00ff;
}
以及在index.php里找到下面的代码：
<form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input class="purple" type="submit" name="submit" value="<?php _e('Go!'); ?>" />
</div>
修改class后面的颜色就行了。
下面修改搜索按钮的字体颜色，在你的css里加入这些代码：
#menu li form input.purple{
background-color: #ff00ff;
font-size: 10px;
font-weight: bold;
color: #fff;
}
还可以使搜索按钮变成图片
首先选取一张20px的正方的透明gif，然后在你的css里加入下面的代码：
.button {
repeat: no-repeat;
margin-bottom: -5px;
}
注意，现在还没有找到如何使图片与搜索框对齐的方法。
然后，修改index.php
<li id="search">
<label for="s">Search:</label>
<form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
<div>
<input type="text" name="s" id="s" size="15" />
<input type="image" src="pix/button.gif" name="search" alt="Search" class="button" />
</div>
</form>
</li>
注意，scr=之后是图片的路径。
4.档案
要使档案显示为下拉菜单，修改index.php里的这些代码：
<li id="archives">Archives:
<form name="archiveform" action="">
<select name="archive_chrono" onchange="window.location = (document.forms.archiveform.archive_chrono[document.forms.archiveform.archive_chrono.selectedIndex].value);">
<option value=''>By Month</option>
<?php get_archives('monthly','','option', 1); ?>
</select>
</form>
</li>
5.日历
要修改星期几的颜色，只要在下面的代码中插入color：
#wp-calendar th {
font-style: normal;
text-transform: capitalize;
color: #ff0000;
}
要改变日期，可以在这些代码里修改：
#wp-calendar td {
color: #ccc;
font: normal 12px 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: normal;
padding: 2px 0;
text-align: center;
}
在下面的代码修改你发帖子的日期的字体及高亮框：
#wp-calendar a:hover {
background: #e0e6e0;
color: #333;
}
第一行是高亮框，第二行是日期。
日历四周的边框颜色由下面的代码控制：
#wp-calendar {
border: 1px solid #ddd;
empty-cells: show;
font-size: 14px;
margin: 0;
width: 90%;
}
6.登录注册框
如果你不想让访问者看到它们，在index.php里删掉相关的代码。

帖子内容(http://www.tamba2.org.uk/wordpress/graphicalcss/content/index.html)

1.顶部空白

2.日期
这根据下面的代码来确定样式：
h2 {
border-bottom: 1px dotted #ccc;
font: 80% "Times New Roman", Times, serif;
letter-spacing: 0.2em;
margin: 15px 0 2px 0;
padding-bottom: 2px;
}
你可以删去“border-bottom”行来不显示下划线。
如果你想加大不是同一天的帖子之间的距离，增加margin的数值。
你也可以修改字体。
h2标签在默认状态下只被用来显示日期。如果你想让日期显示的右边，只要添加“text-align: right;”的代码。
3.帖子标题
有3个CSS元素可以影响它：
h3 {
border-bottom: dotted 1px #eee;
font-family: "Times New Roman", Times, serif;
margin-top: 0;
}

.storytitle {
margin: 0;
}

.storytitle a {
text-decoration: none;
}
首先，border-bottom会划出一条线条，margin-top可以阻止浏览器自动在帖子标题和它之上的东西加上空白。
第二，帖子代码，margin:0表示没有任何空白，text-decoration:none表示如果标题成为一个链接，鼠标放上去也不会出现下划线。
你可以改变标题的颜色，通过添加color代码。

4.帖子内容
这由meta div来控制。
.meta {
font-size: .75em;
}.meta, .meta a {
color: #808080;
font-weight: normal;
letter-spacing: 0;
}

.meta ul {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}

.meta li {
display: inline;
}
看上去有点复杂，从上往下的意思是：
字体大小，字体颜色，字体重量。
下面两部分指，因为帖子可能用列表显示出来，这样可以排成一直线来显示。

5.blockquote援引框
图中的援引框的代码是这样的：
blockquote {
border-left: 5px solid #ccc;
margin-left: 1.5em;
padding-left: 5px;
}
你也可以用border:来同时定义四个边框。
6.入口文字
在CSS中的代码是：
p, li, .feedback {
font: 90%/175% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: -1px;
}
90%代表字体大小，175%代表字间距，后面是字体。
想改变颜色，在后面增加color:
如果你想改变背景颜色，应当在content时加上color:
7.排序
你可以通过修改list-style: 来改变序号的样式。
ol li {
list-style-image: url('bug.gif');
}
你也可以用图片来排序。