Example of Theme Creation

As an example of theme creation, suppose a portal with a news area. This area has a sports news section. The sports news section is subdivided into two other areas: soccer and basketball.

Similarly, suppose that the news lists are arranged like the image below:

Assuming that the presentation of sport news lists, soccer, and basketball should be different, it was decided to create three distinct themes for this portal: sports, basketball, and soccer.

The themes br.com.lumis.theme.sport, br.com.lumis.theme.soccer, and br.com.lumis.theme.basketball were applied to the channels Sports, Soccer, and Basketball, respectively. The channels Soccer and Basketball, in addition to applying their respective themes, also apply the theme br.com.lumis.theme.sport, after their respective themes.

The desired appearance for each list is:

Sports
Soccer
Basketball

The theme sport has, in addition to the definition file:

def/lumis/service/news/style/List.xsl
www/css/style.css
www/img/icon.jpg

The theme soccer has, in addition to the definition file:

def/lumis/service/news/style/List.xsl
www/css/style.css
www/img/icon.jpg

The theme basketball has, in addition to the definition file:

www/css/style.css
www/img/icon.jpg

XSLs

The XSL of the theme sport is the basis for the entire sports area.

def/lumis/service/news/style/List.xsl of the theme sport

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:lum="http://www.lumis.com.br/doui" exclude-result-prefixes="lum" version="1.0">
<xsl:import href="lum_basetheme/List.xsl" ></xsl:import>
<xsl:output omit-xml-declaration = "yes" method="xml" ></xsl:output>

<xsl:template name="listItem">
         <b><lum:field id="title" ></lum:field></b> (<lum:field id="publishStartDate/value" ></lum:field>)<br /> 
         <lum:field id="introductionImage" isImage="true" class="imgleft" ></lum:field> 
         <lum:field id="introduction" isHtml="false" ></lum:field> 
 </xsl:template>

<lum:form>
         <xsl:call-template name="renderStyleLink" ></xsl:call-template>
         <div class="cLumList">
                 <xsl:call-template name="renderTopTitle" ></xsl:call-template>

<lum:control type="lum_filters"></lum:control>

<lum:loop>
                         <table cellpadding="0" cellspacing="0">
                         <tr>
                                 <td class="row">
                                         <xsl:choose>
                                                 <xsl:when test="@href">
                                                         <a href="{@href}">
                                                                 <xsl:call-template name="listItem"></xsl:call-template>
                                                         </a>
                                                 </xsl:when>
                                                 <xsl:otherwise>
                                                         <xsl:call-template name="listItem"></xsl:call-template>
                                                 </xsl:otherwise>
                                         </xsl:choose>
                                 </td>
                         </tr>
                         </table>
                 </lum:loop>

<lum:control type="lum_pagination"></lum:control>

</div>
 </lum:form>

<xsl:template name="renderTopTitle">
         <table class="cLumTopTitle">
                 <tr>
                         <td class="cLumTopTitleImg">
                                 <img src="img/icon.jpg" />
                         </td>
                         <td class="cLumTopTitleHeader">
                                 <lum:interfaceHeader></lum:interfaceHeader>
                         </td>
                 </tr>
         </table>
 </xsl:template>

<xsl:template match="control[@type='lum_interfaceHeader']" name="lum_interfaceHeader">
         <xsl:value-of select="data/title" ></xsl:value-of>
 </xsl:template>

<xsl:template name="renderStyleLink">
         <link href="css/style.css" type="text/css" rel="stylesheet" />
 </xsl:template>
</xsl:stylesheet>

In this XSL, it is possible to see that it imports the XSL "lum_basetheme/List.xsl". The prefix "lum_basetheme" indicates to the portal that the XSL to be imported belongs to the base theme (the one applied previously, or no theme if the current theme is the first). The file is relative to the file that is performing the import (in this case, lumis/service/news/style/List.xsl). So the file to be imported in this example will be the lumis/service/news/style/List.xsl original from the news service.

def/lumis/service/news/style/List.xsl of the theme soccer

<lum:form>
         <xsl:call-template name="renderStyleLink" ></xsl:call-template>
         <div class="cLumList">
                 <xsl:call-template name="renderTopTitle" ></xsl:call-template>

<lum:control type="lum_filters"></lum:control>

<lum:loop>
                         <xsl:choose>
                                 <xsl:when test="@href">
                                         <a href="{@href}">
                                                 <xsl:call-template name="listItem"></xsl:call-template>
                                         </a>
                                 </xsl:when>
                                 <xsl:otherwise>
                                         <xsl:call-template name="listItem"></xsl:call-template>
                                 </xsl:otherwise>
                         </xsl:choose>
                 </lum:loop>

<lum:control type="lum_pagination"></lum:control>

</div>
 </lum:form>

<xsl:template name="listItem">
         <div class="cLumListItem_Soc{((position() - 1) mod 2) + 1}">
                 <b><lum:field id="title" ></lum:field></b> (<lum:field id="publishStartDate/value" ></lum:field>)<br /> 
                 <lum:field id="introductionImage" isImage="true" class="imgleft" ></lum:field> 
                 <lum:field id="introduction" isHtml="false" ></lum:field>
         </div> 
 </xsl:template>

</xsl:stylesheet>

This XSL redefines the form template to change its rendering and redefines the template listItem to change its rendering.

This theme also imports "lum_basetheme/List.xsl".

In the case of the soccer list, the XSL used will be the XSL of the theme soccer. This XSL will import the XSL of the theme sport. Finally, the XSL of the theme sport will import the original XSL of the News service.

In other words, in the case of the soccer list, the form and listItem templates will be taken from the XSL of the theme soccer.

CSSs

The template renderStyleLink, defined in the XSL of the theme sport, renders a link referencing the file "css/style.css". The final file to be referenced will depend on which theme(s) is/are being used on the accessed page.

On the sports list page, the referenced CSS will be from the theme sports. On the soccer page, the CSS used will be from soccer and on the basketball list page, it will be from the theme basketball.

In the CSS of the soccer theme, it is possible to see two classes that are defined in its XSL: cLumListItem_Soc1 and cLumListItem_Soc2.

Images

Just like the CSSs, the images referenced by the HTML code may be replaced depending on which theme(s) is/are being applied on the viewing page.