Back

Theme settings in theme plugin project

Use Case:   In one portal instance we have a 2 websites Ex: EClassRoom and EMeetings.
 Now you want apply themes to them.

 But both sites will have the same theme structure but some content is changed, Like in EClassRoom website  you want show footer like "powered By www.eclassRoom.com"and in EMeetings website you want show footer like "powered By www.emeetings.com"

To fulfil the above scenarios we need to develop 2 themes with same structure, only because of footer content if different for both of them


Instead of creating two themes packaged as separate .war files,we create one set of two themes that share the majority of the code including CSS, JavaScript, images, and most templates using concept called "Configurable theme settings" it will allow you to mention same theme id with diffrent names in "liferay-look-and-feel.xml"


Follow the below steps to achieve it:

Step 1: create plugin project with theme
     File --> New--> Liferay plugin project --> enter name.
     Check theme and finish.

Step 2: open liferay-look-and-feel.xml and configure below properties


    <look-and-feel>
      <theme id="eclassroom" name="E-Class Room Theme">
        <settings>
          <setting key="theme-id" value="eclassroom" />
        </settings>
      </theme>
      <theme id="emeetings" name="E-Meetings Room Theme">
        <settings>
          <setting key="theme-id" value="emeetings" />
        </settings>
      </theme>
    </look-and-feel>

Step 3: create templates folder under _diffs  :docroot/_diffs/templates
Step 4: copy portal_normal.vm  file from "docroot/templates/" to "docroot/_diffs/templates"
Step 5: Replace the default footer section with the following lines of code:

    #set ($isEcrOrEmtgsThm = $theme.getSetting("theme-id"))
    #if ($isEcrOrEmtgsThm == "eclassroom")
      #language ("powered-by") <a href="http://www.eclassroom.com" rel="external">eclassroom.com</a> 
      // if you want you can include other velocity file by creating vm file in docroot/_diffs/templates like: //        //#parse ("$full_templates_path/footerEclassroom.vm")
    #else
      #language ("powered-by") <a href="http://www.emeetings.com" rel="external">emeetings.com</a> 
      // if you want you can include other velocity file by creating vm file in docroot/_diffs/templates like:    //#parse ("$full_templates_path/footerEmeetings.vm")
    #end
   
Step 6:Build and deploy the theme file.   
Step 7 : open control panel click on look and feel  their you should be able to see both the eclassroom and emeetings themes and apply any one of them to test it.

Based on the theme to be selected,you able to see your footer changes.

Previous Next
Comments
Trackback URL:

No comments yet. Be the first.
Select the design

Sliders
There are no designs..!
Content Menu Navigations
There are no designs..!
Content
There are no designs..!
Other
There are no designs..!