如何设置类似ZDG的Blog风格

来源:互联网 发布:特丽魅彩 知乎 编辑:程序博客网 时间:2024/05/18 00:01

经过 ZDG的授权,将其自定义CSS贡献出来,供大家设置好看的Blog界面,使用方法:

1、进入后台管理界面,点[配置]标签页。

2、选择模板风格为keso,然后在自定义CSS中粘贴进以下代码,既可以实现ZDG风格了:

#header {   background: #F9F9F9 url("http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif") no-repeat 10px .5em;   color: #000000;   padding-left: 160px;   height: 20px;   border-bottom: 1px dotted Black;   margin : 0px;   padding-bottom: 30px;   font-family: "Courier New", Verdana, monospace;  }    #main {   width: 70%;   position: absolute;   margin-top: 0px;   background-color: #FFFFFF;   border-right: 1px dotted #000000;   padding-top: 20px;   margin-bottom: 10px;   padding-bottom: 40px;   font-size: 10pt;  }    #rightmenu {   float: right;   width: 27%;   margin-left: 72%;   margin-top: 10px;   padding-left: 0px;   background-color: transparent;   position: absolute;   word-wrap:break-word;   font-size: 9pt;  }    #footer {   clear: both;   width: 100%;   border-top: none;   font-size: 8pt;   padding-top: 5px;   text-align: center;   position: relative;   visibility: hidden;     display: none;  }    a:visited {   color: #5B9EFF;   text-decoration: none;  }    a:active,  a:link {   color: #0066FF;   text-decoration: none;  }    a:hover {   color: #88BBFF;   text-decoration : underline;   }    blockquote {   background: #F9F9F9;   border: 1px solid #F4F4F4;   color: #5B5B5B;   font-size: 10pt;   font-style: normal;   line-height: 150%;   padding: 0px 11px 0px 11px;  }    body {   background-color: White;   color: #000000;   font-size: 10pt;   margin: 0px;   width: 100%;  }    h1 a:visited,  h1 a:active,  h1 a:link {   color: #000000;   font-size: 15pt;   text-decoration: none;  }    h1 a:hover {   color: Silver;   text-decoration: none;  }    .post {   padding-left: 70px;   padding-right: 40px;   font-size: 10pt;  }    .postTitle {   border-bottom: 1px dotted #D6D6D6;   color: #000000;   font-size: 10pt;   font-weight: bold;  }    .postText {   font-size: 10pt;  }    h3 {   font-size: 10pt;   border-bottom: 1px dotted #D6D6D6;   color: #000000;   background-color: transparent;  }    .listitem {   border-bottom: 1px dotted #E4E4E4;   padding-bottom: 3px;   padding-top: 3px;  }    input,  label {   color: Gray;   font-family: Verdana;   font-size: 10pt;  }    input.text {   width: 381px;  }    li {   font-size: 10pt;   font-style: normal;  }    .dateTitle {   border-bottom: 1px dotted #D6D6D6;   color: #000000;   font-size: 10pt;   font-weight: bold;   padding: 0px 0px 0px 0px;  }    p.date img {   vertical-align: middle;  }    .postFoot {   border-bottom: 1px dotted #D6D6D6;   color: #D3D3D3;   text-align: right;   font-size: 9pt;  }    span.highlight {   background-color: transparent;  }    td {   font-size: 10pt;  }    textarea {   color: #000000;   font-size: 10pt;   height: 200px;   width: 300px;  }    #MyLinks1_XMLLink {   visibility: hidden;   display: none;  }    #MyLinks1_Syndication {   visibility: hidden;   display: none;  }    .CommentForm {   border-top: 1px dotted #D6D6D6;   padding-top: 20px;   color: #A9A9A9;   padding-left: 70px;   padding-right: 40px;   }    #comments {   color: #888;   padding-left: 70px;   padding-right: 40px;   font-size: 10pt;  }    #relatedlinks ul {   list-style: none;   margin-left: 10px;   padding: 0px;  }    #rightmenu h3 {   background-color: transparent;   border: none;   border-bottom: 1px dotted #D6D6D6;   color: #000000;   font-size: 10pt;   margin: 10px 0px 0px 0px;   padding: 2px 5px;  }    #rightmenu ul {   border: none;   list-style: none;   margin: 0px;   padding: 5px;   font-size: 9pt;  }    #rightmenu li {   font-size: 9pt;  }    #tagline {   color: Gray;   font-size: 10pt;   position : absolute;   top : 25px;   right : 35px;   margin : 0px;   margin-left : 0px;   font-family: "Courier New", Verdana, monospace;  }    code {   font-family: "Courier New", Courier, monospace;   font-size: 10pt;  }    i {   font-style: normal;   color: Green;  }

 3、修改个人Logo:将以下图片地址 http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif改成你的个人Logo地址。

4、如果你的Logo比CSDN的长或者短,可以修改一下padding-left: 160px;  的值