ConPresso supports two techniques for customizing the design of a project.
The first one consists in modifying the header and footer files that enclose the article output of ConPresso. Any design is possible, just as it is the case with projects not based on a Content Management System.
For this way of customizing there are two kinds of headers and footers: global headers and footers that influence the project as a whole and local headers and footers that have an impact on individual rubrics only. Numerous applications in internet projects make use of the header and footer system. Experienced internet developers will be familiar with it. By adapting header and footer files you can control the whole look of a project.
The other technique of customizing the design consists in formatting the output of ConPresso articles. For that purpose ConPresso provides a template-editor that can be used for creating any number of article-templates that editors can choose from.
As explained elsewhere, the rubric settings also influence the graphical appearance of your project. In the rubric settings you can specify which article-templates should be available in a rubric or the number of articles that should be displayed on the rubric-page in the frontend, for example.
The graphic customization of the frontend with ConPresso can be seen as a combination of Section 2.1, “Customizing Header and Footer Files”, Section 2.1, “Edit Rubric Settings” and Chapter 11, Templates. These three means of customizing combined you have an abundance of possibilities to individualize the frontend design of your project.
As header and footer files provide the widest scope for customizing, the following sections will deal with this aspect primarily.
Customize header and footer files to add the elements that enclose the contents of your ConPresso project in the frontend to the design of your pages. These elements can be e.g. images, backgrounds, flash animations and other functions. Header and footer files can contain HTML code as well as codes of other script languages (e.g. Javascript, PHP). This makes them extremely flexible and allows for all kinds of customization.
ConPresso distinguishes global and local headers and footers. The difference between both is that changes that you are making to the global header and footer files will have an impact on the whole project while changes to local headers and footers will only influence rubrics based on a specific rubric directory.
The output of headers/footers adheres to the following sequence:
Global Header
Local Header
Content generated by ConPresso (articles 1 to n)
Local Footer
Global Footer
You will find global header and footer files in the directory
_cfg/
within the
ConPresso directory. There are named:
global_header.php.dist
(Global Header)
global_footer.php.dist
(Global Footer)
You can modify these files as you like and store them as global_header.php
and
global_footer.php
in the same directory
(conpresso/_cfg/
) again.
Thus you will remove the additional file extension ".dist" from both files. Before you modify them they only contain a sparsely formatted message text that informs you that they are the global header and footer files.
The additional file extension ".dist" stands for "distributed". By renaming the files you make sure that the changes you have made to the header and footer will not be overwritten when you update ConPresso, for instance, as the ConPresso archive only contains the files
global_header.php.dist
and
global_footer.php.dist
, but not the files
global_header.php
and
global_footer.php
.
Note | |
---|---|
It is possible to make changes to the ".dist" files. For the reasons named above it is not advisable though. |
In contrast to global header and footer files, local header and footer files facilitate the rubric specific customization. Local headers and footers are located in the rubric directories (e.g. conpresso/_rubric
).
The fact that you can select a rubric directory for each rubric in the rubric settings also implies that you can use different headers and footers for different rubrics as well.
You have to modify these files to give a rubric a look that is different from the rest of your project. For more information on selecting a rubric directory please read Section 2.2, “Edit Basic Rubric Settings”.
The files are delivered as:
_local_header.php.dist
(Header of the Rubric)
_local_footer.php.dist
(Footer of the Rubric)
When you have made your changes please save these files without the additional file extension ".dist" as _local_header.php
and
_local_footer.php
.
ConPresso uses a stylesheet to format articles. The directory
conpresso/_cfg
contains a file named style.css.dist
that has the file extension ".dist" for distributed just like the header and footer files that you used as a basis for your changes. Please remove the file extension ".dist" and save the file as style.css
.
Note | |
---|---|
Of course you can use more than one stylesheet. You will just have to embed them into the header file. |
The following example will illustrate the customization of a ConPresso project. Look for the website of the ConPresso demo company, "ConQuarium AG", at ConQuarium AG-Website, and see the outcome of the customization.
As an easy example we have selected the product page of ConQuarium AG. The graphic designer has provided a design for the website. The layout of the product page looks like this:
Based on the graphic design we have programmed a static page in HTML. This programmed page contains a mixture of graphical elements, CSS and HTML code. Combined and programmed properly this page should come as close as possible to the original graphic design.
To realize the project with ConPresso the HTML code has to be processed: it has to be divided into the elements ConPresso needs for the output of a page: header, content and footer. For more information on these elements please read the section called “Global and Local Headers/Footers” beschrieben.
In order to divide the HTML code into these three parts you have to look for where the content starts and ends. Everything preceding the content has to be placed in the global or local header files of ConPresso.
In the case of the ConPresso demo company "ConQuarium AG" this division looks as follows:
Example 15.1. Global Header of Demosite
<!-- start of _cfg/global_header.php --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title> ConQuarium AG: <?php echo htmlspecialchars($cpoRubricSettings['title']); ?> - ConPresso Democompany by Bartels.Schöne - Münster - Internetagentur - Content Management </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Revisit" content="After 7 days" /> <meta name="page-topic" content= "Demosite for the Content Management System ConPresso" /> <meta name="author" content= "Bartels Schöne GmbH & Co. KG, 48149 Münster, Germany" /> <meta name="identifier-URL" content="http://www.conquarium.de/" /> <meta name="robots" content="all" /> <meta name="Language" content="Deutsch" /> <meta name="Keywords" content= "ConQuarium, ConPresso, Content Management System" /> <meta name="Description" content= "ConQuarium AG is the demo company for the Content Management System ConPresso" /> <link rel="stylesheet" type="text/css" href="<?php echo BASE_REL.'conquarium.css'; ?>" /> </head> <body><div id="rahmen"> <div id="sitenavi"> <ul> <li style="background: none;">Other Websites:</li> <li> <a href="http://www.conpresso.de" title="ConPresso" target="_blank">ConPresso</a> </li> <li> <a href="http://community.conpresso.de" title="ConPresso Community" target="_blank">ConPresso Community</a> </li> </ul> </div> <div id="header"> <div class="logo"> <a href="<?php echo BASE_REL.'index.php'; ?>" title="Startseite"><img src="<?php echo BASE_REL.'images/logo.gif'; ?>" alt="Logo of ConQuarium AG" style="width: 203px" /></a> </div> <div class="search"> <form method="get" action="../mod_search/index.php"> <input name="action" value="search" type="hidden" /> <input name="rubric" value="" type="hidden" /> Suche: <input name="q" title="Suchfeld" class="input" style="width: 180px;" value="" type="text" /> <input value=" " class="submitsearch" type="submit" /> </form> </div> <div id="menu"> <?php printNavigation('', 0, 1); ?> </div> </div> <div id="content"> <div id="right"> <div class="rightboxblumen"> <div class="spacer"> <?php $ae = getActiveElements(); if (isset($ae[1])) { $n = getNavigation(); foreach ($n as $k=>$v) { if ($v['id']!=$ae[1]) continue; if ($v['childs']<=0) break; echo '<h3>'.htmlspecialchars($v['caption']).'</h3>'; } printNavigation('', 0, 99, $ae[1]); if ($ae[1]==11) { if (empty($_SESSION['SID_log_login_id'])) { echo '<br />Dear ConQuarium-Partner,'; echo '<br />the Partner section is persona-'; echo '<br />lized. Please log in to'; echo '<br />view the information provided'; echo '<br />for you!<br /><br />'; echo '<a href="member.php?rubric=' .htmlspecialchars($cpoRubric['id']) .'">» Login</a>'; } else { echo '<br />'; echo '<a href="member.php?action=logout&rubric=' .htmlspecialchars($cpoRubric['id']) .'">» Logout</a>'; } } } ?> </div> <object data="<?php echo BASE_REL.'flash/blumen.swf'; ?>" type="application/x-shockwave-flash" width="251" height="128"> <param name="movie" value="<?php echo BASE_REL.'flash/blumen.swf'; ?>" /> <param name="quality" value="high" /> <param name="bgcolor" value="#cad5e1" /> </object> </div> <div class="rightboxschatten"> <a href="<?php echo BASE_REL.'_admin/index.php'; ?>" target="_blank" title="ConPresso Backend-Login">ConPresso Backend Login</a> </div> </div> <div id="left"> <!-- end of _cfg/global_header.php -->
Some rubrics on this website differ in detail from each other. Therefore the header has to be divided into the global header, which is the same for all rubrics, and the local header, which can be different from rubric to rubric.
The website of the ConPresso demo company has two differently designed rubric-pages. The general design of the pages is the one you can see above, but the welcome page, for instance, looks different. On that page the text is placed in a dark blue box.
Here, only the general local header is shown, but you can find the local header for the layout "darkblue" in the ConQuarium AG archive.
Example 15.2. Local Header of Demosite
<!-- start of RUBRIC/_local_header.php --> <?php if (strstr($_SERVER['PHP_SELF'], 'member.php')) { ?> <div class="leftboxhighlightedtop"><!-- --></div> <div class="leftboxhighlighted"> <p>ConQuarium AG has 4 Partner Companies divided into the groups "Standard-Partner" with members Partner A and Partner B and "Premium-Partner" with members Partner C and Partner D.</p> <p>Which articles are displayed depends on the group-membership of the partner that is logged in. To log in please use the following login data. </p> <table> <tr> <td><strong>Logins:</strong> </td> <td>"PartnerA", "PartnerB", "PartnerC" or "PartnerD"</td> </tr> <tr> <td><strong>Password:</strong> </td> <td>"test"</td> </tr> </table> <p><strong>While you are testing the personalization please see to it that you are not logged in as an editor!</strong></p> </div> <div class="leftboxhighlightedbottom" style="margin-bottom: 1em;"><!-- --></div> <?php } ?> <div class="inhaltrandtop"></div> <div class="inhalt"> <?php echo '<h1>'.htmlspecialchars($cpoRubricSettings['title']).'</h1>'; ?> <!-- end of RUBRIC/_local_header.php -->
The content section of the website is embedded between the header and footer sections. ConPresso displays articles with layouts based on an article-templates in this content section.
Splitting off local and global footers works similar to splitting off headers. Here only the general local footer is shown. You will find the local footer of the layout "darkblue" in the ConQuarium AG archive.
Example 15.3. Local Footer of Demosite
<!-- start of RUBRIC/_local_footer.php --> </div> <div class="inhaltrandbottom"></div> <!-- end of RUBRIC/_local_footer.php -->
Example 15.4. Global Footer of Demosite
<!-- start of _cfg/global_footer.php --> <div class="leftboxhighlightedtop"><!-- --></div> <div class="leftboxhighlighted"> <h2>Attention: The ConQuarium AG is a fictitious company!</h2> <?php if ($cpoRubric['name']=='Home') { ?> <p>The following pages provide a playful way of getting to know the Content Management System <a href="http://www.conpresso.de/" title="ConPresso Website" target="_blank">ConPresso 4</a> so that you can explore the system in your won time.</p> <p>Please note that the ConQuarium website is reset every day at about 06:30 a.m. All changes that you might have made will be undone.</p> <?php } ?> <p>To make your changees please click on "<a href="../_admin/index.php" title="ConPresso Backend-Login" target="_blank">ConPresso Backend-Login</a>" and log in with the login data shown. Please bear in mind that other users can make changes as well.</p> <p>You <strong>really can't order</strong> the products described on this website!</p> </div> <div class="leftboxhighlightedbottom"><!-- --></div> <object data="<?php echo BASE_REL.'flash/fisch.swf'; ?>" type="application/x-shockwave-flash" width="300" height="155"> <param name="movie" value="<?php echo BASE_REL.'flash/fisch.swf'; ?>" /> <param name="quality" value="high" /> <param name="bgcolor" value="#dde5ec" /> </object> </div> <div class="clear"> </div> </div> <div id="footer"> Copyright © 2000-<?php echo date('Y'); ?> • <a href="http://www.bartels-schoene.de" title="Bartels.Schšne" target="_blank">Bartels.Schšne</a> • All Rights reserved • <a href="<?php echo BASE_REL.'impressum.php'; ?>">Impressum</a> </div> </div></body> </html> <!-- end of _cfg/global_footer.php -->
Note | |
---|---|
It is possible to make slightly different divisions than the ones described here. |
If you have proceeded as described and have saved the header and footer files, the rubric "Products" of the ConQuarium website will look as follows.
To fill the content section between header and footer you need articles and first of all article-templates that define the layout of these articles. For more information on article-templates and ConPresso's template system please refer to Chapter 11, Templates.
For the product page we have created the following article-template, for example:
Example 15.5. Code for product artricle-template
<!-- start of template "ConQuarium - Products" --> <div style="padding-bottom: 30px;"> <!-- ifSet: Produkt; --> <h2><!-- TEXT: Product; --></h2> <!-- /ifSet --> <!-- ifSet: Produktuntertitel; --> <p><!-- TEXT: Product Subtitle; --></p> <!-- /ifSet --> <!-- ifSet: image; --> <!-- IMAGE: image; --><br /> <!-- /ifSet --> <!-- ifSet: Product Teaser; --> <div><!-- HTML: Product Teaser; --></div> <!-- /ifSet --> <!-- ifSet: Product Detail; --> <p><!-- URL: More-Link; --></p> <!-- /ifSet --> </div> <!-- end of template "ConQuarium - Products" -->
For information on how to create article-templates please read Section 2, “Create Article Template”.
Other customizations relate to the integration of the page and rubric title. The insertion of the following PHP code into header or footer facilitates the output of these based on the rubric titlet:
Example 15.6. Output of Rubric Title in Header or Footer
<?php echo htmlspecialchars($cpoRubricSettings['title']); ?>
The following figure shows the result. All source codes reproduced in this manual are available in the ConQuarium AG archive, that can be downloaded from the ConPresso website.
Visitors of the frontend of your project will look for a navigation that guides them through its pages. With ConPresso two different approaches are possible for that purpose. You can either simply create a static navigation or you can create a dynamic navigation that allows you to manage the navigation elements with ConPresso. The following sections will explain both approaches.
Creating a static navigation is an easy way of providing the means to navigate through your project.
You should consider this possibility, particularly if you do not know much about PHP and CSS, for these scripting languages are required for creating dynamic navigations with ConPresso. Static navigations are based on the fact that an absolute call up of ConPresso rubrics is possible via links or by typing the URL into your browser.
Just link the navigation element, be it a text or a graphic, to the URL that calls up the rubric. The link follows this pattern:
http://www.example.com/conpresso/_rubric/index.php?rubric=Rubricname
Alternatively you can also use the rubric ID instead of the rubric name:
http://www.example.com/conpresso/_rubric/index.php?rubric=Rubric ID
Check the rubric settings for the URL of a rubric. If you use another rubric directory than the default directory "_rubric" you will have to adapt the URL accordingly. For more information please read Section 2.1, “Edit Rubric Settings”.
The disadvantage of static navigations compared to dynamic ones is that they are not based on the navigation structure created in the ConPresso backend that is described in Section 5, “Edit Navigation”. All changes have to be made manually by editing headers and footer with an HTML editor. For more information about modifying header and footer files please refer to Section 2.1, “Customizing Header and Footer Files”.
The frontend output of dynamic navigations and navigation structures created in the ConPresso backend as described in Section 5, “Edit Navigation” is facilitated by ConPresso functions. The functions printNavigation
,
getNavigation
and getActiveElements
can be applied in header as well as in footer files.
The function and design of a dynamic navigation can be customized flexibly, but for that you will need some PHP and CSS knowledge.
The function printNavigation
is the heart dynamic
navigations created with ConPresso. It facilitates the output of a dynamic navigation as an unsorted HTML list ("<ul>"). Sublevels of the navigation are produced as nested lists, so that a new nesting is added to the list with each new navigation level.
The source code for this output is:
<?php printNavigation('', 0, 99, 0, false); ?>
To format the list use Cascading Stylesheets (CSS).
Note | |
---|---|
ConPresso marks active navigation elements with the class ".active". |
The function and its parameters look as follows:
boolean printNavigation( | navi, | |
activeRubric, | ||
levels, | ||
parent, | ||
activeOnly) ; |
array navi
;int activeRubric
;int levels
;int parent
;boolean activeOnly
;
| The array parameter
|
| The integer parameter |
| The integer parameter |
| The integer parameter If you use another navigation ID, ConPresso will output the content from that navigation element onwards. Apply this parameter, for instance, if the highest navigation level consists of the elements "Deutsch" and "English" and a different navigation output is required for each language. |
| The boolean parameter |
Example 15.10. Output of the currently active navigation element
printNavigation('', 0, 99, 0, true);
array getNavigation( | ) ; |
The function getNavigation
produces the complete navigation in one array.
The content of this arrays corresponds with the parameter
navi
of the function
printNavigation
.
array getActiveElements( | navi, | |
activeRubric) ; |
array navi
;int activeRubric
;The function getActiveElements
produces an array of the active rubrics in the respective navigation level. That is the navigation path that leads to the rubric that is currently active.
The two delivery parameters are optional and do not have to be specified in most cases.
This function can be used to generate a breadcrumb menu, for example.
| The array parameter |
| The integer parameter |
Example 15.11. Using getActiveElements
$aE = getActiveElements(); foreach ($aE as $k=>$v) { if ($k=='X') continue; // skip non-existent "Level 0" echo "Level $k: Rubric: $v >> "; }
Note | |
---|---|
The current navigation path can only be identified if a rubric does not appear in different levels. If a rubric appears in different navigation levels, only the first navigation element will be found and attributed to the current rubric. If you want to use a rubric in different navigation levels, please use the option "External Link" described in Section 5.1, “Edit Navigation Element” to generate a link to that rubric. |