无觅“热门文章”插件背景颜色的修改及CSS自定义方法

      从博客的角度看,Jimdo博客还是有其个性和特色的,不过,和一些独立博客系统相比,它的缺点也很是明显的,比如,“相关文章”和“热门文章”功能就是其软肋之一。第三方工具 - 无觅插件 的出现,正好弥补了Jimdo这方面的不足。关于无觅“相关文章”和“热门文章”插件,本站曾做过介绍,这里再就“热门文章”插件背景颜色的修改及CSS自定义作个介绍。

      在《无觅“热门文章”插件及其在Jimdo网站上的应用》一文后,曾有朋友留言说,无觅的“热门文章”由于采用了 <iframe>框架嵌套到页面上,无法自定义背景颜色,从而影响了页面的美观。实际上,无觅在设计上还是很人性化的,它的背景颜色是可以通过CSS自定义的。截图如下:

      在设置模板样式,也就是显示样式界面,有一个“设置自定义代码”按钮”,点击后进入以下界面:

      以上就是系统默认的CSS代码,复制如下,并加了部分注释:

.hots {
    overflow: hidden;
    margin: 0 0 20px;
    padding: 0 10px;
    background: #fff;    /* 整个框架的背景颜色*/
}

.hots .textItem {
    overflow: hidden;
    margin: 0 0 5px;
    color: #535353;
    list-style-type: none;
    _clear: both;
}

.hots .textItem p {
    margin: 0;
    padding: 0;
}

.hots .textItem .itemTitle {
    overflow: hidden;
    float: left;
    display: inline;
    height: 20px;
    line-height: 23px;
}

.hots .itemTitle span {
    float: left;
    display: inline;
    width: 15px;
    background: url('/images/icon_square.gif') no-repeat 0 10px;
}

.hots .textItem .analytics {
    clear: both;
    margin-left: 15px;
    color: #ccc;            /* “喜欢”和“阅读”字体颜色*/
    font-size: 12px;     /* “喜欢”和“阅读”字大小*/
}

.hots .textItem a {
    color: #4a7cb3;        /* 文章标题字颜色*/
    cursor: pointer;
    outline: none;
    text-decoration: none;
    font-size: 12px;
}

.hots .textItem a:hover {
    color: #ef4b4b;     /* 鼠标放上去时文章标题字颜色*/
}

      从以上代码中可以看到,无觅“热门文章”默认的背景颜色是白色,所以只要修改“background:#fff”这一句即可修改背景颜色。如果不知道模板背景颜色的数值,可以用软件取色。实际上,最简单的方法是,将代码直接写成“background:none”,相当于将它设置成透明状态,可以适应任何背景颜色。

      以上的CSS代码可以根据自己的需要随意修改,修改后再点击“预览效果”进行预览,满意后点击“保存修改”即可。如果改乱了,还可以点击“导入默认模板”将代码恢复到系统默认值。

Write a comment

Comments: 3
  • #1

    天地门道 (Friday, 29 March 2013 06:09)

    不错啊好东西

  • #2

    Louis Vuitton Cases For iPhone 6 (Tuesday, 16 June 2015 13:10)

    If this is you and you’re wanting to sell your iPhone 6, now is a good time to do so before iPhone 6s rumors continue to pick up as we head into summer.

  • #3

    Luxury iPhone 6 Cases (Wednesday, 06 April 2016 16:49)

    The second image below shows similar, but less exaggerated differences. In certain situations, like in the low light image of the cappuccino, the iPhone is still equal or better than the S7 Edge.