You are here

实例:修改drupal Garland主题(1)

g089h515r806 的头像
Submitted by g089h515r806 on 星期二, 2008-09-16 14:03

好了,让我们做个试验。请确定你已经将新主题设为了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'),
  ),

相关链接: http://drupal.org/node/196007 , Think in Drupal

Drupal版本: