首页 > 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. 2010年3月18日22:11 | #1

    写的非常清晰!适合我这样的新手!谢谢

  2. 2010年3月19日17:51 | #2

    谢谢捧场!

  3. 2010年3月21日10:15 | #3

    在style.css文件中,有这两段代码,可以修改body和footer的背景图片
    body {
    background: #d5d6d7 url(‘images/kubrickbgcolor.jpg’);
    }
    #footer {
    background: #e7e7e7 url(‘images/kubrickfooter.jpg’) no-repeat top;
    }
    但下面的两个背景图片,在css中没找到类似代码?怎么回事呢?
    kubrickbg-ltr.jpg kubrickbg-rtl.jpg

  4. 2010年3月22日10:16 | #4

    您说的是,图片没有?
    还是代码没有?

  5. 2010年8月9日09:10 | #5

    博主,你现在使用的是官方3的默认主题吗,貌似不像啊:-)

  6. 2014年3月16日22:07 | #6

    很好,不错

您必须在 登录 后才能发布评论.