今天正式从CSDN搬家到blogjava了。CSDN早就注册了,速度一直不行。早就想换了。blogjava最近才注册,但是blogjava的图片和附件都有空间限制。发现blogjava访问速度比CSDN快多了,于是就搬过来了。也不喜欢blogjava的语法着色,不想用,于是也定制了一个CSS专门用于发代码。
搬家过来,首先得把我的blogjava博客装饰一下。还是喜欢在CSDN用的Skin。于是就原样地把CSDN的Skin搬过来。这么一装饰,我的blogjava博客和CSDN博客长得几乎是一样了。不信可以先访问我的CSDN博客比较一下(
http://blog.csdn.net/wintys)。
早就想通过CSS定制页面把blogjava装饰一下,可是直到现在才开始做。下面就班门弄斧向大家介绍一下我的定制步骤。
1、点博客右上角的"设置"。然后在设置里找到"通过CSS定制页面"。
2、把自己想加入的CSS统统写在这里就OK了。
哈哈,上面的步骤谁都知道!CSS又是怎么写出来的呢?我用的是Firefox + Firebug + Stylish。通过Firebug找出自己要设置DOM元素的ID或者class,然后用Stylish编写相应页面CSS。用Stylish方便之处在于,不用每次刷新blogjava页面,写好CSS之后,只要点击预览就可以看到效果了。当然在CSDN上找出背景色及背景图片用的也是Firebug,而不是直接查看源代码。如果你用过Firebug你自然知道它的方便之处了,没有用过的赶紧下一个来玩玩,使用起来很简单。在Stylish中将一切CSS写完之后,才将它们都复制到"通过CSS定制页面"里面去。保存,刷新首页即可。要注意,最后要把所涉及的图片都传到blogjava里来哦,不要链接CSDN的图片哦。因为CSDN慢,blogjava快,等blogjava的内容加载完了,CSDN的图片还没加载上,那就不好看了。
看过,blogjava 定制CSS的
帮助文档 ,还是用自己的方法更得心应手一点。仅供大家参考。
还有我的CSS只是在Firefox下测试过的,在IE中运行发现有些许不一致,但无大碍。也懒得在IE中重新调试了,再说平时也不用IE。IE真是令人烦,不完全支持Web标准,每次CSS写完了都得在IE中重调。所以现在索性不用IE了。
附上我自己定制的CSS(写的很乱,没有整理优化 ,有时间再改改):
最新修改的CSS见:
http://www.blogjava.net/wintys/customcss.aspx
/*Copyright (c) Winty
*http://www.blogjava.net/wintys/
*wintys@gmail.com
*2009-03-16
*
*任何人都可以使用我定制的CSS。
*如需使用请保留版权信息 ,并在我的博客上留言支持一下。谢谢!
*我使用的是blogjava中的Skin: arrow改过来的。不同的Skin可能不一定适用。
*/
body{font-size:medium !important;}
.mycode {
margin: 10px;
padding: 10px;
background: #DDEDFB;
border: 1px solid #428EDE;
text-align: left;
WORD-WRAP: break-word;
}
/****************************/
/****************************/
/**以下是页面CSS设置 **/
/*全局设置*/
a:hover{
color:#FF6600 !important;
}
/*页首设置*/
/*******************/
/*首部*/
.header{
background:#FFFFFF url(images/blog_topbg.gif) repeat fixed center top !important;
}
/*首部主标题*/
a#Header1_HeaderTitle{
font-size:50px !important;
}
/*首部导航栏*/
#mylinks{
/*csdn nav*/
background:#FFFFFF url(images/blog_navbg.gif) repeat scroll center top !important;
}
/*导航链接*/
a.menu{
color:#FFF !important;
border:1px solid #B3E3FF;
padding: 3px;
text-decoration:none;
margin:4px;
}
a.menu:hover{
border:1px solid #00FF00;
}
/*顶部随笔文章统计栏*/
div#mytopmenu{
background:#FFFFFF url(images/blog_navbg.gif) repeat scroll center top !important;
margin:0px !important;
padding: 4px;
color:#FFF;
}
div.blogStats{
font-size:12px !important;
}
/*文章内容区设置*/
/***********************/
/*文章div*/
div.day{
border-bottom:1px solid #7DC9D7 !important;
}
.postTitle2{
color:#336699;
}
div.postDesc{
font-size:10px;
}
div.dayTitle{/*csdnurl*/
background-image:url(images/blog_selenderbg.png) !important;
height:25px !important;
}
div.dayTitle a{
color:#FFF !important;
text-decoration:none;
}
div.dayTitle a:hover{
color:#FF6600 !important;
}
/*页脚设置*/
/****************************/
div.footer , a.footerlink{
background-image:none !important;
color:#336699 !important;
}
a.footerlink:hover{
color:#FF6600 !important;
}
/*左侧设置*/
/**********************************/
/*文章分类 和 文章档案*/
.catListTitle {
background:#FFFFFF url(images/blog_sidebarico.gif) no-repeat scroll center center !important;
color:#369 !important;
height:23px !important;
padding-top:0px !important;
}
/*h3标题:留言簿等*/
#leftcontentcontainer h3{
background:#FFFFFF url(images/blog_sidebarico.gif) no-repeat scroll center center !important;
color:#369 !important;
height:23px !important;
padding-top:0px !important;
}
/*左边分割线*/
#leftcontent{
border-right:1px solid #7DC9D7 !important;
}
/*左侧背景*/
#leftcontentcontainer{
background-color:#E9F9FF;
}
/****************************/
/****************************/
posted on 2009-03-16 16:31
天堂露珠 阅读(205)
评论(0) 编辑 收藏 所属分类:
Miscellaneous