分享一种Jimdo博客日期/时间显示样式的自定义代码

      对于Jimdo博客默认的日期/时间显示模式,网上邻居一直感觉不是太满意,曾经先后自定义过好几次,也一直不理想。后来Jimdo也在这方面做了不少改进,从显示内容,到颜色、对齐方式以及显示风格一应俱全。但总体来说,还是延续了西方人的习惯,即使是横排,顺序上也是日、月、年,而且其中根本没有“年”、“日”字样。最近又研究了一下这个问题,初步能按传统博客的样式,也就是我们中国人的习惯样式显示了。

      具体效果截图如下(博客显示页面):

      现将具体方法与大家分享一下。

      首先修改博客风格,如下图。

      显示内容方面勾选“年”,显示风格选自定义模板,这样就清除了CSS里关于日期/时间的一些设置,实际上是选择了CSS里的样式9,其CSS代码如下:

div.datetime.dt-style9{float:none;width:auto;height:auto;margin:0;background:none}
div.datetime.dt-style9.dt-alignment-left{margin:0}
div.datetime.dt-style9.dt-alignment-right{margin:0}
div.datetime.dt-style9 .datetime-inner{padding:0}
div.datetime.dt-style9 p{padding:0;text-align:left;font-size:inherit;line-height:1;color:black}
div.datetime.dt-style9 p.day{line-height:normal}
p.dt-hide{display:none !important}

      有了以上的基础,我们就可以自已设计日期/时间的显示样式了。本人初步设计的CSS代码如下:

.blogselection .clearover{margin-top:5px;border-bottom: 1px dashed #ccc;}
.blogselection .datetime-inner{float:right; width:135px;height:13px;}
.blogselection .datetime .yr,
.blogselection .datetime .mon,
.blogselection .datetime .day
{float:right;height:20px;padding-top:8px;margin:0px;display:inline;line-height:20px !important;font:12px/100% verdana,宋体 !important;}
.blogselection .datetime .yr{width:50px;text-align:right;}
.blogselection .datetime .mon{width:30px;text-align:center;}
.blogselection .datetime .day{width:30px;text-align:left;}
.blogselection .datetime .yr:after{content: "年";}
.blogselection .datetime .day:after{content: "日";}

      以上代码中,采用了“:after ”伪元素,在数字年和日后面插入“年”和“日”字。稍有点遗憾的是,这个“:after” 伪元素主流浏览器都支持,但对于IE来说,只有IE8以上版本才支持。

      对于自定义模板,可以将以上内容直接写到自定义模板的CSS中,如果是系统模板,可以把它添加到“head”中。如果想更改字体的大小,部分数值也要作部分修改。

      具体演示请见:http://jdm2012.jimdo.com/blog/

      可能有些朋友很羡慕一些门户网站上那种带日期的文章排版,其实在Jimdo上也能实现,下图就是用于首页的博客显示样式。其方法就是采用了上面的代码,不过为了有别于其它页面上的博客显示,对首页又进行了一点修改。

      首页的修改代码如下:

.cc-indexpage .blogselection .datetime .yr,
.cc-indexpage .blogselection .datetime .mon,
.cc-indexpage .blogselection .datetime .day
{padding-top:0px;font:12px/100% verdana,宋体 !important;}
.cc-indexpage .blogselection{border:1px solid #ddd;padding:8px 10px;}
.cc-indexpage .j-blogarticle h1{font:12px/100% verdana,宋体 !important;}
.cc-indexpage .j-blogarticle .blogreadmore,
.cc-indexpage .j-blogarticle .comment{display:none;}
.cc-indexpage .blogselection .clearover{margin:0; border:none;}

      以往针对首页,都是去找页面ID,然后将它放到代码中,经过学习,网上邻居找到了一种方法,那就是对于Jimdo网站,“.cc-indexpage”就是首页的类选择器。

      以上代码,实际上是给博客显示加了个边框,定义了标题字体大小,同时,隐藏了“查看全文”和“评论”。

      具体演示请见:http://jdm2012.jimdo.com/

      以上代码只是初步探索,已知的不足是,IE8以下的浏览器中,仍然不显示“年”和“月”,不过别的主流浏览器都能显示。此外,本文代码都是针对博客显示设计的,在具体博文里,显示有错位现象,代码还有待研究。如果感觉别扭,可以采用以下代码将日期/时间屏蔽掉。

.post .datetime .datetime-inner{display:none !important;}

相关文章:

脚本之家myFocus焦点图在Jimdo网站上的演示 (Sat, 27 Jul 2013)
>> Read More

分享一种Jimdo博客日期/时间显示样式的自定义代码 (Sun, 17 Feb 2013)
>> Read More

介绍一个动态修改Jimdo网站模板CSS样式表的JS代码 (Sun, 03 Feb 2013)
>> Read More

Jimdo“图文混排”元素及其代码演示 (Fri, 25 Jan 2013)
>> Read More

介绍一种完美修改Jimdo网站页脚部分的方法 (Thu, 10 Jan 2013)
>> Read More

Write a comment

Comments: 4
  • #1

    网型网秀 (Sunday, 17 February 2013 01:49)

    :after和:last-child等差不多,会要求浏览器版本,IE7不能忽略掉。为了达到兼容,可以尝试JS。

  • #2

    网上邻居 (Sunday, 17 February 2013 14:32)

    对JS不是太懂,期待网型网秀分享一种JS的自定义代码!

  • #3

    joeyoo (Saturday, 11 May 2013 03:45)

    看了您的网站布局和设计,很是欣赏,由此生出许多这方面的制作疑问,听前辈说自己不是做网站设计为专业的,大概您也就没必有时间为我亲手打造网站,又因为自己是小白,总结问题的话,大概需要条条列出再统一请教前辈可能会好一些,今后有所打扰,请见谅,望前辈闲暇时多给具体指点,谢谢。先有一问,请看这个网站,http://www.qikan.com.cn/Default.aspx 我现在是jimdo商业版网站,希望首先能将整站背景颜色设成该站的背景色(即灰色),但已看遍所有jimdo官方模板均无这样的一款是这样的颜色背景,只能自定义了,请问前辈这样的背景色怎样设置参数?
    joeyoo 2013-5-11 05:02:48
    您好,请教一个博客显示文章排版的问题,参照您的文章http://jdm.jimdo.com/2013/02/17/datetime/中阐述的在Jimdo上也能实现门户网站上那种带日期的文章排版所提到的代码您所说得“如果是系统模板,可以把它添加到“head”中。”我的网站采用的是系统中给出的模板,但由于是新手,不太明白您说的可将代码添加到“head”的具体操作是怎样的,是否是在这里添加的意思?如果是我模板添加了代码,但博客文章显示没有变化?是什么原因呢,那么正确的系统模板添加代码到“head”的具体操作是怎样的呢,请前辈教我,谢谢

  • #4

    网上邻居 (Monday, 13 May 2013 16:42)

    joeyoo:
    Jimdo网站上编辑“head”,也就是在“head”上添加内容的方法是:登录你的网站,然后在右上角的控制面板里点击“设置”,进入后在“网站全局”下找到“编辑head部分”即可添加代码了。