New Web Theme Wizard

Agenda

Invoke the Web Theme Wizard

Invoke the Web Theme Wizard

Creating a web theme for ERP5 is very easy thanks to the Web Theme wizard. The first thing to do is to create a new website:

- Go to web_site_module: 'Modules' >> 'Web Site'

- Create a new web site: 'Action...' >> 'Add Web Site'. A new website is created. You are redirected to an empty website with the default theme of ERP5 website.

Now we want to create a new website theme from our HTML and CSS files. So we will invoke the 'Web Theme Wizard' which is available through: 'Action...' >> 'NewWebThemeWizard'

You will then land on the Dialog Box which allows you to create your new website. We will use in this tutorial the open source web theme called RedTie, which is available at: http://www.oswd.org/design/preview/id/3699. (Original files used for this tutorial are available at http://www.oswd.org/design/download/id/3699)

In the Dialog Box, we have a few options to fill:

- Theme ID: Which is the unique ID of the website, in our case RedTie.

- Title: which is the human readable Title of our theme.

- Main Content Div: which is the class of the div in which is contained the main content. In our case we changed '#contenttext' in '.contenttext' in the CSS and corrected the HTML from to <div class="contenttext">

- HTML Code: copy and paste your HTML code which is displayed between the tags

- CSS Code: copy and paste your CSS code here

- JavaScript Code: copy and paste your JavaScript code here if applicable.

NOTE: You will be able to add more CSS and JavaScript files after if required.

Web Site View

Web Site View

Now, you can see what the site looks like with the code we copied and pasted. If you add ?ignore_layout:int=1 after 'view', you will see the website in the standard ERP5 layout.

Web Site and Web Theme

Web Site and Web Theme

Once you created your theme template, you will see a portal message which will confirme the creation. You can see that the container layout, the Content Layout and the Configuration Form ID have been created automatically.

Theme Structure

Theme Structure

All files related to your new theme have been created within a new folder in portal_skins. The current structure is:

WebSection_view<THEMEID>ThemeConfiguration:

<THEMEID>_content_layout:

<THEMEID>_layout:

template_<THEMEID>:

<THEMEID>_css: contains all css files of the theme. One has been created by default, but you can add as many as you want.

<THEMEID>_image: contains all images for the website theme. We will upload all images from our open source red tie theme.

<THEMEID>_js: contains all JavaScript files.

Upload Files

Upload Files

Now we can upload the files we need to fix our current theme.

In our case we will upload images required by the theme. We can name them (ID and Title) the same way that they are called in the CSS file:

- Add Image

- Select the file on your computer, choose the id according to the CSS File

Once they are uploaded, if we correct the paths to images in the CSS file, we already have a web theme which begins to look quite good.

Watch Main Template

Watch Main Template

Now that we have a quite nice template, we have to work on the content to make it dynamic. First you must take a look at the generated file: template_<THEMEID>

Main Template Code

Main Template Code

We can notice that the HTML code we just pasted into ERP5 has been re-factored so the content into the main div has been replaced by a slot which can be filled with content.

We must work on this template with Tal or Metal tags in order to make the content dynamic.

In our case we will work on creating the 'News' Widget so that its content will be generated dynamically.

Add Widget

Add Widget

First we have to go in the <THEMEID>_layout folder. Then we must create a 'RawTextAreaField'. We will use the HTML Code from the template Red Tie.

The HTML code we will use is the one in the 'leftpanel' div. First we will transform '#leftpanel' to '.leftpanel' in the CSS code. Then we can use 'leftpanel' as the CSS class for the widget we are creating.

Then we can take the HTML code from the template file (template_<THEMEID>) and paste it in the default field.

Add Widget to Layout

Add Widget to Layout

Add Widget to Main Template

Add Widget to Main Template

Watch Widget

Watch Widget

Duplicate Widget

Duplicate Widget

Watch Duplicated Widget

Watch Duplicated Widget

Make Widget Dynamic

Make Widget Dynamic

Watch Dynamic Widget

Watch Dynamic Widget

Add a Gadget Widget

Add a Gadget Widget