A PEAR CMS: Examining the Code - Styles
(Page 3 of 4 )
The first of the styles that are declared just defines some of the general look and feel for the scripts that are going to be used by it:
body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
.header{
font-size:18px;
font-weight:bold;
color:#003366;}
.maintxt{
font-size:12px;
}
For example, the overall font style for the site will be Verdana, and if that font is not available, then Geneva or any of the others that are listed should be used. The styles that are defined as “header” will be applied to all the headings in the scripts. And the “maintxt” style will be used when displaying the body of an article.
Many of the styles that are defined describe where they will be used. For example, the style that is defined as the “title” will be applied to the title of an article. The one defined as copy is applied to the copyright section of the template, and so forth:
.title{
font-size:12px;}
.nav{
font-size:10px;
font-weight:bold;}
.auth{
font-size:10px;
color:#0000FF;
font-weight:bold;}
.copy{
font-size:8px;
text-align:right;
color:#003366;
}
The options style is applied to any options that may be used in the scripts. It has the following definition.
.options{
font-size:14px;
font-weight:bold;
color:#0033FF;}
.bord{
border:1px solid #FF0000;}
The bord style is responsible for the red border that you see when you look at the pages of the application. The header1 style is a style that I defined to act as a secondary header style:
.header1{
font-size:18px;
font-weight:bold;
color:#003366;
background-color:#FF6699;}
The section style is responsible for styling the section part of the navigation panel. It has the following styles:
.section{
border:1px solid #333333;
font-weight:bold;
color:#003366;
background-color:#FF6699;}
The navbord style gives borders to the navigation panel of the site. It has the following style:
.navbord{
border:1px solid #333333;
The entire application has only one template, with the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="pear.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" border="0" class="bord">
<tr class="header1">
<td colspan="2"><div align="center">Content Management System </div></td>
</tr>
<tr>
<td width="5%" valign="top"><!-- TemplateBeginEditable name="EditRegion4" -->nav<!-- TemplateEndEditable --></td>
<td width="95%" valign="top"><!-- TemplateBeginEditable name="EditRegion3" -->main<!-- TemplateEndEditable --></td>
</tr>
<tr class="copy">
<td colspan="2">©2008</td>
</tr>
</table>
</body>
</html>
Here’s how it looks:
Next: Edit Sections >>
More PEAR Articles Articles
More By David Web
