Blogs

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.

1 Comments

MY
Mallika yadav 4 Months Ago

Good

Blogs Settings
Lock Status

Arrange Element

Your changes published Successfully
Web Content Display Settings
Lock Status

Arrange Element