Templates contain many elements. The most important elements are the CSS arrays and the embedded PHP code.
In different Mambo versions, different names have become ingrained for certain arrays. These arrays are also called classes in CSS. I would like to show you four examples. If a class that does not exist in the CSS file is called, nothing changes in the display. Because of the multiplicity of versions and extensions, you are always well advised to look at the HTML code to get an overview of the classes used.
Here you see the CSS definitions (Listing A.1) reflected in the head area and the respective areas on the website (Figure A.1). The CSS code is to serve as an example. Not all areas are provided with CSS examples. Look at the CSS files of predefined templates to find further examples:
.title {
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
color: #000000;
margin-left: 10px;
}
.button {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
font-size : 10px;
font-weight : bold;
background-color : #F0F0F0;
color : #000000;
border : 1px solid #CCCCCC;
}
Figure A.1: Head Area
Here you see the CSS definitions reflected in the menu area (Listing A.2) and in the respective areas of the website (Figure A.2):
table.moduletable th {
font-size : 11px;
font-weight : bold;
color : #000000;
text-align : left;
width : 100%;
letter-spacing: 2px;
text-indent: 5px;
padding-bottom: 3px;
}
a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
color: #ff6600;
text-align: left;
}
a.sublevel:hover {
color: #ff9e31; text-decoration: none;
}
a.mainlevel:link, a.mainlevel:visited {
display: block;
color: #ffffff;
font-weight: bold;
background-image: url(../images/menu_bgr.png);
background-repeat: no-repeat;
width: 95%;
text-indent: 15px;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 20px;
margin-bottom: 1px;
}
a.mainlevel:hover {
color: #333333;
}
.inputbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
background-color : #F0F0F0;
border : 1px solid #CCCCCC;
}
a:link, a:visited {
color: #ff6600;
text-decoration: none;
}
a:hover {
color: #ff3300;
text-decoration: underline;
}
Figure A.2: Menu Area
Here you see the CSS definitions (Listing A.3) reflected in the content area and in the respective areas of the website (Figure A.3):
.createdate {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #999999;
text-align : left;
}
.contentheading {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #ff9900;
text-align : left;
}
.small {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #999999;
text-decoration : none;
font-weight : bold;
}
.contentpane {
background : #dedede;
}
tr, td, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #333333;
}
Figure A.3: Content Elements
Here you see the CSS definitions (Listing A.4) reflected in the News overview and in the respective areas of the website (Figure A.4):
|
PHP code |
Action |
|---|---|
|
<?php
|
First line |
|
defined( ‘_VALID_MOS’ ) or die ( ‘Direct Access to this location, is not allowed.’ ); $iso = explode( ‘=’, _ISO ) echo ‘<?xml version="1.0" encoding="’. $iso[1] .’"?’ .’>’; ?> <!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">
|
Here, direct access to the file is suppressed and the correct XHTML header is defined |
|
HEAD | |
|
<?php mosShowHead(); ?>
|
Creation of the metatags is defined as in Global Configuration |
|
if ( $my->id ) {
initEditor()
}
|
Initialization of the WYSIWYG editor |
|
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
|
Specification of the correct content type |
|
<link href = "<?php echo $mosConfig_live_site; ?>/templates/rhuk_solarflare_ii/css /template_css.css" rel="stylesheet" type="text/css"/>
|
Setting of the CSS file |
|
BODY | |
|
<?php mosPathWay(); ?>
|
The path of the page |
|
mosLoadModules ( ‘[ort]’, [, $style])
|
Loading of the module at the position of 0 Module is displayed as a column in a table ( 1 Module is displayed horizontally in a cell. -1 Module is displayed without surrounding table. -2 Module is displayed in the barrier-free xMambo format ( |
|
mosCountModules( ‘[ort]’ )
|
Counting of the modules at position |
|
<?php mosMainBody(); ?>
|
Content area |
|
<?php include_once( $GLOBALS[ ‘mosConfig_ absolute_path’ ] . ‘/includes/footer.php’ ); ?>
|
Footer |
Table A.2: PHP Module in index.php