New Web Theme Wizard
by OSOE Project.
Agenda
• Create a New Web Theme
• Modify Web Layout
• Add Widgets
• Add Gadget Area
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
- 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_viewThemeConfiguration:
_content_layout:
_layout:
template_:
_css: contains all css files of the theme. One has been created by
default, but you can add as many as you want.
_image: contains all images for the website theme. We will upload all
images from our open source red tie theme.
_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_
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 _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_) 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