今天换了blog的skin。基于LuxInteriorLight的修改版。看着还可以吧。

其实一直想找一个现成的类似 安全焦点 网站那样素雅的skin，但一直也没找到。昨天又感到要换个skin了。现在系统提供的skin又增加了不少，一个个试过来，没有一个是满意的。正要放弃，发现名字叫LuxInteriorLight的一个还差不多和我的要求相符，虽然对我来说还有些缺憾。于是，对这个skin修改了一下，搞到深夜，今天又修饰了一下，终于和自己理想中的完美skin距离很近了。说实在的，本人的审美水平确实很凹，所有要让自己从头去设计一个skin出来，真是赶鸭子上架。如果哪位达人可以按照 安全焦点 的风格设计一套skin出来让大家共享，那真是人类的福音！

修改过程中用的是firefox，以及它的两个插件：Web Developer和DOM查看器。前一个插件中有个Edit CSS功能，确实让我省力不少！另外，它还有其他很丰富的功能。

修改过程中还参考了另一套skin："Cogitation"。

下面是修改过的CSS代码，把它贴在 "选项"->"Configure"->"通过CSS定制页面" 里即可。

/*
CSS skin for .text blog
.Text : http://http://scottwater.com/blog/
Skin Name: Luxinterior 
Designer:  gosatango
Designer URL: http://www.mixtaper.com/blogs/gosatango
Created: 18 July 2004
Altered by Soli @ 2007.11.1
*/

body {
    background: #BBBBBB;
    font-size : 12px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    padding: 0px;
    color: #222222;
    margin: 0;
    text-align: center;
    word-wrap:  break-word;
    line-height:120%;
}
a{
    text-decoration: none;
    color: #6B86B3;
}
a:hover {    
    text-decoration: underline;
}
p {
    margin : 0px 0px 1.5em;
    line-height:120%;
}
h1 {    
    margin : 0px;
    padding-top : 0.5em;
    font-size : 1.4em;
}
h2 a, .postfoot a
{
    margin: 0px;
    padding: 0px;
}
h1 a:visited,
h1 a:active,
h1 a:link,
h1 a:hover {
    color : #111111;
    text-decoration : none;
    text-transform: none;
    font-size: 1.6em;
}

h2 {
    margin-top : 1em;
    font-size : 1em;
}
h3 {
    font-size : 1.2em;
}
h5 
{
    margin: 0px;
    padding: 0px;
}
pre
{
    margin: 0px;
    margin-left: 22px;
    font-size: 1.0em;
}
blockquote {
    font-style: italic;
    padding: 4px;
    margin: 0px;
}
input.text {
    width : 350px;    
}
textarea {
    width : 350px;
    height : 200px;    
}
.Textbox, textarea
{
    border: 1px solid #AAAAAA;
    width: 160px;
}
.button
{
    border: 1px solid #AAAAAA;
    background-color: #CCD4E0;
    font-size: 1em;
}
input, textarea
{
    font-family: Verdana, Geneva, Arial, Sans-Serif;
    font-size: 1em;
    padding: 2px;
    margin-bottom: 0.5em;
}
legend {
    letter-spacing: 2px;
    border: 1px solid #666666;
    background-color: #EFEFEF;
    padding: 3px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
img {
    border: 0px;
}
.clr {
    clear: both;
}
#relatedlinks ul {
    list-style : none;
    margin-left : 10px;
    padding : 0px;
}
/*This is for "listening to" links uploaded by w.bloggar*/
.media {
    font-size: 0.8em;
    margin: 10px 10px 5px 10px;
    font-weight: bold;
}
.thumbnail
{
    margin: 5px;
}
/* ------------------------------------------------------- Layout */
/* Container ------------------ */
#container
{
    width: 980px;
    margin: 1em auto;
    background-color: #FFFFFF;
    text-align: left;
}
/* Header --------------------- */
#header 
{
}
#top
{
    height: 7em;
    padding: 1.5em 1em 1em 1em;
    margin: 0px;
    text-align: center;

    BORDER-TOP: 20px solid gainsboro;
    BORDER-LEFT: 2px solid gainsboro;
    BORDER-RIGHT: 2px solid gainsboro;
    BORDER-BOTTOM: 1px dashed gainsboro;
}

#top h1
{
    font-weight: normal;
    margin: 0px;
    padding: 1em 1em 1em 1em;
}

#top p
{
    margin: 0px;
    font-size: 1.2em;
    padding: 0em 1em 1em 1em;
}

.weblogtitle
{
    padding-top: 10px;
    margin: 0px;
}
/* Navigation Bar*/
#nav
{
    margin-top: 0em;
    text-align: left;
    BORDER-BOTTOM: 2px solid gainsboro;
    BORDER-LEFT: 2px solid gainsboro;
    BORDER-RIGHT: 2px solid gainsboro;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}
 #nav ul
{
    color: #000000;
    padding: 0;
    list-style-type: none;
    margin: 0px;
}

#nav ul li
{
    display: inline;
}

#nav ul li a
{
    padding: 0.2em 1em;
    text-decoration: none;
    float: left;
    margin-top: 0px;
    border-right: 1px solid #CCCCCC;
    font-weight: normal;
}
#nav span
{
    padding-left: 1em;
}
#navstats
{
    text-align: right;
    color: #666666;
    font-size: 0.9em;
    padding: 0.5em 0em 0.5em 0.5em;
    float: right;
    width: 380px;
    margin-right: 0.5em;
}

/* Content -------------------- */

#content
{
    padding: 0em;
    width:769px;
    margin-top:0px;
    float: left;
}
p.date img
{
    vertical-align : middle;
}
p.date
{
    font-size : 0.8em;
    font-weight : bold;
    margin : 0px;
    padding : 0px;
    color : #666666;
    text-align: right;
    text-transform: none;
}
p.date a
{
    color: #666666;
}
.post
{
    padding: 0px;
    margin: 0px 0px 10px 5px;
    BORDER: 1px solid gainsboro;
}

.post img
{
    padding: 3px;
    border: 1px solid #CCCCCC;
    margin: 5px 5px 5px 5px;
}

.posthead
{
    padding: 3px 3px 3px 3px;
    font-size: 0.9em;
    margin: 0px;
    font-weight: normal;
    background-color: whitesmoke;
    border-bottom: 1px dashed Gainsboro;
}

.postbody
{
    font-size: 1em;
    padding: 10px 5px 10px 5px;
    line-height: 150%;
}

p
{
    font-size:1em;
    line-height:200%;
}

.posthead h2
{
    font-size: 1.2em;
    font-weight: normal;
    margin: 0px;
    padding: 0.5em 0em 0em;
    letter-spacing: 1px;
    text-transform: none;
}

.post h5
{
    font-size: 1em;
    margin: 0px 0px 0.5em;
}
.postfoot
{
    margin: 0px;
    color: #000000;
    font-size: 1em;
    padding: 1px 3px 1px 3px;
    background: whitesmoke;
    TEXT-ALIGN: right;
    border-top: 1px dashed Gainsboro;
}


#comments h4 span
{
    color : #999;
}

#comments h4
{
    margin : 0px;
    font-size : 0.9em;
}

/* Sidebar -------------------- */

#sidebar-a
{
    float: left;
    width: 180px;
    margin: 0 0 0 0.5em;
    padding: 0.5em;
    font-size: 1em;
    border-left: 1px solid #CCCCCC;
}

#sidebar-a h3
{
    color: #666666;
    text-transform: none;
    letter-spacing: 2px;
    font-size: 1em;
    margin-top: 2em;
    border-bottom: 1px solid #CCCCCC;
    margin-left: 0em;
}

#sidebar-a ul
{
    list-style : none;
    margin : 0px;    
    padding : 0px;
    margin-left : 8px;
    margin-bottom : 10px;
    width: 100%;
}

#sidebar-a li 
{
    margin-top: 6px;
}

#sidebar-a a:active,
#sidebar-a a:visited,
#sidebar-a a:link
{
    text-decoration : none;    
    margin-right : 0px;
    padding : 2px;
}

#sidebar-a a:hover
{
    text-decoration: underline;
}
#calendar
{
    text-align: center;
    margin-bottom: 1em;
}
#news
{
    width:180px;
    margin-bottom: 0.5em;
    border: 1px dotted #cccccc;
    padding: 5px;
}

.imageFrame
{
    margin-top:20px;
    padding-top:10px;
    position:absolute;
}

.RecentComment ul li
{
    border-bottom:1px dashed gainsboro;
}

/* Footer --------------------- */

#footer
{
    clear: both;
    padding: 5px;
    font-size: 0.9em;
}        
        
/* ----------------------- Ends */        

.Cal
{

    width:180px;
    font-family:Arial;
    font-size: 12px;
    margin-top:10px;
    margin-bottom:10px;
    height:180px;
}

.CalTitle
{
    background-color :#FFFFFF;
    font-family:Arial;
    font-size: 13px;
    margin-left : 0px;
    padding : 0px;
    height:100%;
    font-weight:bold;
}

.CalOtherMonthDay
{
    color:#808080;
}

.CalSelector
{
    background-color:#CCCCCC;
}

a.CalNextPrev,a.CalNextPrev:link, a.CalNextPrev:visited, a.CalNextPrev:active
{
    color:#FFF;
}

.CalNextPrev
{
    color:#FFF;
}


.CalDayHeader
{
    background-color:#EFEFEF;
    font-weight:bold;
}

.CalSelectedDay
{
    background-color:#CCCCCC;
}

.CalWeekendDay
{
    background-color:#EFEFEF;
}

.CalTodayDay
{
    background-color:#DDDDDD; 
}