• inove主题链接两列显示方法

    之前我已经对inove主题sidebar(侧边栏)上面的链接显示做了修改,可以让链接分两列显示,但是之前用的那个方法里面用的是id,这样的话,如果sidebar想要有多个分开的链接目录(比如你的链接有3个分类),那么这样就是错误的,因为一个页面只能有一个ID(需要注意的是,我已经对inove的主题的sidebar做了比较大的修改,原来的sidebar有4个widget,我已经修改为了2个,而且链接和分类目录已经不是左右并列显示了)。

    开始想的比较简单,直接把ID改成class,然后style.css再把“#”换成“. ”就行了,不过这很快就被验证是不行的,因为原来的那个CSS里面嵌套的DIV UL比较乱,写的很不规范,那就自己动手改规范吧。

    我的sidebar显示有两个链接分类,还有一个组织活动(这个没有加到链接里面,是我在sidebar里面直接写代码的)。

    代码来了。

    <div class="widget"><!– 第一个链接目录–>
    	<h3>网址</h3>
    	<ul class="links">
    		<?php wp_list_bookmarks('title_li=&categorize=0&category=2&orderby=name&limit=20′); ?></ul>
    	<div class="fixed"></div>
    </div >
    
    <div class="widget"> <!– 第二个链接目录–>
    	<h3>友情链接(随机排序)</h3>
    	<ul class="links">
    		<?php wp_list_bookmarks('title_li=&categorize=0&category=12&orderby=rand&limit=30′); ?>
    	</ul>
    	<div class="fixed"></div>
    </div >
    
    <!–组织活动的 直接写的HTML代码 –>
    <div class="widget" id="organizations">
    	<h3>组织活动</h3>
    	<ul class="links">
    		<li><a id="wpg"href="http://www.wpg.im/" target="_blank" title="WPG中文博客群组">WPG中文博客群组</a></li>
    		<li><a id="wpg_lucky"href="http://wpg.im/lucky" target="_blank" title="左邻右舍">I feel lucky!</a></li>
    		<li><a id="chinablogs" href="http://www.chinablogs.org" target="_blank" title="中国博客联盟 汇聚天下博主,展示精彩博客!">中国博客联盟</a></li>
    	</ul>
    	<div class="fixed"></div>
    </div>
    

    P:默认的inove里面,UL标签里面是没有加那个class=”links”的,这也就是我实现两列显示的关键,所以如果你的sidebar结构跟我类似的话,那么给里面的UL加上class=”links”,然后再给CSS加上下面的代码应该就OK了。

    CSS代码我就加了一句

    .links li {float:left;width:40%}
    

    P:这里可能有朋友要问为何width不是50%了,因为我试验的时候50%达不到要求的效果,这应该是原来sidebar里面写的这句#sidebar li{padding-left:22px;}导致的。

    最后,要记得清除浮动,不然就可能导致显示效果换乱了,如果发现你的<ul>代码。。。</ul>后面没有<div class=”fiexd”></div> ,那么就加上吧。

    ————————————————————————–

    WP相关知识扫盲:

    wp_list_bookmarks() 是WP里面一个用来显示友情链接的函数,具体用法可以参考这个博友的文章 http://www.slyar.com/blog/wp-list-bookmarks.html

  • 细节 我们可以关注更多一些

    细节决定成败,我觉得很有道理,我也不准备在这个问题上多说什么,只是拿这句话用用而已。

    我的主题一直就是mg12的iNove,从开始用到现在几乎是每个能改的地方我都改了,有的朋友问我要我的改装版,不是我不愿给(我曾经给过一些朋友的),是因为很多改动的地方我自己都不记得了,更是因为许多地方我把那些动态的函数换成了静态的HTML代码,删删减减,如果你不是太懂网页,直接拿去用恐怕是很难的。

    下面是我的一些细节的改动

    1、导航栏首页链接及图标。

    我的首页链接在导航栏上和banner上都是可以点击的,但是导航栏上的首页链接由于写的不规范,在IE6上好像无法点击(其实我很早就知道了,只是很懒没有改,嘿嘿),昨天跟XL闲聊的时候提到了这个,还是改了吧。

    导航栏上首页链接HTML代码及CSS代码。

    首页链接图片

    HTML代码

    <div id=”homepage”>
      <a id=”homeico” title=”首页” href=”http://www.zenoven.com“>首页</a>
     </div>

    CSS代码

    #homepage {
     width:50px;
     height:50px;
     float:left;
    }
    a#homeico  {
     display:block;
     background:url(img/home.jpg);
     width:50px;
     height:50px;
     margin:0;
     text-indent:-999em;
    }

    2、网页底部pagenavi(分页插件)的设置

    这个其实很简单,我说的是尽量不要分页太多,我之前设置的是分10页,一直也没注意,后来偶尔浏览的时候发现如果点击到第十多页,由于一行显示不完所有的页码,他就会换行显示,很难看的,像下面这样。

    把页数设置好就没有这个问题了。比如我的设置了分7页。

    另外我发现分页的设置对SEO也是有影响的,因为我在某个搜索引擎上site的时候发现了很多分页,这个好像就不是很好了吧?

    当然我也还有很多问题未解决,比如我的RSS在Google Reader等订阅上面显示的时候完全没有格式,图片不显示,虽不是乱码,但是却像乱码一样难看,不知道各位知道怎么解决吗?

  • 修改iNove主题默认导航菜单 同时显示分类目录和页面

    iNove主题默认的导航菜单好看是好看,但是感觉用的人实在太多,而且我想要同时显示分类目录和页面,这在原来的设置下是没法实现的,只能改代码了。

    原来的inove/templates/header里是设置默认只显示页面或是显示分类,我要的是都显示,开始想把判断语句去掉,只剩两个函数wp_list_pages 和wp_list_categories 。这样试过后发现显示会有错位,另外IE下和FireFox下效果也不一样,只能再重新修改了。

    下面是inove/templates/header里面我现在的导航栏的代码(搜索框还没修改好,暂时未加上)

    <!– navigation START –>
    <div id=”navigation”>
     <div id=”homepage”>
      <a title=”首页” href=”http://www.zenoven.com”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/img/home.jpg” alt=”首页” height=”50″ width=”50″></img></a>
     </div>
     <div id=”navs”>
      <div id=”navigation_wp_list_categories”>
       <!– menus START –>
       <ul id=”menus”>
        <?php
          wp_list_categories(‘title_li=0&orderby=name&show_count=0’);
        ?>
       </ul>
        <!– menus END –>
       </div>
       <div id=”navigation_wp_list_pages”>
        <ul id=”menus” >
         <?php
          wp_list_pages(‘title_li=0&sort_column=menu_order’);
         ?>
        </ul>
       </div>
      </div>

      <div></div>
    </div>
    <!– navigation END –>

    我原本是想在navigation实现3栏的,主页图标一栏,然后navs一栏(用来显示分类和页面),搜索一栏,现在只有两栏,homepage和navs(navs下面有navigation_wp_list_categories和navigation_wp_list_pages)。

    下面是CSS代码(我是CSS小菜一个 有错误的请大家指出 :lol: )

    /* navigation START */
    #navigation {
     background:#FFF;
     height:50px;
     overflow:hidden;
    }
    #homepage {
     width:50px;
     height:50px;
     float:left;
    }
    #homepage a {
     display:block;
    }
    }
    #navs {
     float:left;
     width:600px;
     height:50px;
    }
    #navs #navigation_wp_list_pages {
     background:#FFF;
     float:left;
    }
    #navs #navigation_wp_list_categories {
     background:#FFF;
     float:left;
    }
    #menus li {
     display:inline;
     list-style:none;
    }
    #menus li a {
     background-color:#FFF;
     font-size:13px;
     display:block;
     color:#382E1F;
     height:25px;
     line-height:20px;
     padding:0 10px;
     text-decoration:none;
     float:left;
     z-index:1;
    }
    #menus li a:hover,
    #menus li a.current {
     color:#006699;
     background-color:#CDE7FA;
    }

    #menus li.current_page_item a,
    #menus li.current-cat a {
     color:#006699;
     background-color:#CDE7FA;
    }
    /*  searchbox 我这里其实没有用到*/

    #searchbox {
     background: url(img/searchbox.gif) no-repeat;
     width:209px;
     height:21px;
     display:block;
     float:right;
     margin-right:10px !important;
     margin-right:5px;
     padding:3px 2px;
    }
    #searchbox .textfield {
     background:none;
     border:0px;
     width:185px;
     float:left;
     margin-right:2px;
     padding-left:2px;
    }
    #searchbox .button {
     background:none;
     border:0px;
     width:18px;
     height:18px;
     cursor:pointer;
     float:left;
     margin-top:1px;
    }
    #searchbox .searchtip {
     color:#999;
    }
    /* navigation END */

     

    这个虽然是写的针对iNove主题的,但其实其他主题的实现方法都是一样的,主要都是修改header.php和sytle.css文件,只要认真研究下想实现漂亮的导航都是很简单的。

  • 页面在Firefox下有问题,向高人求救~~

    今天用Firefox打开主页看了下,竟然发现页面在Firefox下面的背景有问题。

    只要文章过长,右边栏显示的东西少,那么右边栏下方的背景就是整体网页的

    背景,同样如果文章内容少,左面的内容页面下面也是显示整体网页的背景,

    就像缺了一块。

    而在IE下面都没有问题,以前没有注意,而且我发现其他人用的iNove主题没出

    现这个问题,不知道到底是怎么回事~~

    急啊~~  高手用Firefox的去我的页面看下,哪位救命。。。。

    下面是截图:

    右边栏内容较少时,下面的背景就有问题。。。

    右边栏内容较少时,下面的背景就有问题。。。

    左边的内容页面内容少时也是背景问题

    左边的内容页面内容少时也是背景问题

    页面底部

    页面底部

    截图4

    wrong4

  • 关于本站对iNove主题的修改。。。

    本站的主题修改了 头部的 header图片,底部的footer图片,底部的wp-logo,另外背景图片也去掉了,修改成背景色#ccc,另外上下边距也修改为0,就是把
    CSS里面#wrap修改为下面的就可以了

    #wrap {
     background:#ccc;
    }

    #title a里面的字体大小改大了些~~

    另外把#tagline {…}修改为下面的,具体可以根据自己情况修改

    #caption #tagline {
     font-size:20px;
     color:#FFF;
     text-decoration:none;
     margin-top:12px;
     margin-left:70px;
     float:left;
     padding:0 3px;
    }

    还有就是searchbox图片我也PS了,原来是黑色的现在我PS成蓝色,不过做工不是很好,嘿嘿~~

    再有就是安装插件了~~

    ———————————————————————————-

    提示:由于已经对inove做了太多的修改很多没有记录,而上面的只是最开始修改的一部分。