首页 > 大杂烩 > Inove主题修改：段首缩进+突显外部链接

Inove主题修改：段首缩进+突显外部链接

2010年1月10日 发表评论 阅读评论

一起知道当前使用的是鼎鼎大名的inove主题，文夕相信用过WordPress的人十有八九都用过或者见过这个主题。Inove虽近乎完美，但因每人的喜好不同，还是需要做点个性化的调整。今天文夕就将在一起知道中所做的一些调整方法拿出来和大家分享，就当是做笔记，如果对他人有所帮助，那真是再好不过了。

1、字体中加入微软雅黑

微软雅黑字体很是漂亮，所以文夕将其加入到CSS的字体列表中，这样只要访客的电脑中有这个字体就可以得到更好的显示效果。

方法为，打开inove主题文件夹中的style.css文件，查找“font-family”，然后将整行替换为以下内容，注意替换整个文档就行。

font-family:"Microsoft YaHei",Verdana,"BitStream vera Sans",Tahoma,Helvetica,Sans-serif;

2、段落首行缩进两个字

中文排版中段落首行一般都会缩进两个字，为了达到这个效果只需在style.css文件中加入下面代码：

.content p {
text-indent:2em;
}

3、将行间距调整到155%

inove主题的默认字体样式设置得较小，其中行与行间的距离也是，如果需要加大的话可以通过下面的CSS样式表代码实现：

.content p {
line-height:155%;
}

4、突出显示外部链接

用CSS突出显示不同类型的链接，如区分网站内链和外链，让访客明确了解单击链接时会发生的情况，避免不必要的取消操作和烦恼。常见的做法是，通过CSS设置在所有外部链接上加一个类，然后将图标作为背景图像应用。通过给不同链接类型加上一个小图标，可使其看起来不一样。

离站链接的图标约定：一个框加一个箭头。(点击这里下载)

外部链接效果见这里(这里有更为详细的教程)

代码实现如下：(你只需将域名做个替换就行)

a[href^="http:"]{
background: url(img/out-link.gif) no-repeat right top;
padding-right:10px;
}
a[href^="http://www.17zhidao.com’],a[href*='javascript'],a:has(img),a[href*=#]").attr("rel","inlinks");
$("a[rel!='inlinks']").click(function(){window.open(this.href);return false;});
$(".post .content p a[rel!='inlinks']").css({background:"url(out-link.gif) no-repeat right 50%","padding-right": "12px"});

注意：此方法对IE6无效果，例外，上面后部代码是通过jQuery的方法实现自动让外部链接在新窗口打开。

上述的全部代码：(复制替换域名之后，直接加入style.css文件尾部即可)

.content p {
    text-indent:2em;
    line-height:155%;
}
a[href^="http:"]{
background: url(img/out-link.gif) no-repeat right top;
padding-right:10px;
}
a[href^="http://www.17zhidao.com’],a[href*='javascript'],a:has(img),a[href*=#]").attr("rel","inlinks");
$("a[rel!='inlinks']").click(function(){window.open(this.href);return false;});
$(".post .content p a[rel!='inlinks']").css({background:"url(out-link.gif) no-repeat right 50%","padding-right": "12px"});

真烦！那些可恶的乱码……

编码导致修改 WordPress 主题文件后出现乱码

WordPress本地测试推荐使用XAMPP

扮靓！我的地盘我做主……

WordPress表情smilies符号与图形的对应关系

Inove主题修改：段首缩进+突显外部链接

轻松实现Wordpress评论倒序排列的2个方法

用WordPress的乐趣就在于“折腾”

WordPress固定链接设置与301重定向

WordPress 评论头像设置方法(转)

探索！通过博客赚点钱……

加入Google AdSense阵营，就在今天！

无觅相关文章插件，快速提升流量


分类: 大杂烩 标签: , ,
  1. YesCola
    2010年9月25日16:45 | #1
    回复 | 引用

    想问一下你使用的是默认的编辑器吗? 我看你贴入代码可以直接显示。
    我使用FCK编辑器贴代码就自动转换了。。郁闷 :-?

    • 文夕
      2010年9月27日11:45 | #2
      回复 | 引用

      @YesCola, 恩恩，我用的是默认编辑器。发布文章用的是livewriter 离线发的~

  2. surda
    2010年8月28日10:21 | #3
    回复 | 引用

    同是iNove主题的来过 但我的已找不到iNove的影子 ：）

  3. sunyixiang
    2010年8月28日03:19 | #6
    回复 | 引用

    非常感谢博主的介绍，但是我加了
    .content p {
    text-indent:2em;
    line-height:155%;
    }
    a[href^="http:"]{
    background: url(img/out-link.gif) no-repeat right top;
    padding-right:10px;
    }
    a[href^="http://netmosey.com’],a[href*='javascript'],a:has(img),a[href*=#]“).attr(“rel”,”inlinks”);
    $(“a[rel!='inlinks']“).click(function(){window.open(this.href);return false;});
    $(“.post .content p a[rel!='inlinks']“).css({background:”url(out-link.gif) no-repeat right 50%”,”padding-right”: “12px”});
    后，所有的链接都带有小箭头，本人对代码也不是很了解，请问如何解决（除了替换一处网址外还需要做什么？）

    • 文夕
      2010年8月28日14:47 | #7
      回复 | 引用

      @sunyixiang, 试试加下面的代码吧

      .content p {
      text-indent:2em;
      line-height:155%;
      }
      a[href^="http:"]{
      background: url(img/out-link.gif) no-repeat right top;
      padding-right:10px;
      }

      a[href^="http://netmosey.com"],a[href^="http://www.netmosey.com"]{
      background-image:none;
      padding-right:0;
      }
      a[href^="http://netmosey.com’],a[href*='javascript'],a:has(img),a[href*=#]“).attr(“rel”,”inlinks”);
      $(“a[rel!='inlinks']“).click(function(){window.open(this.href);return false;});
      $(“.post .content p a[rel!='inlinks']“).css({background:”url(out-link.gif) no-repeat right 50%”,”padding-right”: “12px”});

      • sunyixiang
        2010年8月28日19:57 | #8
        回复 | 引用

        @文夕, 非常感谢，已经可以了，谢谢，我得学习学习代码了，呵呵 :wink:

      • sunyixiang
        2010年8月28日19:58 | #9
        回复 | 引用

        @文夕, 同时又出现了一个问题，呵呵，所有的友情链接都有个小箭头，这个怎么处理？ :evil:

        • 文夕
          2010年8月29日13:36 | #10
          回复 | 引用

          @sunyixiang, 我放的代码是这样的，你再看看。我也没怎么研究过……

          a[href^="http:"]{
          background: url(img/out-link.gif) no-repeat right top;
          padding-right:10px;
          }
          a[href^="http://17zhidao.com"],a[href^="http://www.17zhidao.com"],a[href^="http://tao.17zhidao.com"],a[href^="http://www.chinablogs.org"]{
          background-image:none;
          padding-right:0;
          }
          $(“a[href*='http://www.17zhidao.com'],a[href*='javascript'],a:has(img),a[href*=#]“).attr(“rel”,”inlinks”);
          $(“a[rel!='inlinks']“).click(function(){window.open(this.href);return false;});
          $(“.post .content p a[rel!='inlinks']“).css({background:”url(out-link.gif) no-repeat right 50%”,”padding-right”: “12px”});

  4. itfans
    2010年6月30日00:49 | #11
    回复 | 引用

    你好博主，我也很喜欢INOVE主题 但是我没有什么网站知识基础 只是简简单单的想搭建一个属于自己的博客
    inove主题我修改了很多 但是还有很多不懂的地方 诚心向您请教一个问题 就是Inove主题字体间距在哪里修改 能够告知 在你百忙之中我还来打扰，请原谅。

    • 文夕
      2010年6月30日09:09 | #12
      回复 | 引用

      @itfans, :wink: 你指的是 字与字间的距离吗？ 试试下面这个。
      .content p {
      letter-spacing :155%;
      }

      汉字间字间距设置:letter-spacing
      英文间字间距设置:word-spacing:
      H3 { word-spacing: 1em }
      参数:
      in （英寸）
      cm （厘米）
      mm （毫米）
      pt （点数）
      pc （打字机字间距）
      em （ems）
      ex (x-height)
      px （象素）

评论分页
  1. 本文目前尚无任何 trackbacks 和 pingbacks.