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