Jimdo网站的美化 - Jimdo博客标题中日期的修改方法(一)

      相信很多朋友对Jimdo博客标题中日期的显示样式都不是很满意,所以有的Jimdo网站上,直接把博客的日期屏蔽了。这样做肯定不是好办法,因为日期也是博客标题内容的一部分。本人以前也研究过这个问题,改出来的效果一直不满意,最近又分析了一下,改成了现在的效果。

      在Jimdo网站上,博客有两种显示方式,一种是“博客显示”,它属于导航性质的,将博文分类显示在不同的导航目录下,一般设置为显示标题或一段摘录;另一种就是博客正文。这两种方式,在博客标题的后面都显示那个Jimdo特有的带背景图片的日期。

      本次修改的设想是:去掉那个蓝色背景图片,然后把日期按年、月、日咱们比较适应的顺序横向排列。本文先以博客正文为例,介绍一下具体的修改方法。

      先看一下Jimdo有关日期和时间的代码,它的CSS代码是这样的:

div.datetime{float:right;width:44px;height:45px;margin:0 10px 10px 0;background:url(/s/img/cc/datesticker-bg.png) no-repeat center center;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://s.jimdo.com/s/img/cc/datesticker-bg.png', sizingMethod = 'crop');_background:none}

p.day-word{display:none}
p.day{padding-top:4px;font-size:18px;line-height:20px;color:white;text-align:center}
p.mon{padding-top:1px;font-size:11px;color:white;text-align:center}
p.yr{display:none}

      从这里可以看到,在博客里,它是将p.yr(年份)和p.day-word(星期)屏蔽掉的,只把p.mon(月)和p.day(日)放在那个蓝色背景图片[background:url(/s/img/cc/datesticker-bg.png) no-repeat center center;]上。

      要想屏蔽背景图片,一般用代码“ background:none;”即可,用Firefox、Opera等浏览器浏览时,也确实看不到那个背景图片,但是用IE6浏览时,那个背景图片是去不掉的。后经反复试验,再加上“width:0px; height:0px;”,才能确保不显示那个背景图片。

      在博客里,日期部分Jimdo采用的是绝对定位,将它放到博客标题的右部,要想实现“年、月、日”的横排, 我这里也采用绝对定的方法,对它进行修改。

      我目前使用的代码如下,它还不是最优化的,只是初步试验的结果:

.post .datetime{background:none;width:0px;height:0px;}  /* 屏蔽背景图片 */
.post .datetime .day{position:absolute;right:265px;top:174px;*top:187px;font-size:12px;line-height:12px;color:#999;}  /* 设置“日 ”的位置及字体*/
.post .datetime .mon{position:absolute;right:280px;*right:268px;top:177px;*top:191px;*width:50px;font-size:12px;line-height:12px;color:#999;}  /* 设置“月 ”的位置及字体*/
.post .datetime .yr{display:block;position:absolute;right:315px;top:178px;*top:191px;font:bold 13px 宋体;line-height:13px;color:#666;}  /* 设置“年 ”的位置及字体*/

      代码中,“position:absolute;”是绝对定位,具体位置通过"right"和"top”的数值进行确定,在前面加“*”号的部分,是为了兼顾IE浏览器的定位,给出的数值是通过IE6进行测试得到的。

      在“.post .datetime .yr”里添加“display:block;”是使年份显示出来。

      另外,这个Jimdo日期里,只有月份有“月”,而“年”和“日”都没有,所以代码里,通过字体的大小、颜色和间距,也进行了一点不同的设置。如果有朋友拿这个代码去用,需要对“right”、“top”的数值进行修改,因为这是绝对定位,属于量身定做。字体也可以根据自己的需要,任意修改。

Write a comment

Comments: 14
  • #1

    网型网秀 (Sunday, 31 October 2010 15:54)

    学习了。

  • #2

    诸葛草帽 (Sunday, 31 October 2010 17:24)

    学习了。

  • #3

    淘宝600家园 (Sunday, 31 October 2010 18:11)

    看来效果不错哦,学习一下。

  • #4

    网上邻居 (Sunday, 31 October 2010 21:13)

    谢谢三位朋友的支持!
    从博客的角度来说,Jimdo有它的优点,同时,它的缺点也是显而易见的。如果它的系统不更新,如果只是用来供大家学习CSS知识,好象也是挺悲哀的...

  • #5

    独星 (Sunday, 31 October 2010 22:25)

    很久以前我试过把背景改了,但失败了:原来的在图片的上面(除火狐外显示),只看见背景图片(火狐显示)

  • #6

    淘宝600家园 (Sunday, 31 October 2010 22:44)

    呵呵,终于完成了,效果还算不错,以上代码定义right和top有点麻烦,而且要在IE与火狐上两边测试,只要定义好这两个浏览器的效果,其他都兼容了,相信邻居也花了不少心思哦,继续支持~~~~~

  • #7

    Suitear (Sunday, 31 October 2010 23:43)

    我只看到了4楼,的确挺悲哀~~~

  • #8

    网上邻居 (Monday, 01 November 2010 00:30)

    Suitear:
    世上从来就没有十全十美的东西。从博客这个角度说,从免费的角度说,Jimdo的开放和它的自定义,是国内那些门户网站提供的博客不能比的;但是跟WordPress比,它的博客甚至算不上博客,很多博客的基本功能它都不具备。Jimdo算是一个具有博客功能的建站平台吧,我们期待它的改进和完善!

  • #9

    138photo (Tuesday, 02 November 2010 22:29)

    又有变化了,我又来看看。

  • #10

    77177 (Saturday, 06 November 2010 21:14)

    请问,jimdo的CSS代码在哪能找到?

  • #11

    网上邻居 (Sunday, 07 November 2010 22:06)

    看看网页源码,就知道了。

  • #12

    商丘律师网 (Sunday, 24 April 2011 21:06)

    1月1日,12月31日显示不正常,1月2日有时也不正常。比如发表时间是2002年1月1日,显示的时间却是2001年1月1日。

  • #13

    Tory Burch outlet (Thursday, 17 January 2013 04:48)

    comment

  • #14

    Louis Vuitton 2015 iPhone 6S Plus Cases (Monday, 11 April 2016 16:32)

    Weiser a first-year dance student from Oregon, was last seen leaving a university drama building Sunday night. Her body was discovered in a creek in the heart of the university's Austin campus on Tuesday.