6 样式调整

作者:老葛,北京亚艾元软件有限责任公司,http://www.yaiyuan.com

样式调整


Drupal版本:

6.1 Menu block​样式调整

作者:老葛,北京亚艾元软件有限责任公司,http://www.yaiyuan.com

现在,我们简单的调整一下左边区块的样式,向custom.css里面添加以下CSS代码:

#main #block-menu-block-1 h2{

    background: none repeat scroll 0 0 #E9E9E9;

    border-bottom: 1px solid #D5D5D5;

    border-top: 1px solid #F2F2F2;

    font-size: 100%;

    font-weight: bold;

    text-align: center;

}

#main #block-menu-block-1 ul li {

list-style-image: none;

    list-style-type: none;

}

 

#main #block-menu-block-1 ul li  a {

    color: #222222;

    text-decoration: none;

}

#main #block-menu-block-1 ul li  a.active {

    color: #0041A0;

}

调整后的效果:

1.png 

不是很专业,但是比没有样式的时候,好了很多。


Drupal版本:

6.2 对面包屑和标题样式调整

作者:老葛,北京亚艾元软件有限责任公司,http://www.yaiyuan.com

对面包屑和标题的样式,也做一下调整,添加以下CSS代码:

#main #content .breadcrumb{

  margin-top: 20px;

  margin-left: 20px;

  margin-bottom: 10px;

}

 

#main #content  #page-title{

  text-align: center;

  margin-top: 20px;

  margin-bottom: 20px;

}

#main  a {

    text-decoration: none;

}

调整后,效果如下:

1.png


Drupal版本:

6.3 调整页脚区域

作者:老葛,北京亚艾元软件有限责任公司,http://www.yaiyuan.com

现在,页脚区域还是比较单薄了,除了“Powered by Drupal”以外,什么都没有。我们首先创建一个“Footer menu”菜单,并为它添加以下菜单项:

1.png 

接着,导航到区块管理界面,添加一个静态区块“版权所有”,并将它放到页脚区域里面。将“Footer menu”菜单对应的区块,也放到页脚区域中。将“Powered by Drupal”区块禁用。去除“Footer menu”和“版权所有”的区块标题。现在是这个样子的:

2.png 

而且是居左显示。我们需要在样式上做出调整。向custom.css文件中添加以下代码:

#footer{

  background-color: #F6F6F2;

  font-size: 0.92307em;

  line-height: 1.5em;

  padding: 30px 0 20px;

}

 

#footer .block{

  color: #666666;

  text-align: center;

}

#footer ul.menu {

  margin-bottom: 10px;

  overflow: hidden;

}

#footer ul {

  clear: both;

  list-style: none outside none;

  text-align: center;

  padding: 0 0 0 0px;

}

 

#footer li {

  display: inline;

}

#footer a {

  font-size: 14px;

  margin: 0 10px;

text-decoration: none;

}

 

#footer li.leaf {

  list-style-image: none;

  list-style-type: none;

  margin: 0;

  padding: 0;

}

此外,对于版权所有区块,我们为它加上两个<p>标签。

3.png 

上面的那段CSS代码其实是从网上书店那个例子中复制过来的。最后,样式基本符合预期的要求:

4.png 

说到站点地图了,其实我们可以创建一个普通的page页面,手工的编辑好站点地图后,放进去。还有一个办法,是安装Site map模块,由这个模块生成站点地图页面。生成好了以后,我们可以将这个页面上面的内容复制下来,然后粘贴到一个静态页面中来,这样我们就可以禁用这个模块了。



Drupal版本: