You are here: start » tips_and_tricks

Tips and Tricks

Here you'll find some tips and tricks how to customize CMSimple_XH.

Some more tips and tricks are listed in the CMSimple wiki. Please note that these tips and tricks do not necessarily fullfil the CMSimple_XH quality standards, and that they even might not be compatible with CMSimple_XH at all.

Intro Page

Sometimes one wants to have an intro page, which is reached by calling the domain directly, but that page should not be shown in the TOC. The solution is simple: just create a toplevel page as first page of the CMSimple_XH installation and hide it from the menu.

Custom 404 Error Page

When somebody browses to a page, that doesn't exist, CMSimple_XH sends the HTTP response code 404 and shows a respective page. Since CMSimple_XH 1.5 it's easy to present your own error page: just create a hidden toplevel page with the heading “404” and the desired contents. Then define the following function in userfuncs.php:

function custom_404()
{
    header('Location: http://example.com?404');
    exit;
}

Replace http://example.com with your base URL (i.e. the URL to reach the CMSimple_XH installation). Since CMSimple_XH you can use the following, which is more portable:

function custom_404()
{
    header('Location: ' . CMSIMPLE_URL . '?404');
    exit;
}

How to implement a custom 404 error page with older versions of CMSimple_XH is described in the CMSimple Forum.

Template Customization

With CMSimple_XH it is possible to select a different template for individual pages of your website. So it's always possible to duplicate the template, and switch it in the page tab.

FIXME Mention language specific templates.

But by using the full power of CMSimple_XH's framework, several typical use cases can be handled without duplicating the template by just making minor adjustments to it. Some examples of useful techniques are given in the following.

Newsbox on Start Page only

To display a newsbox on the start page only, you can make the following adjustments to your template:

<?php if ($s === 0):?>
    <?php echo newsbox();?>
<?php endif;?>

This is only an example. You have to adjust it to your template, i.e. you have to change the indented line to contain everything that should be excluded, e.g. <div>s that surround the newsbox for layout purposes. Take care, that the indented line contains a full (X)HTML element, and not only a fragment of it.

Page specific Adjustments

To adjust your template for a particular page, you can copy your template, rename it and put it in the template folder. There you can make the modifications as desired, and than select the modified template for this page.

The drawback of this appoach: if you later want to modify the main template, you probably have to modify the page specific template as well. To avoid that, you can use the following technique:

<?php if ($su == 'Name_of_the_page'): ?>
<!-- Whatever you want to display on the page with the heading "Name of the page". -->
<?php elseif ($su == 'Name_of_another_page'): ?>
<!-- Whatever you want to display on the page with the heading "Name of another page". -->
<?php else: ?>
<!-- Whatever you want to display on all other pages. -->
<?php endif; ?>

FIXME explain $su and the additional “elseif” clauses.

Language specific templates

If you want to adjust your template for different languages, you could use CMSimple_XH's $sl variable. This is set to the current language, e.g. en, de or dk. You can use a variant of the technique mentioned in newsbox_on_start_page_only:

<?php if ($sl == 'en'):?>
    <p>Welcome</p>
<?php elseif ($sl == 'de'):?>
    <p>Willkommen</p>
<?php elseif ($sl == 'fr'):?>
    <p>Bienvenue</p>
<?php endif;?>

Please note that exactly this effect could be achieved more easily by using the the “template texts” in the subsite configuration:

<?php echo $txc['template']['text1'];?>

Sometimes it's possible to use an alternative technique. E.g. if you want to include a language specific header image, you could write:

<?php echo tag('img src="'.$pth['folder']['template'].'images/header-'.$sl.'.jpg" alt="..."')?>

This will display header-en.jpg for English and header-de.jpg for German language. The image files should be placed in the image/ subfolder of your template.

FIXME explain how to link/reference images etc. for multilingual sites. Explain how to link to the same language in another installation.

Using own Styles for each Page

To use an own stylesheet for every single page, you can make the following adjustments to your template. Insert the code right above the </head> tag.

<?php echo tag('link rel="stylesheet" type="text/css" href="'.$pth['folder']['template'].$sl.'-'.$su.'.css"')."\n"; ?>

This way an additional stylesheet will be used for the page. These stylesheets must be stored in the template folder as LANG-HEADING.css, e.g. en-Start.css. You do not have to create empty stylesheets for pages, that don't need additional styling. Be careful in this case to avoid page titles containing special characters, as this won't work.

Completely hide a Newsbox

If you want to hide a newsbox temporarily, you simply can change its status to unpublished. But sometimes the newsbox is displayed inside a div element with some additional styling (e.g. background, border), and this remains visible on the page. To hide the newsbox completely, you can modify your template (only the first and the last line have to be added):

<?php if (isPublished('News01')):?>
<div class="newsbox">
  <?php echo newsbox('News01');?>
</div>
<?php endif;?>

The function isPublished() has to be given the same parameter as the newsbox() call. As isPublished() is not available in CMSimple_XH, you have to add it to userfuncs.php:

function isPublished($heading)
{
    global $h, $pd_router;
 
    $i = array_search($heading, $h);
    if ($i !== false) {
        $pd = $pd_router->find_page($i);
        if (function_exists('Pageparams_isPublished')) {
            return Pageparams_isPublished($pd);
        } else {
            return $pd['published'] == '1';
        }
    } else {
        return false;
    }
}

Page Specific Header Images

If you want to display specific header images for each page, you can make use of so called “template variables”. The basic idea is, that you use a variable in the template instead of a hard-coded value, and that you can set this value on each page with CMSimple scripting. Let's start with a simplified example. Say you have in your template.htm:

<img src="./images/header.jpg">

To make it variable, change it to:

<img src="./images/header<?php echo $headerImage;?>.jpg">

This will show the same header image on every page. For pages where you want to have another header image, just write in the page content:

#CMSimple $headerImage='contact';#

This will display the image “header-contact.jpg” on this page. Of course this image has to be uploaded in the same folder as the general header.jpg. Note that the value “contact” in the code above is not related to the page heading; it's just the suffix of the filename.

Now a real world example. In template.htm:

<?php if (empty($headerImage)) {$headerImage = 'header.jpg';}?>
<?php if (empty($headerAlt)) {$headerAlt = 'some alt text for the default header image';}?>
<?php echo tag('img src="' . $pth['folder']['templateimages'] . $headerImage . '" alt="' . $headerAlt . '"');?>

On a page:

#CMSimple $headerImage = 'header-for-about-page.jpg'; $headerAlt = 'some alt text for this very header image';#

This way you choose any filename (even individual image formats) on different pages, and you can set an individual alt text for the image. Note that the images are expected in the subfolder images/ of the template folder.

For an easier selection of the page specific images, you can use the Morepagedata_XH plugin.

Date or daytime specific parts

You may want to make some parts of the website depending on the current date or the daytime. For instance, you may want to have a particular header for Christmas and Halloween, or have a bright website during the day and a dark website during the night. The solution is to get the respective information (i.e. date or daytime), and to emit the desired HTML accordingly.

For seasonal headers, for instance, you can get the current date as 'MMDD' formatted string and act accordingly:

<?php $tpl_today = date('md')?>
<?php if ($tpl_today >= '1029' && $tpl_today <= '1031'):?>
    <!-- Halloween specific header -->
<?php elseif ($tpl_today >= '1224' && $tpl_today <= '1226'):?>
    <!-- Christmas specific header -->
<?php else:?>
    <!-- other header -->
<?php endif?>

For daytime specific template colors you can get the current daytime as 'HH' formatted string and set a respective CSS class for the <body> element:

<?php $tpl_daytime = date('H')?>
<?php if ($tpl_daytime >= '06' && $tpl_daytime <= '18'):?>
    <body class="tpl_day">
<?php else:?>
    <body class="tpl_night">
<?php endif?>

Of course, in this case you have to add respective rules to the stylesheet, e.g.:

.tpl_day {
    background: white;
    color: black;
}
.tpl_night {
    background: black;
    color: white;
}

However, for daytime specific stuff don't forget that the time is that of the server, and not that of the client (for instance, while it's night in Austria, it is day in Australia, and vice versa). To cater for the client side daytime, you would have to use JavaScript instead.

 
You are here: start » tips_and_tricks
Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3
Valid XHTML 1.0 Valid CSS Driven by DokuWiki