Multi-Colour Themes


Image

 

In Liferay 6.1 Quick note is an Default Portlet is there from That Portlet Three buttons are placed on Top right corner of the portlet, in that if user may click one button whole portlet colour was changed.

We take That portlet as an example and customize that portlet in Theme level.

Step 1: Create one simple  portlet in eclipse and create Three (3) Themes In Name Of new,new1,new2 Themes. (according to attached portlet zip).

Step 2: This Document is regarding to attached Portlet Zip. Name of the portlet is “ New portlet”.

Step 3: In Three Themes open custom .css (Plugins / themes / newtheme / docroot / _diffs / css / custom.css )

Following below code is an custom.css Programmer wants to change their Background colour  for Three Themes by following this steps...

@import url(custom_common.css);

@import url(color_schemes/green.css);

@import url(color_schemes/orange.css);

/* ---------- Base styles ---------- */

body {

      background: Blue;(Here programmer wants to change the Background colour)

      font-size: 11px;

}

Step 4:Then Go to Portlet (docroot / WEB-INF / src / com / test /Newportlet.java)

   Create one java page in name as Newportlet.java

Step 5:In Java Page create Proceess action And then merge this following  code:

package com.test;

import java.io.IOException;

import java.util.List;

import javax.portlet.ActionRequest;

import javax.portlet.ActionResponse;

import javax.portlet.PortletException;

import com.liferay.portal.kernel.util.ParamUtil;

import com.liferay.portal.kernel.util.Validator;

import com.liferay.portal.kernel.util.WebKeys;

import com.liferay.portal.model.ColorScheme;

import com.liferay.portal.model.Theme;

import com.liferay.portal.service.ThemeLocalServiceUtil;

import com.liferay.portal.theme.ThemeDisplay;

import com.liferay.util.bridges.mvc.MVCPortlet;

 

/**

 * Portlet implementation class NewPortlet

 */

public class NewPortlet extends MVCPortlet {

public void change(ActionRequest actionRequest,

            ActionResponse actionResponse) throws IOException, PortletException {

      // TODO Auto-generated method stub

   String cmd=actionRequest.getParameter("CMD");

      ThemeDisplay th= (ThemeDisplay)actionRequest.getAttribute(WebKeys.THEME_DISPLAY);

      long companyId=th.getCompanyId();

      List<Theme> themes=ThemeLocalServiceUtil.getThemes(companyId);

      for(Theme t : themes)

      {

          if(t.getThemeId().equalsIgnoreCase(cmd))

          {

              List<ColorScheme> colors=t.getColorSchemes();

             // System.out.println(colors.size());

             

            //  System.out.println("theme after change: "+th.getThemeId());

              th.setLookAndFeel(t, th.getColorScheme());

            // System.out.println("theme after change: "+th.getThemeId());

              break;

          }

      }          

      String color = ParamUtil.getString(actionRequest, "color");

      if(Validator.isNotNull(color)) {

            actionRequest.setAttribute("color", color);

      }

 

}

}

Step 6: Go to docroot / html / new / view.jsp

Paste this code <%@page import="com.liferay.portal.kernel.util.Validator"%>

<%@page import="javax.portlet.ActionRequest"%>

<%@page import="javax.portlet.PortletURL"%>

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects/>

<%

      String color=(String)request.getAttribute("color");

      if(Validator.isNotNull(color)) {

            if(color.equalsIgnoreCase("blue")) {

%>

      <style>

            .portlet-topper {

                  background:#000099 ;

            }

            .portlet-msg-success{

                  display: none;

            }

           

      </style>

      <% } else if(color.equalsIgnoreCase("red")) {%>

      <style>

            .portlet-topper {

                  background: #E22626;

            }

            .portlet-msg-success{

                  display: none;

            }

             

      </style>

      <% } else if(color.equalsIgnoreCase("yellow")){%>

      <style>

            .portlet-topper {

                  background: #E2DF26;

            }

            .portlet-msg-success{

                  display: none;

            }

           

      </style>

      <% }

      } else { %>

<style>

 

.portlet-msg-success{

      display: none;

}

</style>

<% } %>

<%

      PortletURL blueTheme=renderResponse.createActionURL();

      blueTheme.setParameter(ActionRequest.ACTION_NAME,"change");

      blueTheme.setParameter("CMD","new_WAR_newtheme");

      blueTheme.setParameter("color","blue");

      PortletURL redTheme=renderResponse.createActionURL();

      redTheme.setParameter(ActionRequest.ACTION_NAME,"change");

      redTheme.setParameter("CMD","new1_WAR_new1theme");

      redTheme.setParameter("color","red");

      PortletURL yellowTheme=renderResponse.createActionURL();

      yellowTheme.setParameter(ActionRequest.ACTION_NAME,"change");

      yellowTheme.setParameter("CMD","new2_WAR_new2theme");

      yellowTheme.setParameter("color","yellow");

%>

 

<FORM>

<a href="<%=blueTheme.toString()%>"><INPUT type="button" value=""  style="left: 888px;margin-bottom: 5px;background:#000099;position: relative;top:-72px;" name="button3" onClick="changeBGC('#000099')"><br></a>

<a href="<%=redTheme.toString()%>"><INPUT type="button" value="" style=" left: 938px; margin-bottom: 5px;background:#E22626; position: relative; top: -104px;" name="button4" onClick="changeBGC('#E22626')"> <br> </a>

<a href="<%=yellowTheme.toString()%>"><INPUT type="button" value="" style=" left: 985px; margin-bottom: 5px;background:#E2DF26; position: relative; top: -136px;" name="button5" onClick="changeBGC('#E2DF26')"></a> </FORM>

 

Then Ant clean-Deploy The Portlet, Ant-Deploy the Three theme.

Step 7:

Then builted portlet was going to Place in Themes;

Go Apllication Look and Feel --> Advanced Styling

Blue Highlighted Background In that Portlet Id programmer wants to copy this newportlet1_WAR_oneportlet..

Your current portlet information is as follows::
Portlet ID:
#portlet_newportlet1_WAR_oneportlet
Portlet Classes: .portlet

Step 8:Go Themes/newtheme/docroot/_diffs/template/Portal.normal vm file

Insert This Line $theme.runtime("new_WAR_changeportlet")

Portal normal.vm file code: this is already in theme no need to copy for understanding purpose i just paste it below. $theme.runtime("new_WAR_changeportlet")    blue colour Hihlighted below just place  like that

<!DOCTYPE html>

#parse ($init)

<html class="#language("lang.dir")" dir="#language("lang.dir")" lang="$w3c_language_id">

<head>

      <title>$the_title - $company_name</title>

      $theme.include($top_head_include)

</head>

<body class="$css_class">

$theme.include($body_top_include)

#if ($is_signed_in)

      #dockbar()

#end

<div id="wrapper">

        <a href="#main-content" id="skip-to-content">#language("skip-to-content")</a>

      <header id="banner" role="banner">

            <div id="heading">

                  <h1 class="site-title">

                        <a class="$logo_css_class" href="$site_default_url" title="#language("go-to") $site_name">

                              <img alt="$logo_description" height="$site_logo_height" src="$site_logo" width="$site_logo_width" />

                        </a>

               

                        #if ($show_site_name)

                              <span class="site-name" title="#language("go-to") $site_name">

                                    $site_name

                              </span>

                        #end

                  </h1>

                 $theme.runtime("new_WAR_changeportlet")

                  <h2 class="page-title">

                        <span>$the_title</span>

                  </h2>

           </div>

                #if (!$is_signed_in)

                  <a href="$sign_in_url" id="sign-in" rel="nofollow">$sign_in_text</a>

            #end

   #if ($has_navigation || $is_signed_in)

                  #parse ("$full_templates_path/navigation.vm")

            #end

      </header>

      <div id="content">

            <nav class="site-breadcrumbs" id="breadcrumbs">

                  <h1>

                        <span>#language("breadcrumbs")</span>

                  </h1>

                  #breadcrumbs()

            </nav>

            #if ($selectable)

                  $theme.include($content_include)

            #else

                  $portletDisplay.recycle()

                  $portletDisplay.setTitle($the_title)

                  $theme.wrapPortlet("portlet.vm", $content_include)

            #end

      </div>

      <footer id="footer" role="contentinfo">

            <p class="powered-by">

                  #language("powered-by") <a href="http://www.liferay.com" rel="external">Liferay</a>

            </p>

      </footer>

</div>

$theme.include($body_bottom_include)

</body>

$theme.include($bottom_include)

</html>

Code Description:

Step 1: In view . jsp Create Three Input type Buttons

Step 2: In java page Create process action method by eclipse (Example Type Pro and Then press CNTRL SPACE BUTTON)

public void processAction(ActionRequest actionRequest,

            ActionResponse actionResponse) throws IOException, PortletException {

Like this will come.

Step 3: Omitted that  Super class method and then Paste following below code:

 

String cmd=actionRequest.getParameter("CMD");( Here we assuming an CMD as Object)

      ThemeDisplay th= (ThemeDisplay)actionRequest.getAttribute(WebKeys.THEME_DISPLAY);

 

( We wants to Import import javax.portlet.PortletException;

import com.liferay.portal.kernel.util.ParamUtil;

import com.liferay.portal.kernel.util.Validator;

import com.liferay.portal.kernel.util.WebKeys;

import com.liferay.portal.model.ColorScheme;

import com.liferay.portal.model.Theme;

import com.liferay.portal.service.ThemeLocalServiceUtil;

import com.liferay.portal.theme.ThemeDisplay;

import com.liferay.util.bridges.mvc.MVCPortlet;

 )

      long companyId=th.getCompanyId();

      List<Theme> themes=ThemeLocalServiceUtil.getThemes(companyId);

      for(Theme t : themes)

      {

          if(t.getThemeId().equalsIgnoreCase(cmd))

          {

              List<ColorScheme> colors=t.getColorSchemes();

             // System.out.println(colors.size());

             

            //  System.out.println("theme after change: "+th.getThemeId());

              th.setLookAndFeel(t, th.getColorScheme());

            // System.out.println("theme after change: "+th.getThemeId());

              break;

          }

      }          

      String color = ParamUtil.getString(actionRequest, "color");

      if(Validator.isNotNull(color)) {

            actionRequest.setAttribute("color", color); (This Green Highlighted code is For portlet Header Colour might change Dynamically While clicking that Button. )

      }

 

}

}

 

Step 4:In View.Jsp

<%

      String color=(String)request.getAttribute("color");

      if(Validator.isNotNull(color)) {

            if(color.equalsIgnoreCase("blue")) {

%>

      <style>

            .portlet-topper (This an Portlet Header Style.) {

                  background:#000099 ;

            }

            .portlet-msg-success{

                  display: none;

            }

           

      </style>

      <% } else if(color.equalsIgnoreCase("red")) {%>

      <style>

            .portlet-topper {

                  background: #E22626;

            }

            .portlet-msg-success{

                  display: none;

            }

             

      </style>

      <% } else if(color.equalsIgnoreCase("yellow")){%>

      <style>

            .portlet-topper {

                  background: #E2DF26;

            }

            .portlet-msg-success{

                  display: none;

            }

           

      </style>

      <% }

      } else { %>

<style>

 

.portlet-msg-success{

      display: none;

}

</style>

 

Step 5: This an Action Url

 

 <%

      PortletURL blueTheme=renderResponse.createActionURL();

      blueTheme.setParameter(ActionRequest.ACTION_NAME,"change");

      blueTheme.setParameter("CMD","new_WAR_newtheme"); (Highlighted Word is war Of Your Own theme)

      blueTheme.setParameter("color","blue");

      PortletURL redTheme=renderResponse.createActionURL();

      redTheme.setParameter(ActionRequest.ACTION_NAME,"change");

      redTheme.setParameter("CMD","new1_WAR_new1theme");

      redTheme.setParameter("color","red");

      PortletURL yellowTheme=renderResponse.createActionURL();

      yellowTheme.setParameter(ActionRequest.ACTION_NAME,"change");

      yellowTheme.setParameter("CMD","new2_WAR_new2theme");

      yellowTheme.setParameter("color","yellow");

%>

What are themes created By user in Future Theme id is new_WAR_newtheme in this new you wants to replace your theme instead of new before War and after War..

Further Any Doubts: Refer below link

http://www.liferay.com/community/wiki/-/wiki/Main/Embedding+a+portlet+in+the+theme

It’s not about ideas It’s about making ideas happen !!!

Image Image Image