Rexdf

The devil is in the Details.

建站日志

| Comments

So long a time, I didn’t update my blog’s theme. But this time it was greatly revisied , and I renew for one year for my host.

1.Google Fonts

2.MulitLuange Support

It should adapt to client’s default language automatically.

3.pdf

You can download the post as a pdf file.But some post including MathJax’s Latex will not be converted as the orginal html.

4.CSS optimization

All navigation bar in gradient

#nav-above {
background-color: #004979;
background: -ms-linear-gradient(top, #0000ff 0%, #7d7fc8 40%, #0000ff 100%);
background: linear-gradient(top, #0000ff 0%, #7d7dc8 40%, #0000ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#7d7dc8', GradientType=0 );
background: -moz-linear-gradient(top, blue, rgba(125, 125, 200, 0.5));
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0000ff), to(rgba(125, 125, 200, 0.5)));
background: -o-linear-gradient(top, blue, rgba(125, 125, 200, 0.5));
}

Compatible with IE, Firefox and Chrome

in ‘include/general-template.php’ edit ‘get_search_form’ function add ‘placeholder’ attribution.

#s:focus { width: 80%; }
.widget_search #s {
float: left;
-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
-o-transition-duration: 400ms;
-o-transition-property: width, background;
-o-transition-timing-function: ease;
width: 60%;
}

好久没用折腾博客空间的主题了，这次算是一个较为重大的更新，顺手把主机又续费一年。现在已经包含了较多的插件，有时间后面再专门写一篇介绍。本篇主要讲这次更新新添加的东西。上次ftiasch博客看到MathJax后，就有添加支持的想法。一搜索居然真的就有这个插件，所以直接就用起来了。

1.Google Fonts

不过现在看到的字体都不是谷歌的，谷歌字体已经加入，还没开始使用。

2.多语言

可以自动识别浏览器的语言，也可以手动设置。

3.pdf

添加了下载文章为PDF功能，不过MathJax的Latex就会在pdf里面被原文呈现。

4.CSS优化

4.1导航条全部采用了渐变

#nav-above {
background-color: #004979;
background: -ms-linear-gradient(top, #0000ff 0%, #7d7fc8 40%, #0000ff 100%);
background: linear-gradient(top, #0000ff 0%, #7d7dc8 40%, #0000ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#7d7dc8', GradientType=0 );
background: -moz-linear-gradient(top, blue, rgba(125, 125, 200, 0.5));
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0000ff), to(rgba(125, 125, 200, 0.5)));
background: -o-linear-gradient(top, blue, rgba(125, 125, 200, 0.5));
}

这段代码是用来支持IE、Firefox和Chrome中均能渐变显示的。

4.2动态伸缩搜索框

在include/general-template.php中修改get_search_form搜索框添加了placeholder，并添加了

#s:focus { width: 80%; }
.widget_search #s {
float: left;
-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
-o-transition-duration: 400ms;
-o-transition-property: width, background;
-o-transition-timing-function: ease;
width: 60%;
}

主要是针对三个浏览器设置延时，然后宽度设置成60%，获得焦点后变成80%，这样来进行动态伸缩效果。

4.3主要块背景透明

这个使用的技巧比较简单，只要不给div设置背景色，那么它自动就是透明的，然后用一张透明属性的png图片，这样就做成的见到的这个效果。

5经验

因为blog.rexdf.org在是通过.htaccess绑定到子目录的，这样就可以算作两个域名，但是我考虑到了把资源放到不同域名是可以加快加载速度的，因此一些背景图片等就故意使用rexdf.org域名来加载。

Comments