HotNews Pro主题修改前后篇文章模块


总觉得HotNew Pro这款主题在设计“上篇”、“下篇”的时候,占用空间有点大,还不如修改为一行显示呢!先上图吧!

修改前,分两行显示:

HotNew Pro主题修改

修改后,单行显示,超出部分省略掉,且代之以“…”符号:

HotNew Pro主题修改

HotNew Pro主题修改

single.php,第94行开始

<div class="context_b">
    <span class="previous_post_link cut_text">
        <?php previous_post_link('【上篇】%link') ?>
    </span>
    <span class="next_post">【下篇】</span>
    <span class="next_post_link cut_text">
        <?php next_post_link('%link') ?>
    </span>
    <i class="lt"></i>
    <i class="rt"></i>
    <i class="lb"></i>
    <i class="rb"></i>
</div>

style.css,第516行

.context_b {
    position:relative;
    font-size: 13px;
    background:#fff;
    width:710px;
    height:20px;
    margin: 0 0 10px 0;
    padding: 10px;
    line-height:23px;
    border:1px solid #ccc;
}

.previous_post_link{
    float: left;
}

.next_post{
    float: right;
}

.next_post_link{
    float: right;
    text-align: right;
}

.cut_text{
    display:block;
    width: 300px;
    overflow: hidden;
    white-space:nowrap;
    /*文本溢出用"..."表示*/
    text-overflow:ellipsis; /*适用IE*/
    -o-text-overflow:ellipsis; /*适用opera*/
    -moz-binding: url('ellipsis.xml#ellipsis');/*适用火狐(firefox通过XUL实现效果)*/
}

 

4 Responses Comment (4) Trackback (0)
  1. 水漾涟漪sily :

    :sad: :sad:

  2. 水漾涟漪sily :

    :sad: :sad: :sad:

  3. 水漾涟漪sily :

    :cry: :sad: :evil: :!: 这个留言表情忒丑了! :arrow:

发表评论