Using existing Template Two

From OpenCms Wiki
(Difference between revisions)
Jump to: navigation, search
(Template Two Article)
(Template Two Item)
 
(103 intermediate revisions by 4 users not shown)
Line 1: Line 1:
== Assumption: ==
+
== Assumption ==
  
 
To use the template '''Template Two''' the module '''org.opencms.frontend.templatetwo''' has to be installed.
 
To use the template '''Template Two''' the module '''org.opencms.frontend.templatetwo''' has to be installed.
Line 27: Line 27:
 
=== Template Two Article ===
 
=== Template Two Article ===
  
The Template Two Article gives functionality to define an article with a title and different paragraphs. One paragraph consists of a headline, the text, images and links. An article allows to define layout configurations in the tab "Configuration". This functionality accords the functionality of the [Template Two Configuration].
+
The Template Two Article gives functionality to define an article with:
 +
 
 +
*Title
 +
*Paragraph (Headline, Text, Image, Links)
 +
 
 +
An article allows to define layout configurations in the tab "Configuration". This functionality accords the functionality of the [[#Template_Two_Configuration|Template Two Configuration]].
 +
 
 +
The title widget is a CategoryWidget. So you can choose here defined categories in /system/categories/.
  
 
=== Template Two News ===
 
=== Template Two News ===
  
The Template Two News gives functionality to define news with date, title, teaser, different paragraphs and the author data.
+
The Template Two News gives functionality to define news with:
 +
 
 +
*Date
 +
*Title
 +
*Teaser
 +
*Paragraph (Headline, Text, Image, Links)
 +
*Author
 +
*Author EMail
 +
*Availability
  
 
=== Template Two Item ===
 
=== Template Two Item ===
  
A template two item contains the following elements:  
+
The Template Two Item gives functionality to define an item with:
  
 
*Name
 
*Name
*Category
+
*Menu
*Short Description
+
*Short description
*Long Decsription
+
*Long description
 
*Images
 
*Images
 
*Links
 
*Links
  
For this resource type it is possible to configure one of the following two layout types:
+
An item allows to define layout configurations in the tab "Configuration". This functionality accords the functionality of the [[#Template_Two_Configuration|Template Two Configuration]].
  
*Three column layout (Column left+right)
+
The category widget is a CategoryWidget. So you can choose here defined categories in /system/categories/.
*Two column layout (Column left), this is the default layout
+
 
+
It is possible to arrange boxes, for example Template two textboxes. Therefore, in the "Configuration" node in the xml content can be created elements. Per element following attributes are to choose:
+
 
+
*a box in the VFS, for example a Template two textbox
+
*the orientation for the box (right, center, left), if there is used the two column layout only the left and center orientations shall be used
+
*a color schema for the box, here can be choosed between three different color schemas, these color schemas are defined in the [[Template Two style]]
+
  
 
=== Template Two Event ===
 
=== Template Two Event ===
  
A template two event contains the following elements:  
+
The Template Two Event gives functionality to define an event with:
  
 
*Title
 
*Title
 
*Teaser
 
*Teaser
*Content Paragraph
+
*Paragraph (Headline, Text, Image, Links)
 
*Date
 
*Date
 
*Availability
 
*Availability
  
For this resource type it is possible to configure one of the following two layout types:
+
An event allows to define layout configurations in the tab "Configuration". This functionality accords the functionality of the [[#Template_Two_Configuration|Template Two Configuration]].
 
+
*Three column layout (Column left+right)
+
*Two column layout (Column left), this is the default layout
+
 
+
It is possible to arrange boxes, for example Template two textboxes. Therefore, in the "Configuration" node in the xml content can be created elements. Per element following attributes are to choose:
+
 
+
*a box in the VFS, for example a Template two textbox
+
*the orientation for the box (right, center, left), if there is used the two column layout only the left and center orientations shall be used
+
*a color schema for the box, here can be choosed between three different color schemas, these color schemas are defined in the [[Template Two style]]
+
  
 
=== Template Two Style ===
 
=== Template Two Style ===
  
A template two style contains following elements:
+
A Template Two Style allows to define style settings like:
  
 
*Inner Window - Width
 
*Inner Window - Width
Line 87: Line 86:
 
*Inner Page - Padding
 
*Inner Page - Padding
 
*Header - Font Color
 
*Header - Font Color
*Header - Background Color
+
*Header - Font Color
 
*Header - Background Image
 
*Header - Background Image
 
*Breadcrumb - Divider
 
*Breadcrumb - Divider
*Footer - Font Color
+
*Breadcrumb - Divider
 
*Footer - Background Color
 
*Footer - Background Color
*Footer - Background Image
+
*Footer - Background Color
 +
*Footer - Divider
 
*Footer - Divider
 
*Footer - Divider
*Font Family
 
 
*Link Color
 
*Link Color
 
*Link Hover Color
 
*Link Hover Color
Line 105: Line 104:
 
*Box Style 2 - Header Background Color
 
*Box Style 2 - Header Background Color
 
*Box Style 2 - Header Font Color
 
*Box Style 2 - Header Font Color
*Box Style 3 - Background Color
+
*Box Style 2 - Header Font Color
 
*Box Style 3 - Header Background Color
 
*Box Style 3 - Header Background Color
 
*Box Style 3 - Header Font Color
 
*Box Style 3 - Header Font Color
*Main Menu
+
*Box Style 3 - Header Font Color
 
*Main Menu - Background Color
 
*Main Menu - Background Color
 
*Main Menu - Font Color
 
*Main Menu - Font Color
Line 121: Line 120:
 
*Additional CSS File
 
*Additional CSS File
  
To use the Template Two Style file on a resource, on the property 'style.layout' on this resource the site path to the Template Two Style resource is to set.
+
The Template Two Style can be used on a resource. Thereto, on the resource the site path to the Template Two Style is to set in the the property 'style.layout'.
  
 
=== Template Two Search Page ===
 
=== Template Two Search Page ===
  
A template two style contains following elements:  
+
With the template two search page can be created a search page with:  
  
*Text
+
*Text (in the search input form)
*No Result text
+
*Result text
*Error Text
+
*Error text
  
 
=== Template Two Options ===
 
=== Template Two Options ===
  
A template two options contains following elements:  
+
The Template Two Options allows to define:  
  
*Top Navigation
+
*Top navigation
*Header
+
*Header text
*Footer
+
*Footer text
  
To use the Template Two Options file on a resource, on the property 'style.options' on this resource the site path to the Template Two Options resource is to set.
+
The Template Two Options can be used on a resource. Thereto, on the resource the site path to the Template Two Options is to set in the the property 'style.options'.
  
 
=== Template Two Preset ===
 
=== Template Two Preset ===
  
A template two preset consists of following elements:
+
A Template Two Preset allows to configure:
  
 
*Left Column - Visibility
 
*Left Column - Visibility
Line 150: Line 149:
 
*Right Column - Width
 
*Right Column - Width
 
*Left Navigation - Visibility
 
*Left Navigation - Visibility
 +
 +
The Template Two Preset can be used on a resource. Thereto, on the resource the site path to the Template Two Preset is to set in the the property 'style.preset'.
  
 
=== Template Two Linkbox ===
 
=== Template Two Linkbox ===
  
A template two linkbox consists of following elements:  
+
With the linkbox resources are shown which are collected with a OpenCms resource collector, for example the collector "allInFolder". The Template Two Linkbox has to be integrate in the functionality of the Template Two Configuration.
 +
 
 +
The Template Two Linkbox consists of following elements:
  
 
*Title
 
*Title
Line 161: Line 164:
 
=== Template Two Configuration ===
 
=== Template Two Configuration ===
  
This resource type allows to configure one of the following two layout types:
+
This resource type allows to configure the layout like:  
  
 
*Three column layout (Column left+right)
 
*Three column layout (Column left+right)
Line 170: Line 173:
 
*a box in the VFS, for example a Template two textbox
 
*a box in the VFS, for example a Template two textbox
 
*the orientation for the box (right, center, left), if there is used the two column layout only the left and center orientations shall be used
 
*the orientation for the box (right, center, left), if there is used the two column layout only the left and center orientations shall be used
*a color schema for the box, here can be choosed between three different color schemas, these color schemas are defined in the [[Template Two style]]
+
*a color schema for the box, here can be choosed between three different color schemas, these color schemas are defined in the [[#Template_Two_Style|Template Two Style]].
 +
 
 +
The Template Two Configuration are to use on resources, which still does not give the possibility to configure the here described options. Thereto, on the resource the site path to the Template Two Configuration is to set in the the property 'style.config'. In the [[#Template_Two_Article|Template Two Article]], the [[#Template_Two_Item|Template Two Item]] and the [[#Template_Two_Event|Template Two Event]] the here described options can be configured already. So it is useless to define an additional Template Two Configuration, because the internal configuration settings overwrite the external configuration settings.
  
 
=== Template Two Textbox ===
 
=== Template Two Textbox ===
  
A Template Two Textbox can show static text. Therefore, a Template Two Textbox consists of following elements:  
+
With a Template Two Textbox can be shown static text, like:
  
 
*Title
 
*Title
*Text
+
*Text  
*JSP File
+
*Jsp file
  
 
The Template Two Textbox can be integrated in Template Two Articles, Template Two Items and Template Two Events.
 
The Template Two Textbox can be integrated in Template Two Articles, Template Two Items and Template Two Events.
Line 184: Line 189:
 
=== Template Two Listbox ===
 
=== Template Two Listbox ===
  
With the linkbox resources are shown which are collected with a OpenCms resource collector, for example the collector "allInFolder". A template two listbox consists of following elements:  
+
With the linkbox resources are shown which are collected with a OpenCms resource collector, for example the collector "allInFolder". The Template Two Listbox can be integrated in Template Two Articles, Template Two Items and Template Two Events.
 +
 
 +
Additional the listbox allows to configure following attributes:
  
 
*Title
 
*Title
 
*Text
 
*Text
 
*Image
 
*Image
*AdditionalLink
+
*Additional Link
 
*Links
 
*Links
*Collector
+
*Collector, for example the collector "allInFolder"
*Parameter, this are the parameters to the selected folder, example: the collector "allInFolder" needs the parameters in the format <folder>|resource type|number of resources
+
*Parameter, for example the collector "allInFolder" needs parameters in this format: <vfs path>|resource type|count
 
*Detail Link Text
 
*Detail Link Text
 
*Position - Author
 
*Position - Author
Line 198: Line 205:
 
*Position - Image
 
*Position - Image
 
*Mapping
 
*Mapping
 
The Template Two Listbox can be integrated in Template Two Articles, Template Two Items and Template Two Events.
 
  
 
== Usage examples of the template two resource types ==
 
== Usage examples of the template two resource types ==
Line 218: Line 223:
  
 
* Set the '''template property''' to '''/system/modules/org.opencms.frontend.templatetwo/templates/main.jsp'''
 
* Set the '''template property''' to '''/system/modules/org.opencms.frontend.templatetwo/templates/main.jsp'''
 +
--[[Special:Contributions/223.206.212.78|223.206.212.78]] 08:34, 2 December 2010 (CET)
 +
 +
=== 'Template Two' example ===
 +
 +
This is an example of a template two layout:
 +
 +
[[Image:Template_two_demo_en.GIF|Template Two Demo Layout]]
 +
 +
 +
In the next chapters is described how these template elements are configured.
 +
For better understanding there are some embedded screenshots. They include
 +
some folder paths. These are the default paths in the OpenCms demo content.
 +
 +
==== Header and footer ====
 +
 +
The header and the footer is configured in a resource from type ttoptions. In the
 +
OpenCms demo content this file is configured in this way:
 +
 +
[[Image:Template_two_config_options.GIF|Options config]]
 +
 +
Thereto these settings are used, on the folder (where the template shall be used for) the property "style.options" is to set to this file. In the OpenCms demo content this is:
 +
 +
style.options: /demo_en/_config_/layout/options
 +
 +
==== Color settings ====
 +
 +
The different colors for the demo layout are configured in a file from type ttstyle.
 +
In the demo content this is the following file with the following excerpt:
 +
 +
[[Image:Template_two_config_style.GIF|Style config]]
 +
 +
Thereto these settings are used, on the folder (where the template shall be used for) the property "style.config" is to set to this file. In the OpenCms demo content this is:
 +
 +
style.config: /demo_en/_config_/layout/style
 +
 +
==== Right box "Recent news" ====
 +
 +
To have the right box "Recent news" where where it is, the following is to do:
 +
 +
On the folder (where the template shall be used for) the following property is to set:
 +
 +
style.config: <path to the config file from resource type ttconfig>
 +
 +
In the OpenCms demo content this is:
 +
style.config: /demo_en/_config_/layout/default
 +
 +
This config file has the following settings:
 +
 +
[[Image:Template_two_config_default.GIF|Style config]]
 +
 +
The path in the "Element/Box" element is the path to the news list box configuration file from resource type ttlistbox.
 +
 +
The news list box configuration has these settings:
 +
 +
[[Image:Template_two_config_news_recent.GIF|News config]]

Latest revision as of 15:22, 2 January 2011

Contents

Assumption

To use the template Template Two the module org.opencms.frontend.templatetwo has to be installed.

There are following Template Two resource types:

  • Template Two Article
  • Template Two News
  • Template Two Item
  • Template Two Event
  • Template Two Style
  • Template Two Search Page
  • Template Two Options
  • Template Two Preset
  • Template Two Linkbox
  • Template Two Configuration
  • Template Two Textbox
  • Template Two Listbox

These resource types are to create in the OpenCms Explorer View with the New button and the choose from Template Two. In the following the handling of these resource types is described.

Template Two resource types

In this chapter the Template Two resource types are described.

Template Two Article

The Template Two Article gives functionality to define an article with:

  • Title
  • Paragraph (Headline, Text, Image, Links)

An article allows to define layout configurations in the tab "Configuration". This functionality accords the functionality of the Template Two Configuration.

The title widget is a CategoryWidget. So you can choose here defined categories in /system/categories/.

Template Two News

The Template Two News gives functionality to define news with:

  • Date
  • Title
  • Teaser
  • Paragraph (Headline, Text, Image, Links)
  • Author
  • Author EMail
  • Availability

Template Two Item

The Template Two Item gives functionality to define an item with:

  • Name
  • Menu
  • Short description
  • Long description
  • Images
  • Links

An item allows to define layout configurations in the tab "Configuration". This functionality accords the functionality of the Template Two Configuration.

The category widget is a CategoryWidget. So you can choose here defined categories in /system/categories/.

Template Two Event

The Template Two Event gives functionality to define an event with:

  • Title
  • Teaser
  • Paragraph (Headline, Text, Image, Links)
  • Date
  • Availability

An event allows to define layout configurations in the tab "Configuration". This functionality accords the functionality of the Template Two Configuration.

Template Two Style

A Template Two Style allows to define style settings like:

  • Inner Window - Width
  • Window - Background Color
  • Window - Background Image
  • Inner Page - Background Color
  • Font Color
  • Inner Page - Padding
  • Header - Font Color
  • Header - Font Color
  • Header - Background Image
  • Breadcrumb - Divider
  • Breadcrumb - Divider
  • Footer - Background Color
  • Footer - Background Color
  • Footer - Divider
  • Footer - Divider
  • Link Color
  • Link Hover Color
  • Left Column - Divider
  • Right Column - Divider
  • Box Style 1 - Background Color
  • Box Style 1 - Header Background Color
  • Box Style 1 - Header Font Color
  • Box Style 2 - Background Color
  • Box Style 2 - Header Background Color
  • Box Style 2 - Header Font Color
  • Box Style 2 - Header Font Color
  • Box Style 3 - Header Background Color
  • Box Style 3 - Header Font Color
  • Box Style 3 - Header Font Color
  • Main Menu - Background Color
  • Main Menu - Font Color
  • Main Menu - Background Hover Color
  • Main Menu - Font Hover Color
  • Main Menu - Background Active Color
  • Main Menu - Font Active Color
  • Left Navigation - Background Hover Color
  • Left Navigation - Font Hover Color
  • Left Navigation - Background Active Color
  • Left Navigation - Font Active Color
  • Additional CSS File

The Template Two Style can be used on a resource. Thereto, on the resource the site path to the Template Two Style is to set in the the property 'style.layout'.

Template Two Search Page

With the template two search page can be created a search page with:

  • Text (in the search input form)
  • Result text
  • Error text

Template Two Options

The Template Two Options allows to define:

  • Top navigation
  • Header text
  • Footer text

The Template Two Options can be used on a resource. Thereto, on the resource the site path to the Template Two Options is to set in the the property 'style.options'.

Template Two Preset

A Template Two Preset allows to configure:

  • Left Column - Visibility
  • Left Column - Width
  • Right Column - Visibility
  • Right Column - Width
  • Left Navigation - Visibility

The Template Two Preset can be used on a resource. Thereto, on the resource the site path to the Template Two Preset is to set in the the property 'style.preset'.

Template Two Linkbox

With the linkbox resources are shown which are collected with a OpenCms resource collector, for example the collector "allInFolder". The Template Two Linkbox has to be integrate in the functionality of the Template Two Configuration.

The Template Two Linkbox consists of following elements:

  • Title
  • Description
  • Links

Template Two Configuration

This resource type allows to configure the layout like:

  • Three column layout (Column left+right)
  • Two column layout (Column left), this is the default layout

It is possible to arrange boxes in the selected layout, for example Template two textboxes. Therefore, in the "Configuration" node in the xml content can be created elements. Per element following attributes are to choose:

  • a box in the VFS, for example a Template two textbox
  • the orientation for the box (right, center, left), if there is used the two column layout only the left and center orientations shall be used
  • a color schema for the box, here can be choosed between three different color schemas, these color schemas are defined in the Template Two Style.

The Template Two Configuration are to use on resources, which still does not give the possibility to configure the here described options. Thereto, on the resource the site path to the Template Two Configuration is to set in the the property 'style.config'. In the Template Two Article, the Template Two Item and the Template Two Event the here described options can be configured already. So it is useless to define an additional Template Two Configuration, because the internal configuration settings overwrite the external configuration settings.

Template Two Textbox

With a Template Two Textbox can be shown static text, like:

  • Title
  • Text
  • Jsp file

The Template Two Textbox can be integrated in Template Two Articles, Template Two Items and Template Two Events.

Template Two Listbox

With the linkbox resources are shown which are collected with a OpenCms resource collector, for example the collector "allInFolder". The Template Two Listbox can be integrated in Template Two Articles, Template Two Items and Template Two Events.

Additional the listbox allows to configure following attributes:

  • Title
  • Text
  • Image
  • Additional Link
  • Links
  • Collector, for example the collector "allInFolder"
  • Parameter, for example the collector "allInFolder" needs parameters in this format: <vfs path>|resource type|count
  • Detail Link Text
  • Position - Author
  • Position - Date
  • Position - Image
  • Mapping

Usage examples of the template two resource types

In this chapter are shown some usage examples of the template two elements.

'Hello World' example

To produce a 'Hello World' example in the standard Template Two layout, following is to do to:

  • Create a Jsp with following content:
 <%@ page session="false" %>
 <%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
 <cms:include property="template" element="head" />
 Hello World
 <cms:include property="template" element="foot" />
  • Set the template property to /system/modules/org.opencms.frontend.templatetwo/templates/main.jsp

--223.206.212.78 08:34, 2 December 2010 (CET)

'Template Two' example

This is an example of a template two layout:

Template Two Demo Layout


In the next chapters is described how these template elements are configured. For better understanding there are some embedded screenshots. They include some folder paths. These are the default paths in the OpenCms demo content.

Header and footer

The header and the footer is configured in a resource from type ttoptions. In the OpenCms demo content this file is configured in this way:

Options config

Thereto these settings are used, on the folder (where the template shall be used for) the property "style.options" is to set to this file. In the OpenCms demo content this is:

style.options: /demo_en/_config_/layout/options

Color settings

The different colors for the demo layout are configured in a file from type ttstyle. In the demo content this is the following file with the following excerpt:

Style config

Thereto these settings are used, on the folder (where the template shall be used for) the property "style.config" is to set to this file. In the OpenCms demo content this is:

style.config: /demo_en/_config_/layout/style

Right box "Recent news"

To have the right box "Recent news" where where it is, the following is to do:

On the folder (where the template shall be used for) the following property is to set:

style.config: <path to the config file from resource type ttconfig>

In the OpenCms demo content this is: style.config: /demo_en/_config_/layout/default

This config file has the following settings:

Style config

The path in the "Element/Box" element is the path to the news list box configuration file from resource type ttlistbox.

The news list box configuration has these settings:

News config

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox