Greater Dunnellon Historical Society

将jimdo前台翻译为中文

       随着jimdo全面退出中国市场,现在我们大家使用的中国区的jimdo系统不管是前台还是后台都变成了英文,主要表现在留言系统和博管系统的部分元素内容。给用户的操作和访问带来了很大的不便!后台是没有办法改变的,因为我们没有办法控制,那前台能不能将留言和博客显示系统翻译替换成中文显示呢?答案是肯定的!

       实现的办法就是利用text-indent这个文本缩进CSS样式,通过把值设置到足够大,比如999px;将jimdo元素内容为英文的文本隐藏起来,然后将它用图片代替,当然这个图片就是我们用PS制作的透明字,另外还有一个关键,那就是text-indent只对块元素有效,但我们发现JIMDO的留言系统很多英文显示都是行内元素,这时要隐藏就还要用到display: inline-block;强制将行元素变成块元素,并设置固定的宽和高,不然它会换行这样就会有多余的空行影响美观!

就是代表对第一处元素required的定义       乍一看起来实现起来还不怎么难,但你通过用火狐的CSS插件查看JIMDO的留言系统在前台的显示,发现很多处元素的名字是相同的,比如显示name:和Entry:的元素名都是required,这时要想直接在CSS中将name:和Entry:分别替换成中文就有难处了,所幸世上无难事,经过再次查看,发现JIMDO还给required这个元素分别给了不同的属性,分别是:

       <label class="required" for="name6352537087">Name: *</label>

       <label class="required" for="comment6352537087">Entry: *</label>

       也就是表示第一个元素required的属性是name6352537087,第二个required属性是comment6352537087,这时在CSS中这样定义.required[for="comment6352537087"]就是代表对第一处元素required的定义, .required[for="comment6352537087"]就是代表对第二处元素required的定义。

       我现在把本站jimdo留言系统三处英文替换成中文的CSS代码贴在下面:

       .required[for="name6352537087"]{vertical-align:middle; width:178px;height:12px;display:inline-block;text-indent:-9999px;background:url("http://u.jimdo.com/www67/o/se1898f6aca8775dc/userlayout/img/name.png?t=1426563899")  no-repeat scroll 0 0 rgba(0, 0, 0, 0) ;}
.required[for="comment6352537087"]{vertical-align:middle;width:178px;height:12px;display:inline-block;text-indent:-9999px;background:url("http://u.jimdo.com/www67/o/se1898f6aca8775dc/userlayout/img/shurunr.png?t=1426565546") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.zend_form .optional{width:178px;height:12px;display:inline-block;text-indent:-9999px;background:url("http://u.jimdo.com/www67/o/se1898f6aca8775dc/userlayout/img/wangzhispics.png?t=1426480555") no-repeat ;}

       你现在要做就是把上面红色所示的部分改成你自己的。对于博客显示系统部分用同样的方法可将英文替换成中文,如时你有更好的办法请分享给大家!

Write a comment

Comments: 0