The stylecss File

Let's go back now and open up the style .css file we created at the beginning of this chapter. Use this file to define the various selectors we've placed in the page .tpl. php file. In addition to the selectors we've used to control the placement of the functionality, you will need to define various tags, classes, and IDs to specify fonts and style the information hierarchy. You may also wish to add decorative touches via some creative CSS. All the theme-specific styles should be defined in this document, along with any overrides of existing selectors.

Because an exhaustive CSS tutorial is beyond the scope of this text, we're not going to go through all the various styling. The file is included, below, for your review:

font: 13px/16px Verdana, Arial, Helvetica, sans-serif; color: #CCCCCC; background-color: #CCCCCC;

#page-wrapper {

position:relative; width:974px; text-align:left; background-color: #336699; border: solid 12px #FFFFFF; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;

a, a:link, a:visited { color: #FFFFFF; text-decoration: none;

a:hover, a:focus { color: #6191C5; text-decoration: underline;

hl.title, hl.title a, hl.title a:hover {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-weight: normal;

color: #6l9lC5;

margin:0;

margin-bottom:0px; line-height:normal;

font: 20px/20px Arial, Helvetica, sans-serif; color: #FFFFFF; margin: 0;

font: l8px/l8px Arial, Helvetica, sans-serif;

color: #FFFFFF;

padding: 2px 5px;

border: dashed lpx #FFFFFF;

font: l8px/22x Arial, Helvetica, sans-serif; color: #FFFFFF ¬°important; margin: 0; padding: 0;

#sidebar-left-region h2, #sidebar-left-region h3, #sidebar-right-region h2, #sidebar-right-region h3 {

font: l6px/l6px Arial, Helvetica, sans-serif; color: #FFFFFF; margin: 0;

font-weight: boid;

font-famiiy: Ariai, Heivetica, sans-serif;

#header-wrapper {

position: reiative; dispiay: biock; background-coior: #336699; height: 120px;

#header-region {

fioat: ieft;

margin: 12px 0 0 12px;

padding: 8px 12px;

border: soiid 10px #FFFFFF;

background-coior: #6699CC;

#sitename {

fioat: ieft; margin-top: 30px;

#sitename h1 a{

font: 28px/28px Arial, "Century Gothic", Verdana; coior: #FFFFFF; margin-ieft: 7px; text-decoration: none;

#searchbox {

fioat:right; width:210px; height: 2 0px; margin-top:85px; margin-right:0px;

#search .form-text { width: 13 7px; vertical-align: middle; border: 1px solid #6699CC;

#search .form-submit { padding: 0 3px; vertical-align: middle; border-top: 1px solid #FFFFFF; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid #FFFFFF;

.submitted {

color: #333333;

.submitted a{ color: #000000;

#primary-links {

position: relative; display: block; height:2 0px; width:974px;

border-top: solid 12px #FFFFFF; background-color: #666666;

#primary-links ul { padding:0; margin:0; list-style:none;

#primary-links ul li { display:inline;

#primary-links ul li a, #primary-links ul li a:visited { padding: 3px 10px 0 10px;

font: 10px/13px Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; float: right;

#primary-links ul li a:hover { color: #000000;

#secondary-links {

position: relative; display: block; height:2 0px; width:974px; margin-top: -12px;

border-bottom: solid 12px #FFFFFF; background-color: #666666;

#secondary-links ul { list-style: none;

#secondary-links ul li { display: inline;

#secondary-links ul li a, #secondary-links ul li a:visited { padding: 3px 10px 0 10px;

font: 10px/13px Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; float: right;

#secondary-links ul li a:hover { color: #000000;

#mission {

position: absolute; left: 113px; top: 6 0px;

#site-slogan {

position: absolute; left: 113px; top: 73px;

position: relative; width:auto; height: 100%;

border-top: solid 12px #FFFFFF; background-color: #336699;

#content-region-none {

padding: 12px 10px 10px 10px; position: relative;

#content-region-left { width: 743px;

padding:12px 0px 10px 10px; position: relative; float:left;

#content-region-right { width: 7 43px;

padding:12px 10px 10px 10px; position: relative; float:left;

#content-region-both { width: 53 3px;

padding:12px 10px 10px 10px; position: relative; float:left;

.content-title {

#sidebar-left-region{ position:relative; float:left; width:2 0 0px; padding: 0px 0 0 l0px;

#sidebar-right-region{ position:relative; float:right; width:2 0 0px; padding: 0px l0px 0 0;

#footer-region {

position:relative; width: auto; height:4 0px; margin:0 auto; clear:both;

border-top:l2px solid #FFFFFF;

float:right; padding: 8px;

#footer-text {

position:relative; display: block; height: 3 0px; float:left; color: #FFFFFF; font-size: l0px; line-height: 35px; left: l0px;

ul.primary {

border-bottom: solid 1px #18324B;

ul.secondary {

border-bottom: solid 1px #18324B;

ul.primary li.active a.active { background-color:#2B5986; border: solid 1px #18324B;

ul.primary li a {

background-color:#6699CC;

ul.secondary li {

margin-bottom: 5px;

#content-region-both table { width: 530px;

table thead {

color: #FFFFFF;

table tbody tr.odd, table tbody tr.odd td.menu-disabled{ background: #2B5986; border-bottom: solid 1px #336699;

table tbody tr.even, table tbody tr.even td.menu-disabled{ background: #2D5E8D; border-bottom: solid 1px #336699;

table tr td.region{

font-weight: normal; color:#FFFFFF; background: #6699CC;

ul.secondary li.active a.active {

border-bottom: solid 1px #18324B;

In addition to your theme-specific selectors, you may need to re-define

C^ the portions of the /modules/system/admin.css file that affect the administrator's interface.

While the vast majority of the selectors defined in our style .css are basic (we used a bare minimum for this example), you should note the following, which relate to the implementation of the three-column layout:

#content-region-none { padding: 12px 10px 10px 10px;

position: relative; }

#content-region-left { width: 7 43px;

padding:12px 0px 10px 10px; position: relative;

#content-region-right { width: 7 43px;

padding:12px 10px 10px 10px; position: relative;

#content-region-both { width: 53 3px;

padding:12px 10px 10px 10px; position: relative;

These selectors work together with the dynamic styling we applied to the main content column (<div id="content-region-<?php print $iayout ?>">)to create a center column that expands to fill either the right or left column when either of the sidebars carry no blocks. The styles, in other words, are critical to creating a template that can support a one-, two- or three-column layout.

The technique used to create the fluid columns structure is discussed below, in the section on Creating Dynamic CSS Styling.

0 0

Post a comment