2. Customizing the Design

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.

2.1. Customizing Header and Footer Files

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.

Global and Local Headers/Footers

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:

  1. Global Header

  2. Local Header

  3. Content generated by ConPresso (articles 1 to n)

  4. Local Footer

  5. Global Footer

Using Global Headers/Footers

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]Note

It is possible to make changes to the ".dist" files. For the reasons named above it is not advisable though.

Using Local Headers/Footers

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.

Using Stylesheets

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]Note

Of course you can use more than one stylesheet. You will just have to embed them into the header file.

2.2. Headers and Footers Based on the Example of ConQuarium AG

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&ouml;ne - 
    M&uuml;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&ouml;ne GmbH &amp; Co. KG, 48149 M&uuml;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="&nbsp;&nbsp;" 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'])
                                .'">&raquo; Login</a>';
                        } else {
                            echo '<br />';
                            echo '<a href="member.php?action=logout&amp;rubric='
                                .htmlspecialchars($cpoRubric['id'])
                                .'">&raquo; 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">&nbsp;</div>

</div>

<div id="footer">
    Copyright &copy; 2000-<?php echo date('Y'); ?> &#8226; 
    <a href="http://www.bartels-schoene.de" title="Bartels.Schšne" 
        target="_blank">Bartels.Schšne</a> &#8226; 
    All Rights reserved &#8226; 
    <a href="<?php echo BASE_REL.'impressum.php'; ?>">Impressum</a>
</div>

</div></body>
</html>

<!-- end of _cfg/global_footer.php -->

[Note]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.

2.3. Frontend Navigation

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.

Static Navigation

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”.

Dynamic Navigation

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

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]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;
 

navi

The array parameter navi is optional. ConPresso will assign it to the current navigation (complete current navigation path) if an empty value is submitted.

navi is identical with the array produced by the use of the function getNavigation.

activeRubric

The integer parameter activeRubric corresponds with the ID of the currently active rubric. If the value 0 is submitted, the active rubric will be use by default ($GLOBALS['cpoRubric']['id']).

levels

The integer parameter levels can set the number of navigation levels to be displayed. The default value is 99 levels. This value is required, for example, if visitors of a page should only see the first two levels of a navigation that actually has three or more levels.

parent

The integer parameter parent allows the output of navigations that are not based on the root element. The default value 0 bases the navigation on the root element.

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.

activeOnly

The boolean parameter activeOnly works as a switch for displaying either all (sub)elements or only the active one. The default value "false" will display all levels. The value "true" will facilitate the display of currently active elements only. Subelements of other levels will not be displayed in that case.

Example 15.7. Output of complete navigation structure

printNavigation();

Example 15.8. Output of the first navigation level only

printNavigation('', 0, 1, 0, false);

Example 15.9. Output of the first navigation level only

printNavigation('', 0, 2, 0, false);

Example 15.10. Output of the currently active navigation element

printNavigation('', 0, 99, 0, true);

The Function getNavigation
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.

The Function getActiveElements()
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.

navi

The array parameter navi is optional. If an empty value ("") is submitted it will produce the current navigation. It corresponds with the array generated by the function getNavigation.

activeRubric

The integer parameter activeRubric corresponds with the ID of the currently active rubric. If the value 0 is submitted, the active rubric will be uses as a default value ($GLOBALS['cpoRubric']['id']).

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]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.