blogger template就是这样出来的 (2)

如我承诺的一样,
我现在要解决main body的问题.

嘉俽对content wrapper有很多疑问,
第一:她不懂如何改变content wrapper的宽度.
第二:她不知道如何让content wrapper有一层background.
第三:由于她遇到content wrapper的问题,所以她的blog现在不能对齐在中间.

首先,
请进入Edit HTML.
然后,
寻找这一段code的芳踪:
#content-wrapper {
width: 860px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px dotted $borderColor;
border-top: 0;
}
#main-wrapper {
margin-$endSide: 14px;
width: 564px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}
#sidebar-wrapper {
margin-$startSide: 14px;
width: 240px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}

如果找不到完全一样的,
你就找大概一样的.
反正它就是关于你的content wrapper, main wrapper和sidebar wrapper的code.

Content Wrapper:这是你的sidebar和main wrapper的总面积.
Main Wrapper:这是你的文章面积.
Sidebar Wrapper:这是放你的其他小部件的面积.

红色
这是你的每个部分的宽度.
你可以调整每个部分的大小,
如果你把sidebar和main调得比较宽,
你也必须让你的content变宽.
content是sidebar+main+margins
千万不要被数学搞砸你的部落格.

蓝色
这是你的content的背景.
如果你的部落格没有这层code,
就加上去吧~
背景的格式永远都是一样的:
background: #"颜色code" url(图片地址) repeat position-x position-y fixed;
颜色可以去找RGB color code chart或者使用photoscape的color picker查询.
图片url可以从图片上载网如photobucket,imageshack等等拿到.
repeat是重复,repeat-y是直线重复,repeat-x是横线重复,不用重复就不要打repeat.
position-x有right,left和center.
position-y有top,bottom何center.
fixed:你scroll到哪里图片都不会动,scroll:会跟着你的scroll变动方向.
如果只是用净色就只需要填 #FFFFFF 之类的color code.

浅紫色
这是你content wrapper的border.
border style有dashed,solid,dotted等等.
万一你有其中一边不要border,
你就能用一下方法:
border-top/right/left/bottom: 0;
选择你不要border的部分,
不要四个都放下去.
如果全部都不要border,
就直接删掉有关border的code.

橙色
一般上,
startside是左边,
endside是右边.
所以你要改变方向就对调这两个选项就行了.
深橙色的是main和sidebar离content wrapper边缘的距离,
可以自行调整.
可是你一增加这个margin的距离,
就必须either减少main和sidebar的面积,
or增加content wrapper的面积.
(这是考你的数学天分)

我知道有很多人还是觉得净色很单调.
我不反对大家在content wrapper上面也放图片,
但是请你们选择颜色较浅的图片,
千万不要让别人看不到你的字体.
要不然我们被逼control-A来读你的blogpost会很辛苦.