Wiki Navigation

The Classic Set Campsite Template Package Documentation

About these templates

The Classic template package was originally created by Sebastian Göbel, Micz Flor, and Douglas Arellanes as a way of showcasing useful features and functionality in the Campsite content management system, as well as showing how each of the different features and functionality works. Ljuba Ranković implemented the changes included in the version that can be downloaded from the link at the bottom of this document.

In this way, the template package serves both an educational and functional purpose – you can use these templates “out of the box,” or you can use them to increase your understanding of how Campsite and its various functions work.

Installation

As of Campsite 3.3.5, the Classic Template Package is the default sample publication in Campsite. If you’ve chosen to do so, please skip over the installation instructions.

Install the templates/DB

The demo template is delivered as an package of template files and database dump. The campsite-restore will copy the templates and database content to your existing campsite installation.

Attention: all existing content/templates are overwritten.

cd bin
./campsite-restore classic.tar.gz -e

Configuring the publications

When installing the template set, it uses the default publication name “localhost”. If your machine has another servername, change the page alias in the campsite admin:

http://%myservername%/admin/pub/edit_alias.php?Pub=1&Alias;=1

Skins (.css) and Functions (.tpl)

Campsite comes with its own template language. This makes it very flexible to fit with your web design. The following examples will illustrate how to replace elements of your design with Campsite lingo to generate the site (e.g. a list of articles, blogs, etc.). The sample templates contain a set of .tpl files with HTML and Campsite lingo to create the functionality. They are constructed in such a way that you can adjust the look and feel (if you like) by altering only the CSS files.

The CSS files are located in individual folders inside the folder templates/classic/css like templates/classic/css/green. We decided to use one CSS file that calls all the other CSS files used. In the case of the green set, this is called like this:

Wheras the style.css file calls all the other relevant files:

@import "advertisment.css";
@import "default.css";
@import "columns.css";
@import "content.css";
@import "teaserframes.css";
@import "elements.css";
@import "colors.css";
@import "background.css";
@import "footer.css";

Switching among the skins included in the Classic template set

The Classic template set includes two design variations, or skins. One of the designs has a green logo and is called ‘green’ in the templates directory.

Creating your own skins based on the sample template set

You can use the Classic template set as a base to create your own templates. Here’s a good way to start:

make a copy of the green folder in the templates/classic/css folder, e.g.: templates/classic/css/myskin
open the .tpl file that calls the CSS: /templates/classic/tpl/header.tpl
change the link to the CSS file to: <LINK href=”/templates/classic/css/myskin/style.css” rel=”stylesheet” type=”text/css”>
now you can edit the files in the folder myskin

Displaying Topics in the Classic template set

In this template set, topics are used in five places:

On the front page at the top of an article’s box, next to the section name and the date the article was posted.
On the section page at the top of the article in light gray.
On the article page at the top of the article
In the blogs, where a topic can either be attached to a blog globally or to an individual blog entry
In the search box with the “Browse All Topics In This Issue” link

In the first four instances, the attached topics are displayed and are clickable; when a user clicks on a topic they are taken to a page that automatically lists all other articles that also have this topic.

In the search box, “Browse all topics in this issue,” links to a page which displays all the topics attached to articles. Working With Images in the Classic Template Package

The Classic Template Package takes advantage of Campsite’s ability to assign a number images; these numbers are then used to determine the positioning and size of the photo on the front page and section front page. Campsite does not resize the photos, so you will get the best results if you upload a separate smaller version of your image along with the full-size one.

You can assign the image number when you upload the image. The same menu includes fields for the photographer’s name, the date, the location and the photo caption. Don’t worry if you get the image number wrong; you can always go back and edit the image information later.

Image sizes in the CSS package

Depending on what skin you decide to use, the image sizes will change – obviously. Rarely two publications have the exact same size of images. However, the sample database has a number of images uploaded. These images have (again: obviously) specific measurements. To make these images fit the different designs, the sizes are set in the CSS files.

In the classic template set, there are four specific images for each article. These are for the left columng (banner size and square) and for the right column (again: banner size and square). Specific numbers are reserved for these sizes. So when you upload an image to be one of these specific images, make sure that you give it the right number on upload.

The numbers and sizes of the images in the green skin are for example:

Left column:

A. banner image: image number: 200 / width: 569px;
B. square image: image number: 201 / width: 188px;

Right column:

A. banner image: image number: 202 / width: 350px;
B. square image: image number: 203 / width: 115px;

Image:Photo number 202.jpg

Images in the admin interface

A good example of this is the article called “Are Electric Cars The Future?” in the Cars section. There you will see that there are two versions of the same photo uploaded, one with a number of 1 and sized at 569 x 378 and one with a number of 202 and with a number of 350 x 233. The number 202 photo is the one used on the front page, while number 1 is what is displayed in the article, full size.

Any of the photos with a number of 200-203 will display on the front and section pages automatically. But to put a photo in the article, you must first upload it, then add it to the body text using the WYSIWYG editor’s photo button, which you can see in this screenshot. Image:Image button.jpg

We recommend that you use photo editing software to resize your photos. If they are not resized to the sizes listed above, the CSS will force the resize and this may make them look grainy.

In the examples in this package, we have kept the original photo dimensions for the article page, but have cropped the image to a 188 x 188 size.

Automated publishing to change article positions

As an illustration of Campsite’s automated publishing feature, we have set a couple of events on the article called “Calls for Traffic Safety After Last Week’s Fatal Collision.”

Automated publishing means that you can display articles on the front page or section pages, change an article’s status from unpublished to published (or back), or remove articles from the front or section pages, all on the date and time of your choice.

We have intentionally made the front page and section page templates keep all articles on them until they are removed by an automated publishing function.

The article called “Calls for Traffic Safety After Last Week’s Fatal Collision” has two items scheduled for April 28, 2009: Add to Front Page and Add to Section Page.

On 28 March, 2011, the articles are set to be removed from the front page and from the section page. The article will still keep its status as “published” and is available for browsing through the archive and search engine. Article Types Used in The Classic Template Set

In Campsite terminology, article types are a group of form fields that together define a news article. allows you to create different article types. The Classic template set uses a relatively simple article type, called “News Article,” which includes the following fields, which are then displayed on the Article Edit page:

Deck – a short text field for a smaller headline before the main headline.
Lead and SMS – a field for the first couple of sentences of the article, which may later be used for sending by SMS.
Byline – the name of the article’s author.
Body – the rest of the article’s text.

By default, Campsite always includes the following editable fields, which are added to the ones you define in your article types:

Name
Author
Creation Date
Publish Date
Keywords

You could have different article types for different types of information. Wire service articles, extended captions and press releases would be others that come to mind.

The article types – and the fields they contain – are important because each can be used from the template files and Campsite templating language.

You can find out more about article types in the Campsite manual here: https://www.campware.org/manuals/campsite/3.3/index.php?id=179

TEMPLATES

Campsite’s templating language is a set of extensions to the Smarty templating language for PHP. If you’re familiar with Smarty or with other templating languages, this should be fairly straightforward for you. But if you’re not, that’s OK too. We’re going to try to explain each of the things going on inside the template files here, and in many cases we’ll do so step by step. Where are the template files located?

templates/classic           -> main folder with the main .tpl files
templates/classic/tpl       -> folder with snippets which are called via include
templates/classic/img       -> images which are independent from the css, like logo or advertisments
templates/classic/js        -> javascript files
templates/classic/css       -> main folder for css skins (e.g. green)
templates/classic/css/green -> the set of css files and images for the classic skin 'green'

You can work with Campsite templates in two ways: Either through a web browser and the Campsite administration interface in Administer -> Templates, or through SCP or FTP directly on the server’s filesystem.

All Campsite template files which are in the top-level directory for templates (i.e. directly in the “classic” folder) are called directly. For example, index.tpl is the template for each issue, search-result.tpl the template for the search results page.

Campsite allows templates to include other template files. We will use this a lot in the top-level templates, where we have tried to create separate template files for each of the major functionality provided in the Classic Template Set.

Here is the index.tpl file, which includes directives to Campsite templating (these use the double curly brackets, in Smarty style) and XHTML, which defines the stylesheet tags (these use the <tags>). Each of the lower-level templates have specialized functions, and are in the subdirectories. By separating each of these, we’re able to reuse different snippets (with each in their own .tpl file) and therefore cut the amount of work required. index.tpl

Step by Step with index.tpl

{{ include file="classic/tpl/header.tpl" }}
<body id="index">
<div id="container">
<div id="wrapbg">
<div id="wrapper">
{{ include file="classic/tpl/headernav.tpl" is_index=true }}
<!-- Banner -->
{{ include file="classic/tpl/banner/bannerleaderboard.tpl" }}
<div class="colmask rightmenu">
    <div class="colleft">
        <div class="col1wrap">
            <div class="col1">
<!-- Column 1 start -->
<!-- section 10 -->
{{ local }}
{{ set_section number=10 }}
{{ list_articles name="articles" constraints="OnFrontPage is on" ignore_issue=true }}

at this stage, we keep calling the snippet that creates the box for each article listed with the above command

{{ include file="classic/tpl/teaserframe_articlelistleft.tpl" }}
{{ /list_articles }}
{{ /local }}
<!-- Banner -->
{{ include file="classic/tpl/banner/bannerleftcol.tpl" }}
<!-- section 20 -->
{{ local }}
{{ set_section number=20 }}
{{ list_articles name="articles" constraints="OnFrontPage is on" ignore_issue=true }}
{{ include file="classic/tpl/teaserframe_articlelistleft.tpl" }}
{{ /list_articles }}
{{ /local }}
<!-- section 30 -->
{{ local }}
{{ set_section number=30 }}
{{ list_articles name="articles" constraints="OnFrontPage is on" ignore_issue=true }}
{{ include file="classic/tpl/teaserframe_articlelistleft.tpl" }}
{{ /list_articles }}
{{ /local }}
<!-- Column 1 end -->
            </div>
        </div>
        <div class="col2">
<!-- Column 2 start -->
{{ include file="classic/tpl/search-box.tpl" }}
{{ include file="classic/tpl/blog/entrylistright.tpl" }}
<!-- section 40 -->
{{ local }}
{{ set_section number="40" }}
{{ list_articles name="articles" constraints="OnFrontPage is on" ignore_issue=true }}
{{ include file="classic/tpl/teaserframe_articlelistright.tpl" }}
{{ /list_articles }}
{{ /local }}
<!-- Banner -->
{{ include file="classic/tpl/banner/bannerrightcol.tpl" }}
<!-- section 50 -->
{{ local }}
{{ set_section number="50" }}
{{ list_articles name="articles" constraints="OnFrontPage is on" ignore_issue=true }}
{{ include file="classic/tpl/teaserframe_articlelistright.tpl" }}
{{ /list_articles }}
{{ /local }}
<!-- section 60 -->
{{ local }}
{{ set_section number="60" }}
{{ list_articles name="articles" constraints="OnFrontPage is on" ignore_issue=true }}
{{ include file="classic/tpl/teaserframe_articlelistright.tpl" }}
{{ /list_articles }}
{{ /local }}
<!-- Column 2 end -->
        </div>
    </div>
</div>
{{ include file="classic/tpl/footer.tpl" }}
</div><!-- id="wrapbg"-->
</div><!-- id="wrapper"-->
</div><!-- id="container"-->
</body>
</html>

Step by Step

First we will include the header (inside the header.tpl file). We also set which CSS files are loaded.

{{ include file="classic/tpl/header.tpl" }}

Now we add some divs for CSS

<body id="index">
<div id="container">
<div id="wrapbg">
<div id="wrapper">

The headernav.tpl file will generate the register, logo, and navigation of sections functions.

{{ include file="classic/tpl/headernav.tpl" is_index=true }}

The banners can be called from anywhere with these snippets (see also the advertisment.css info)

<!-- Banner -->
{{ include file="classic/tpl/banner/bannerleaderboard.tpl" }}

Now we start the first column, with styles defined in columns.css

<div class="colmask rightmenu">
    <div class="colleft">
        <div class="col1wrap">
            <div class="col1">
<!-- Column 1 start -->

All content for the left column goes beneath this tag.

The first thing is to list all articles in section 10 with “show on front page” turned ON. This is done in the article edit menu with the “Show Article on Front Page” checkbox. Then we go through the sections one by one. If you want to change the hierarchy – to put the articles from the business section first, for example – all you have to do is change the order of section numbers.

<!-- section 10 -->
{{ local }}
{{ set_section number=10 }}
{{ list_articles name="articles" constraints="OnFrontPage is on" ignore_issue=true }}
{{ include file="classic/tpl/teaserframe_articlelistleft.tpl" }}
{{ /list_articles }}
{{ /local }}

Here is the part that defines another banner in the middle of the page:

<!-- Banner -->
{{ include file="classic/tpl/banner/bannerleftcol.tpl" }}

and now the next set of sections:

<!-- section 20 -->
{{ local }}
{{ set_section number=20 }}
{{ list_articles name="articles" constraints="OnFrontPage is on" ignore_issue=true }}
{{ include file="classic/tpl/teaserframe_articlelistleft.tpl" }}
{{ /list_articles }}
{{ /local }}
<!-- section 30 -->
{{ local }}
{{ set_section number=30 }}
{{ list_articles name="articles" constraints="OnFrontPage is on" ignore_issue=true }}
{{ include file="classic/tpl/teaserframe_articlelistleft.tpl" }}
{{ /list_articles }}
{{ /local }}

Now we’re done with the left column, so we can close all our open tags and open the right column:

<!-- Column 1 end -->
            </div>
        </div>
        <div class="col2">
<!-- Column 2 start -->

All right column content goes beneath this tag. First we include the snippet for the search box, which also holds the links to issue archive and topic tree

{{ include file="classic/tpl/search-box.tpl" }}

Now we include the blog entries teaser box:

{{ include file="classic/tpl/blog/entrylistright.tpl" }}

Now we list the articles from the remaining sections:

<!-- section 40 -->
{{ local }}
{{ set_section number="40" }}
{{ list_articles name="articles" constraints="OnFrontPage is on" ignore_issue=true }}
{{ include file="classic/tpl/teaserframe_articlelistright.tpl" }}
{{ /list_articles }}
{{ /local }}
<!-- Banner -->
{{ include file="classic/tpl/banner/bannerrightcol.tpl" }}
<!-- section 50 -->
{{ local }}
{{ set_section number="50" }}
{{ list_articles name="articles" constraints="OnFrontPage is on" ignore_issue=true }}
{{ include file="classic/tpl/teaserframe_articlelistright.tpl" }}
{{ /list_articles }}
{{ /local }}
<!-- section 60 -->
{{ local }}
{{ set_section number="60" }}
{{ list_articles name="articles" constraints="OnFrontPage is on" ignore_issue=true }}
{{ include file="classic/tpl/teaserframe_articlelistright.tpl" }}
{{ /list_articles }}
{{ /local }}
<!-- Column 2 end -->
        </div>
    </div>
</div>

Now we will include the footer, which also lists the five most read articles of the current issue.

{{ include file="classic/tpl/footer.tpl" }}

Finally, we close the divs from the top and close the page…

</div><!-- id="wrapbg"-->
</div><!-- id="wrapper"-->
</div><!-- id="container"-->
</body>
</html>

Includes called by index.tpl

The following includes are called by index.tpl:

header.tpl (classic/tpl/header.tpl)
headernav.tpl (classic/tpl/headernav.tpl)
articlelistleft.tpl (classic/tpl/teaserframe_articlelistleft.tpl)
bannerleftcol.tpl (classic/tpl/banner/bannerleftcol.tpl)
search-box.tpl (classic/tpl/search-box.tpl)
entrylistright.tpl (classic/tpl/blog/entrylistright.tpl)
teaserframe_articlelistright.tpl (classic/tpl/teaserframe_articlelistright.tpl)
bannerrightcol.tpl (classic/tpl/banner/bannerrightcol.tpl)
footer.tpl (classic/tpl/footer.tpl)

section.tpl

This template file creates each section’s front page. All articles where the ‘Show on Section Front Page’ has been checked in the article edit menu will show up in the page’s left column. The articles which are published without this turned on show up in the right column.

left column: all articles which are published and “show on section page” is ON, independent from the issue. The left column is referred to as “col1” in the CSS.

{{ list_articles name="articles_left" constraints="OnSection is on" ignore_issue="true"}}
{{ include file="classic/tpl/teaserframe_articlelistleft.tpl" }}
{{ /list_articles }}

right column: list 9 articles from this section where “show on section page” is OFF, independent from the issue. the template classic/tpl/pagination.tpl will create a previous and next link, if there are more than 9 articles. The right column is referred to as “col2” in the CSS.

{{ list_articles name="articles_right" constraints="OnSection is off" ignore_issue="true" length="9" }}
{{ include file="classic/tpl/teaserframe_articlelistright.tpl" }}
{{ local }}
{{ unset_article }}
{{ include file="classic/tpl/pagination.tpl" }}
{{ /local }}
{{ /list_articles }}

If you decide to have something special for each section, like an image or color scheme, you can use the body ID tag. In the section.tpl file, the section number is also in the ID:

<body id="section" class="section-{{ $campsite->section->number }}">

This will for example produce inside section number 100:

<body id="section" class="section-100">

article.tpl

This template prints the content of the article, attachments and comments in the left column. This template also gives a good illustration of how the Campsite code lies inside the HTML.

<!-- Column 1 start -->
          <div class="articlecontent">
            <div class="date">
              {{ $campsite->article->Date }} {{ $campsite->article->Time }}
              {{ include file="classic/tpl/topic-list.tpl" }}
            </div><!-- .date -->
            <h3 class="deck deck_med">{{ $campsite->article->Deck }}</h3>
            <h1>{{ $campsite->article->name }}</h1>
            <div class="byline">{{ $campsite->article->Byline }}</div>
            <p class="text">
              {{ $campsite->article->Body }}
            </p>
          </div><!-- .articlecontent -->
          {{ list_article_attachments }}
          {{ if $campsite->current_list->at_beginning }}
          <h4>Downloads:</h4>
          {{ /if }}
            <a href="/attachment/{{ $campsite->attachment->identifier }}">{{ $campsite->attachment->file_name }}</a>
            ({{ $campsite->attachment->size_kb }}kb)
            <br>
          {{ /list_article_attachments }}
          {{ include file="classic/tpl/comments.tpl" }}
        <!-- Column 1 end -->

right column

The right column of this page lists two types of articles.

First, it lists three articles which have the same topics (as set by the editors) as the one currently displayed:

<!-- start: 3 articles having same topic -->
        {{ list_article_topics }}
          {{ assign var="topic_cond" value="`$topic_cond` topic is `$campsite->topic->identifier` " }}
        {{ /list_article_topics }}
        {{ if $topic_cond }}
          <!-- 3 Articles {{ $topic_cond }} -->
          {{ list_articles name="topic_articles" constraints="number not `$campsite->article->number` `$topic_cond` matchAnyTopic"  ignore_issue=true length=3 }}
            {{ include file="classic/tpl/teaserframe_articlelistright.tpl" }}
            {{ include file="classic/tpl/pagination.tpl" }}
          {{ /list_articles }}
          {{ unset_topic }}
        {{ /if }}
        <!-- end: 3 articles having same topic end -->

Then it lists three articles from the same section:

<!-- 3 Articles from section {{ $campsite->section->identifier }} -->
        {{ list_articles name="section_articles" constraints="number not `$campsite->article->number`" ignore_issue=true length=3 }}
{{ include file="classic/tpl/teaserframe_articlelistright.tpl" }}
          {{ include file="classic/tpl/pagination.tpl" }}
        {{ /list_articles }}
        <!-- 3 articles having same section end -->

archive.tpl

This template lists all articles in all sections of an issue in the left column.

First we use the command set_default_issue to make sure that we list from the issue chosen (this is done in the right column, see below). then we list through all sections and within this loop through all articles. for each article, we also display the topics linked to this article.

<div class="list-nested" id="archive-tree">
{{ set_default_issue }}
    <h2>{{ $campsite->issue->name }} (issue #{{  $campsite->issue->number }} / published {{ $campsite->issue->publish_date|camp_date_format:'%Y-%M-%D' }})</h2>
    {{ list_sections order="bynumber asc" }}
        <h3><a href="{{ uri }}" class="linksection-{{ $campsite->section->number }}">{{ $campsite->section->name }}</a><!--{{ $campsite->section->number }}--></h3>
        <ul>
        {{ list_articles }}
            <li id="list-article"><h4><a href="{{ uri }}" class="linksection-{{ $campsite->section->number }}">{{ $campsite->article->name }}</a></h4>
  <div class="list-article-published">
            posted {{ $campsite->article->publish_date|camp_date_format:'%M %D, %Y %h:%i:%s' }}
  </div>
{{ include file="classic/tpl/topic-list.tpl" }}
</li>
        {{ /list_articles }}
        </ul>
    {{ /list_sections }}
</div>

In the right column, we display a link to each issue by listing the issues. Clicking on an issue will then change the display of the left column. 10 issues are displayed. but if there are more, the pagination.tpl template will create previous/next links.

{{ list_issues length="10" order="byNumber desc" }}
  <h2><a href="{{ url options="template classic/archive.tpl" }}">{{ $campsite->issue->name }}</a></h2>
Issue #{{ $campsite->issue->number }} / 
      (published {{ $campsite->issue->publish_date|camp_date_format:'%M %D, %Y %h:%i:%s' }})
  {{ include file="skins/greenpiece/includes/pagination.tpl" }}
{{ /list_issues }}

register.tpl

This template makes use of Campsite’s built-in user registration functions. Users registering for a trial or paid subscription of your publication call this template when they click on register. Here’s what this template does:

builds the html for the entire page
decides what to do in the left column, display form, check for error, display success message

{{ if !$campsite->edit_user_action->defined && !$campsite->edit_subscription_action->defined }}
  {{ include file="classic/tpl/user-form.tpl" }}
{{ /if }}
{{ if $campsite->edit_user_action->defined && $campsite->edit_user_action->is_error }}
<div class="error"><div class="errorinner">
There was an error submitting the account creation form:
  {{ $campsite->edit_user_action->error_message }}
</div></div>
  {{ include file="classic/tpl/user-form.tpl" }}
{{ /if }}
{{ if $campsite->edit_user_action->defined && $campsite->edit_user_action->ok }}
  Your profile updated sucessfully.
{{ /if }}

Step By Step:

First, if everything is OK, it will display the user form for registering (from the subtemplate classic/tpl/user-form.tpl):

{{ if !$campsite->edit_user_action->defined && !$campsite->edit_subscription_action->defined }}
  {{ include file="classic/tpl/user-form.tpl" }}
{{ /if }}

Here’s what happens if it isn’t OK: If the user pressed ‘Submit’ and Campsite detects an error, it will display the error message and the form again (from classic/tpl/user-form.tpl):

{{ if $campsite->edit_user_action->defined && $campsite->edit_user_action->is_error }}
<div class="error"><div class="errorinner">
There was an error submitting the account creation form:
  {{ $campsite->edit_user_action->error_message }}
</div></div>
  {{ include file="classic/tpl/user-form.tpl" }}
{{ /if }}

If the user is registered, the form is displayed to change the user profile information:

{{ if $campsite->edit_user_action->defined && $campsite->edit_user_action->ok }}
  Your profile updated sucessfully.
{{ /if }}

search-result.tpl

This template displays the results from a user’s search request, as typed into the search box (handled in search-box.tpl).

{{ if $campsite->search_articles_action->defined }}
    {{ if $campsite->search_articles_action->is_error }}
      {{ $campsite->search_articles_action->error_message }}
    {{ /if }}
    {{ if $campsite->search_articles_action->ok }}
        {{ list_search_results name="results" length=9 }}
        {{ if $campsite->current_list->at_beginning }}
            <p>Found {{ $campsite->current_list->count }} articles matching the condition.</p>
        {{ /if }}
<div class="teaserframe teaserframebig teaserframe-{{ $campsite->section->number }} teaserframebig-{{ $campsite->section->number }}">
<div class="teaserframebiginner">
	<div class="teaserhead">
	<div class="teaserheadinner">
	</div><!-- .teaserheadinner -->
	</div><!-- .teaserhead -->
        	<div class="teasercontent content">
        	<h2 class="title title_big"><a href="{{ uri options="article template article.tpl" }}">{{ $campsite->article->name }}</a></h2>
        	<p class="text">(Section <a href="{{ uri options="section template section.tpl" }}">{{ $campsite->section->name }}</a>, {{ $campsite->article->Date }} {{ $campsite->article->Time }}) {{ $campsite->article->Deck }}</p>
        	</div><!-- .teasercontent content -->
        </div><!-- .teaserframebiginner -->
        </div><!-- .teaserframebig -->
        {{ local }}
        {{ unset_publication }}
        {{ unset_issue }}
        {{ unset_section }}
        {{ unset_article }}
            {{ include file="classic/tpl/pagination.tpl" }}
        {{ /local }}
        {{ /list_search_results }}
        {{ if $campsite->prev_list_empty }}
          <div class="error"><div class="errorinner">
          There were no articles found.
          </div></div>
        {{ /if }}
    {{ /if }}
{{ /if }}

topic.tpl

EXPLANATION TO BE ADDED

FOLDER: img

the image folder will contain any kind of image important to the site but independent from the layout. i.e. the logo might go in here, bannerads could go in here. but the background.jpg file called by the css might be better off in the css folder (or e.g. in clasic/css/green/ to be precise)

The ‘banner’ folder holds the template files including the code snippets for banners. Google AdSense? code or OpenX code goes into these individual snippets – not into any of the other templates!

In the case of The Custodian, they contain the gray sample images, which are located in the folder: classic/img/banner

bannerleaderboard.tpl
bannerleftcol.tpl
bannerleftcol.tpl .tpl
bannerlogo.tpl
bannerrightcol.tpl

FOLDER: tpl

breadcrumbs.tpl

This template displays the “breadcrumbs,” or the intermediate pages between the home page and the page. It displays the section name, or, if the template name is ‘topic.tpl’ or ‘archive.tpl’ it displays their names.

<div class="breadcrumbs"><div class="breadcrumbsinner">
<a href="{{ uri options="publication" }}">Home</a>
&gt;
{{ if $campsite->template->name == "classic/topic.tpl" }}
    {{ if $campsite->topic->defined }}
        Topic: {{ $campsite->topic->name }}
    {{ else }}
        Topics
    {{ /if }}
{{ elseif $campsite->template->name == "classic/archive.tpl" }}
    Archive
{{ elseif $campsite->section->defined }}
    <a href="{{ uri options="section" }}">{{ $campsite->section->name }}</a>
{{ /if }}
</div><!-- .breadcrumbsinner -->
</div><!-- .breadcrumbs -->

comments-link.tpl

EXPLANATION TO BE ADDED

comments.tpl

EXPLANATION TO BE ADDED

headernav.tpl

EXPLANATION TO BE ADDED

EXPLANATION TO BE ADDED === login-top.tpl

pagination.tpl

EXPLANATION TO BE ADDED

subscription-form.tpl

EXPLANATION TO BE ADDED

teaserframe_articlelistleft.tpl

this will display the block with the teaser of an article in the left column (e.g. on the section page or list of articles for a specific topic on the topics page). note: depending on the availability of image number 200 or 201, this will return different HTML (see below). also, the section number is added in the class of the sourounding div tags, to make it easier when adjusting the CSS files.

<div class="teaserframe teaserframe-{{ $campsite->section->number }}">
<div class="teaserframeinner">
	<div class="teaserhead">
	<div class="teaserheadinner">
	<div class="teaserheadsection">
		<a href="{{ uri options="section template section.tpl" }}">{{ $campsite->section->name }}</a> |
	</div><!-- class="teaserheadsection" -->
		{{ $campsite->article->Date }} {{ $campsite->article->Time }}
		{{ include file="classic/tpl/topic-list.tpl" }}
	</div><!-- .teaserheadinner -->
	</div><!-- .teaserhead -->
{{ if $campsite->article->has_image(200) }}
<!-- Big banner image -->
	<div class="teaserimg_big">
	<a href="{{ uri options="template article.tpl" }}"><img src="/get_img.php?{{ urlparameters options="image 200" }}"/></a>
	</div><!-- .teaserimg_big -->
{{ /if }}
{{ if $campsite->article->has_image(201) }}
<!-- Big square image -->
	<div class="teaserimg_med">
	<a href="{{ uri options="template article.tpl" }}"><img src="/get_img.php?{{ urlparameters options="image 201" }}"/></a>
	</div><!-- .teaserimg_med -->
{{ /if }}
	<div class="teasercontent content">
	<h2 class="title title_big"><a href="{{ uri options="article template article.tpl" }}">{{ $campsite->article->name }}</a></h2>
	<p class="text">{{ $campsite->article->Lead_and_SMS }}</p>
	<ul class="links">
	<li><a href="{{ uri options="article template article.tpl" }}">Read more<!--Read more--></a>
	{{ include file="classic/tpl/comments-link.tpl" }}
	</ul>
	</div><!-- .teasercontent content -->
</div><!-- .teaserframeinner -->
</div><!-- .teaserframe -->

inside, this is the code that builds different HTML according to the image numbers found. if there are neither 200 or 201, no HTML is written in this part. the similar list of articles for the right column checks for image numbers 202 and 203.

{{ if $campsite->article->has_image(200) }}
<!-- Big banner image -->
	<div class="teaserimg_big">
	<a href="{{ uri options="template article.tpl" }}"><img src="/get_img.php?{{ urlparameters options="image 200" }}"/></a>
	</div><!-- .teaserimg_big -->
{{ /if }}
{{ if $campsite->article->has_image(201) }}
<!-- Big square image -->
	<div class="teaserimg_med">
	<a href="{{ uri options="template article.tpl" }}"><img src="/get_img.php?{{ urlparameters options="image 201" }}"/></a>
	</div><!-- .teaserimg_med -->
{{ /if }}

teaserframe_articlelistright.tpl

this is the equivalent of teaserframe_articlelistleft.tpl but for the right column. here the template checks for different image numbers, since the iamges used in the right column require different styling.

<div class="teaserframe teaserframe-{{ $campsite->section->number }}">
<div class="teaserframeinner">
	<div class="teaserhead">
	<div class="teaserheadinner">
	<div class="teaserheadsection">
		<a href="{{ uri options="section template section.tpl" }}">{{ $campsite->section->name }}</a> |
	</div><!-- class="teaserheadsection" -->
		{{ $campsite->article->Date }} {{ $campsite->article->Time }}
		{{ include file="classic/tpl/topic-list.tpl" }}
	</div><!-- .teaserheadinner -->
	</div><!-- .teaserhead -->
{{ if $campsite->article->has_image(202) }}
<!-- Big banner image -->
	<div class="teaserimg_big">
	<a href="{{ uri options="template article.tpl" }}"><img src="/get_img.php?{{ urlparameters options="image 202" }}"/></a>
	</div><!-- .teaserimg_big -->
{{ /if }}
{{ if $campsite->article->has_image(203) }}
<!-- Big square image -->
	<div class="teaserimg_med">
	<a href="{{ uri options="template article.tpl" }}"><img src="/get_img.php?{{ urlparameters options="image 203" }}"/></a>
	</div><!-- .teaserimg_med -->
{{ /if }}
	<div class="teasercontent content">
	<h2 class="title title_big"><a href="{{ uri options="article template article.tpl" }}">{{ $campsite->article->name }}</a></h2>
	<p class="text">{{ $campsite->article->Lead_and_SMS }}</p>
	<ul class="links">
	<li><a href="{{ uri options="article template article.tpl" }}">Read more<!--Read more--></a>
	{{ include file="classic/tpl/comments-link.tpl" }}
	</ul>
	</div><!-- .teasercontent content -->
</div><!-- .teaserframeinner -->
</div><!-- .teaserframe -->

topic-list.tpl

this code snippet can be called whenever we want to display the topics linked to this article. this could either be on the article page itself, but also on the section page for each listed article and on the archive page for each article in the listed sections.

important: if there are no topics, this code will return nothing but the two HTML comments at top and bottom. this is because it uses the conditions if $campsite->current_list->at_beginning and if $campsite->current_list->at_end to build the div tags around the topics.

<!-- topic-list.tpl article topics start -->
{{ list_article_topics }}
{{ if $campsite->current_list->at_beginning }}
<div class="relatedtopics">
<div class="relatedtopicsinner">
Related topics 
{{ /if }}
: <a href="{{ uri options="template classic/topic.tpl" }}" class="topic">{{$campsite->topic->name }}</a>
{{ if $campsite->current_list->at_end }}
</div><!-- class="relatedtopicsinner"-->
</div><!-- class="relatedtopics" -->
{{ /if }}
{{ /list_article_topics }}
<!-- topic-list.tpl article topics end -->

user-form.tpl

FOLDER: blog FOLDER: js FOLDER: css/green FOLDER: icons advertisment.css

This CSS file governs the display or hiding of banners and their styling information. The easiest thing to do is to leave this and only decide which ones you want to show / hide by changing the ‘display’ value to ‘none’ or to comment the entire line out. To make changes to the banners (for example to paste the code from Google AdSense? or OpenX) go into the folder: classic/tpl/banner.

To hide a banner:

#bannerleaderboard {
   display: none; /* hide this banner ON/OFF */
   padding: 0px;
   margin: 0px;
   padding-bottom: 20px;
   clear: both;
 }

To show a banner:

#bannerleaderboard {
 /*   display: none; /* hide this banner ON/OFF */
   padding: 0px;
   margin: 0px;
   padding-bottom: 20px;
   clear: both;
 }

background.css and colors.css

This CSS file sets the colors of things like the headlines, with each section number having its own color style. To find out the number of a section, you can pull down ‘Content -> Issue Name’ in the admin interface and then make a note of each section’s number.

In the case of The Custodian, it’s pretty straightforward:

News: 10
Business: 20
Sports: 30
Lifestyle: 40
Cars: 50
Real Estate: 60

The additional pages have the following numbers:

Blogs: XXX
Archive: XXX
Search Results: XXX
Topic Browse: XXX
Register: XXX

In the example below, the section is 10 (for News) and the color value is #649C13. To change the section’s color, edit each of the color values to colors of your liking.

/* SECTION NUMBER 10 #649C13 */
 body#index div.teaserframe-10 .teaserhead,
 body#system div.teaserframe-10 .teaserhead,
 div.block-mostpopular-section-10 {
  	background: #649C13;
 }
 div.teaserframe-10 .teasercontent h2 a,
 body.section-10 div.articlecontent h1,
 div.teaserframe-10 ul.links li a,
 div.sectionheader-10,
 div.block-mostpopular-section-10,
 body#archive a.linksection-10 {
  	color: #649C13; 
 }
 div.sectionheader-10 { 
 	border-bottom: 1px solid #649C13;
 }

columns.css content.css default.css elements.css footer.css style.css teaserframes.css IMAGE: light.jpg IMAGE: header.jpg IMAGE: bg.jpg Function-Specific Templates

TO BE COMPLETED: which include has this information? Logic: dynamically generated from section names and using section colors List of section names Link to each section front page CSS styles inherit color value from template based on section number Which CSS document contains the navbar’s style information? What are the relevant CSS entities for the navbar?

wTO BE COMPLETED: which include has this information? Where is the CSS for this? Straight plain text search How is the search called? What are the parameters? How can a person use advanced search instead? How is the search result order determined? Where can I find out more about Campsite search functions?

Browse all topics Link to topics URI

Browse all issues Link to archive URI

Blogs teaser box

Styling: Inherits blogs section number and changes color (and other style) accordingly?

Which CSS file has the blog teaser box entities, and what are they called?

Why are the blogs in their own section? Do they have to be?

Are there other considerations in using a plugin with templates?

Print section name Link to blogs section URI

Logic: 3 latest entries from the blogs plugin Entry title Teaser text Read more Link to blog entry URI Blog name Count of comments Link to blog entry URI with comments

Right Column Article Teaser Boxes

Styling: in color of section, similar to left column boxes, smaller fonts (from which stylesheet) Latest article not on front page but on section front page Read more Image (with right column numbering) Comments (if enabled)

Left Column Article teaser

Article date/timestamp List all attached topics Link to page displaying all articles with this topic Image handling same as front page (left, center, right according to photo number) Deck Name Link to article URI Lead Read more Link to article URI

Search Box Same as front page Straight plain text search Browse all topics -> topics page Browse all issues -> archive page

Right Column Article Teaser Article date/timestamp List all attached topics? Link to topics URI Deck Name Link to article URI Lead Read more Link to article URI Paging of right column article teaser items

Most read articles

Logic: Uses statistics functions to determine the 5 most read articles in the section Name Lead (is it truncated?) Link to article URI

Footer Repeats section listings Links to section front pages Permanent info pages on separate publication called ‘info’

Search Results page (search.tpl)

Prints search results for: <search term> Found <count> articles matching the condition

Name Link to article URI Section Date/Timestamp Deck?

Where can I find out more about Campsite search functions and how this can be changed?

Should an option for advanced search be included by default from the search results page?

Attachments

classic.tar.gz (9.3 MB) –classic template package, added by sava on 02/19/10 15:42:21.

Download in other formats:

Plain Text

Wiki Navigation

The Classic Set Campsite Template Package Documentation

About these templates

Installation

Install the templates/DB

Configuring the publications

Skins (.css) and Functions (.tpl)

Switching among the skins included in the Classic template set

Displaying Topics in the Classic template set

Image sizes in the CSS package

Images in the admin interface

Automated publishing to change article positions

TEMPLATES

Step by Step with index.tpl

Step by Step

Includes called by index.tpl

section.tpl

article.tpl

right column

archive.tpl

register.tpl

Step By Step:

search-result.tpl

topic.tpl

FOLDER: img

FOLDER: banner

FOLDER: tpl

breadcrumbs.tpl

comments-link.tpl

comments.tpl

footer.tpl

headernav.tpl

header.tpl

pagination.tpl

search-box.tpl

subscription-form.tpl

teaserframe_articlelistleft.tpl

teaserframe_articlelistright.tpl

topic-list.tpl

user-form.tpl

background.css and colors.css

Navbar

Search box

Blogs teaser box

Right Column Article Teaser Boxes

Left Column Article teaser

Most read articles

Search Results page (search.tpl)

Attachments

Download in other formats: