好了,让我们做个试验。请确定你已经将新主题设为了drupal默认主题了。
这里要做的就是为了,让读者更好的浏览你的站点。一个关键的建议就是让你的边栏元素和主内容区域区别开来。好的,让我们试着做一下:我们把我们所有的区块都使用Garland的 "header top"颜色作为背景色。记住,它的参考颜色为"#2385c2"。
.block {
background-color: #2385c2;
}
保存修改后的"style.css",并点击“保存设置”按钮。简单吧!所有区块的背景颜色都变了。
选择一个不同的颜色集。区块就会随着改变。很漂亮吧,不是么?
美中不足的是,区块中的文本的可读性不够强。你可能会认为,只需要在这里加行代码就可以了,比如color: #ffffff;(这可能对于基颜色还说得过去)。不过没有这么简单,除非用的都是最简单的区块。
像导航这样的区块,在它里面都使用了更多的样式名字。主要有"menu" 和"leaf."所以我们需要添加几行:
.block {
background-color: #2385c2;
color: #ffffff;
}
.block li.leaf a {
color: #ffffff;
}
不错!基本上差不多了。但是它还没有涉及到可扩展的元素。因为,这些元素使用了不同的名字:
.block {
background-color: #2385c2;
color: #ffffff;
}
.block li.leaf a {
color: #ffffff;
}
.block li.collapsed a {
color: #ffffff;
}
.block li.expanded a {
color: #ffffff;
}
好了!我的Drupal站点看起来比过去强多了。
现在,让我们加点更有趣的。比如,这些区块的边界?让我们选择颜色选择器的"link"颜色。它的参考颜色为"#027ac6."
.block {
background-color: #2385c2;
border: 3px ridge #027ac6;
color: #ffffff;
}
.block li.leaf a {
color: #ffffff;
}
.block li.collapsed a {
color: #ffffff;
}
.block li.expanded a {
color: #ffffff;
}
精彩吧!好了,让我们做最后一个修改,其它都留给你自己发挥了。
我想让book导航更突出一点,这样就能吸引更多的眼球了。在前面,我们为所有的区块设置了背景色,那么我们可不可以为book导航区块的背景颜色设为"header bottom"颜色呢?它的参考颜色为"#5ab5ee."
.block {
background-color: #2385c2;
border: 3px ridge #027ac6;
color: #ffffff;
}
.block li.leaf a {
color: #ffffff;
}
.block li.collapsed a {
color: #ffffff;
}
.block li.expanded a {
color: #ffffff;
}
#block-book-0 {
background-color: #5ab5ee;
}
现在你站点的外观更与众不同了,而且你还学会了如何使用参考颜色来自动的保持站点颜色的统一。尽管这里只使用了4种颜色,但是却展示不少的CSS技巧。好玩吧。
下面是对上面的总结。
/* Blocks */
.block {
border:3px ridge #2385c2;
background-color: #5ab5ee;
color: #ffffff;
font-size: 1.00em;
line-height: 100%;
}
.block .leaf {
color: #ffffff;
}
.block .leaf a {
color: #ffffff;
}
.block li.collapsed a {
color: #ffffff;
}
.block .expanded {
background: #2385c2;
color: #ffffff;
}
.block .expanded a {
background: #2385c2;
color: #ffffff;
}
.block .active {
border:2px outset #027ac6;
color: #ffffff;
}
/* Books - reverse scheme */
#block-book-0 {
border:3px ridge #5ab5ee;
background-color: #2385c2;
color: #ffffff;
font-size: 1.00em;
line-height: 110%;
}
#block-book-0 .active {
border:2px outset #0072b9;
}
/* Special blocks */
#block-event-1 a {
color: #ffffff;
}
#block-event-1 .more-link a {
padding-right: 50px;
font-weight: bold;
}
其它
也不费太多功夫了,我在这里列出其它的颜色集,仅作参考:
$info = array(
// Pre-defined color schemes
// base, link, header top, header bottom, text => name
'schemes' => array(
'#0072b9,#027ac6,#2385c2,#5ab5ee,#494949' => t('Blue Lagoon (Default)'),
'#464849,#2f416f,#2a2b2d,#5d6779,#494949' => t('Ash'),
'#55c0e2,#000000,#085360,#007e94,#696969' => t('Aquamarine'),
'#d5b048,#6c420e,#331900,#971702,#494949' => t('Belgian Chocolate'),
'#3f3f3f,#336699,#6598cb,#6598cb,#000000' => t('Bluemarine'),
'#d0cb9a,#917803,#efde01,#e6fb2d,#494949' => t('Citrus Blast'),
'#0f005c,#434f8c,#4d91ff,#1a1575,#000000' => t('Cold Day'),
'#202020,#0633a7,#000000,#808080,#000000' => t('Gothic'),
'#c9c497,#0c7a00,#03961e,#7be000,#494949' => t('Greenbeam'),
'#cf68a2,#c71a72,#fbbcde,#d84b7e,#9b3b3b' => t('In The Pink'),
'#ffe23d,#a9290a,#fc6d1d,#a30f42,#494949' => t('Mediterrano'),
'#788597,#3f728d,#a9adbc,#d4d4d4,#707070' => t('Mercury'),
'#5b5fa9,#5b5faa,#0a2352,#9fa8d5,#494949' => t('Nocturnal'),
'#7db323,#6a9915,#b5d52a,#7db323,#191a19' => t('Olivia'),
'#12020b,#1b1a13,#f391c6,#f41063,#898080' => t('Pink Plastic'),
'#d48440,#d20404,#a1443a,#f6352c,#871d12' => t('Raging Bull'),
'#29996a,#1f563f,#0ce4cc,#02ca90,#2a8d8a' => t('Seascape'),
'#b7a0ba,#c70000,#a1443a,#f21107,#515d52' => t('Shiny Tomato'),
'#18583d,#1b5f42,#34775a,#52bf90,#2d2d2d' => t('Teal Top'),
'#6b91ff,#c97b26,#fdb9d5,#fa6196,#1a1919' => t('Victorian'),
'#ffee00,#3e8bb1,#f6e304,#91fd0d,#419d39' => t('Wake Up Call'),
'#f1db09,#bd8a05,#fbf498,#faec14,#6e4308' => t('Yellow Pages'),
),