首页 > wordpress > 修改wordpress默认主题宽版加导航

修改wordpress默认主题宽版加导航

2010年1月29日 eric 发表评论 阅读评论

自从blog开放以来一直在修改wordpress的默认主题,很多人问我为什么用默认主题,我的回答都是我很喜欢这款`主题没办法,个人喜好问题,改来改去改的很痛苦,因为本人对 CSS 不懂,改的很吃力,网上也有宽屏版的默认主题,大家可以去下,我是手动改的。

一.修改CSS,改为宽屏版:

1. 把图下到windows 下,把图用photoshop修改都加宽到960象素。

kubrickbg-ltr.jpg    kubrickbg-rtl.jpg   kubrickfooter.jpg  kubrickheader.jpg

2. 修改style.css

下面是我修改的 style.css

点击上面的style.css 下载

二.给文章页面加边栏。

1.修改 single.php 在底部加入

<?php get_sidebar(); ?>

2.修改 single.php 用首页的类

把 <div id=”content” class=”widecolumn” role=”main”>

改为

<div id=”content”  class=”narrowcolumn” role=”main”>

三,给默认主题,加横向 导航栏.

1.修改 style.css

如果你下载我的 style.css 的话,就可以略过这一步

在最下面加入

#navBar a{
        color: #FFFFFF;
        font-size: 15px;
        text-decoration: none;
}
#navBar{
        margin-left:27px;
        padding:0px;
}
#innerNavBar{
        margin-left:0px;
        margin-right:0px;
        padding: 10px 10px 0px 10px;

}

.userdir{
        color:#cf0;
        float:left;
        width:100%;
        vertical-align:bottom;
}
.userdir a{
        color:#fff;
}

2.然后修改 header.ph 加入导航:

把 <div id=”header” role=”banner”>
        <div id=”headerimg”>
                <h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
                <div><?php bloginfo(‘description’); ?></div>
        </div>
</div>

<hr />

改为:

<div id=”header” role=”banner”>
        <div id=”headerimg”>
                <h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
                <div><?php bloginfo(‘description’); ?></div>
        </div>
        <div id=”navBar”>
        <div id=”innerNavBar”>
        <div>
        <a href=”/”>home</a>
        | <a href=”/linux/category/linux”>linux</a>
        | <a href=”/linux/category/ubuntu”>ubuntu</a>
        | <a href=”/linux/category/xen”>xen</a>
        | <a href=”/linux/category/dns”>dns</a>
        | <a href=”/linux/category/iptabes”>iptables</a>
</div>
</div>
</div>

</div>
<hr />

然后就成我现在 这样了“

喜欢默认主题的朋友如果有兴趣,修改下吧!!

转载请注明:文章转载自:Eric's linux and nginx! (http://www.nginxs.com)
本文地址:http://www.nginxs.com/linux/53.html

分类: wordpress 标签: , ,
评论分页
1 ... 3 53
订阅评论
0+8= (必填)