Monday, August 27, 2007

我的NEO我做主

NEO模板到目前为止还是我的最爱,使用neo模板已经有一段时间了,经过我的修改现在的NEO似乎变得更加的有亲和力,此模板的作者的确厉害,当我打开模板开始研究的时候我才发现他制作的时候非常的周到,现在我将这一过程和我所有的朋友们分享。

Blogger Template Style
Name: Neo
Designer: Ramani
Based on: Minima (by Douglas Bowman)
License: Creative Commons (Attribution, Share Alike - http://creativecommons.org/licenses/by-sa/2.5/)
URL: hackosphere.blogspot.com
Date: 19 Dec 2006
是作者的签名,每一个作者都会这样。


/* Variable definitions
====================
type="color" default="#fff" value="#191919">
type="color" default="#333" value="#ffffff">
type="color" default="#58a" value="#2D6E89">
type="color" default="#666" value="#ffffff">
type="color" default="#999" value="#ffffff">
type="color" default="#c60" value="#78B749">
type="color" default="#ccc" value="#ffffff">
type="color" default="#999" value="#808033">
type="color" default="#666" value="#808033">
type="color" default="#999" value="#ffb2be">
type="font" default="normal normal 100% Georgia, Serif" value="normal bold 111% Arial, sans-serif">
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 86% Trebuchet, Trebuchet MS, Arial, sans-serif">
type="font"
default="normal normal 200% Georgia, Serif" value="normal bold 239% Arial, sans-serif">
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal bold 134% Georgia, Times, serif">
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal bold 107% Arial, sans-serif">
*/

/* Use this with templates/template-twocol.html */


这一块是我现在的颜色和字体的设置,让我费尽心思搭配颜色,刚好那段时间经常用QQ和大名鼎鼎的色彩斑斓聊天,他给我出了好多主意,并发给我一个非常好的颜色版,那这一部分可以在blogger后台字体与颜色中自己调整包括字体类型字体大小,后面可以自定义颜色,类似#000000这种代码就是现在的16进制颜色代码,#000000就是黑#ffffff就是白,搜索引擎中输入颜色代码可以搜索的到。
/* Header
------------------------------------------------
*/

#header-wrapper {
width:950px;
margin:0 auto 10px;
border: solid #e6e6e6;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: url();
}

#header {
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:1000px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
这一段讲述的关于你的header,就是博客标题那个框框,你可以在这里修改框框的宽度,长度,框架颜色,以及通过一个图片链接为此模板添加一个banner。

/* Outer-Wrapper
------------------------------------------------ */
#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
background: url();
}

#main-wrapper {
width: 510px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
margin-left: 20px;
}

#sidebar-wrapper {
width: 170px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 230px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
margin-left: 10px;
}

#post {
padding: 0 20px 0 20px;
background: #000000;
border: solid #cc0000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

#LabelList {
margin-top: 10px;
padding: 0 5px 0 10px;
border: solid #ffffff;
background: #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

#LabelDisplay {
margin-top: 10px;
padding: 0 5px 0 10px;
border: solid #ffffff;
background: #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)} #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
头顶部分过后。现在是两个侧边栏和你的post部分,即:标签和rss那一栏,最新文章和cbox那一栏,和文章那一栏,叫做三栏。三道总共加起来的宽度应该和头顶的950相吻合,不然就会出现文章部分的框架变到标签和最新文章的底部,可以调整方向,你可以让标签那一道变到右边,文章部分变到中间,而左边仅仅只有最新文章,总之这三栏可以任意的调整出你自己想要的效果,包括左右,上下,但是一定要和头顶的尺寸吻合,作者做模板的时候为了大局着想,把尺寸调到了最大,导致我们看起来非常的大,充满了整个浏览器,你可以选择自己的大小和方位,(我认为大大的比较舒服,有点欧洲包豪斯建筑的效果,大大简简单单的线条)三个栏,在这一段代码种你可以选择他们的边框颜色(用十六进制颜色代码)也可以选择他们各自的背景颜色。这就是简单的修改css。
/* Comments
------------------------------------------------ */
#comments {
background: #cc0000;
border: solid #ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
padding: 0 20px 0 20px;
color: #000000;
background: #fcf08a;
}
#comments-block .comment-body {
margin:.25em 0 0;
padding: 0 20px 0 20px;
background: #000000;
}
#comments-block .comment-body-author {
margin:.25em 0 0;
padding: 0 20px 0 20px;
background: #000000;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

.feed-links {
clear: both;
line-height: 2.5em;
}
这一段是修改文章框架下面评论部分样式的代码,可以选择他么的背景颜色框架颜色,字体颜色以及属于各自部分颜色不同的代码,从博客中可以看到我的颜色搭配。
]]>之后就是普通的页面元素的代码

类似这样每一个博客都会有,定义着博客每一个页面元素。

1 comment:

Geuro said...

blogcrowd
是什么东西啊?