Inove主题修改:段首缩进+突显外部链接
一起知道当前使用的是鼎鼎大名的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"});
真烦!那些可恶的乱码……
扮靓!我的地盘我做主……
探索!通过博客赚点钱……



今天再来看看,呵呵~
说也不说清楚 唉 真是的 一点诚意也没有 在那个地方添加 那个地方修改 那么多相同的 呜呜。。。
@阿立哥,
,就是找都主题文件夹的 style.css文件,打开后把上面的那些代码复制到文件底部,保存并上传就可以了~
很实用,改完感觉舒服多了。另补充一下,我觉得第三条改为.post p更适合于我。
@小武, 呵呵,根据自己喜欢改就好~
这个主题看起来不错哦,有没有提供下载?
@非主流, 有下载啊,你看底部有写的~inove
话说这个css不错,但是请问:
①可否只让小箭头在正文中出现,像您现在这种在页脚都会出现,不是很美观呀
②缩进能否改成不对代码信息应用,您看您的代码也随文字缩进了
@williamzhou, 嗯,可以的。需要加代码将那些地方排除。我很懒,就没加……
@文夕, 呵呵,建议还是加下啊
@williamzhou, 我自己的电脑坏了,上班时不方便。什么时候加了给你留言吧~
能折腾也是一种本事啊… 不像我貌似想整,也要整黑久..
@逅客, 我也差不多,技术不行。
折腾的不错
哈哈。
@园子,
,还有很多问题,有时间再折腾了~
那个突出显示外部链接挺好玩的
@江流,
板凳!我来勾引蜘蛛了!
@GEZ鸽子, 囧,勾引蜘蛛……
看了下 我的 有问题? 不敢改了,也不晓得那里安错了…
@聪壹艮, 嗯,我的上面的搜索框也有问题……最后我用CSS把它给隐藏了