Create a New Theme

The default uPortal desktop theme is named universality and located in uportal-war/src/main/resources/layout/theme. If you would like to create a new theme the recommended method is to create a copy of universality and then modify it to meet your needs. An entry also needs to be added to the database to enable your new theme.

Step 1: Create the theme directory

• Create a new theme directory under uportal-war/src/main/resources/layout/theme and ensure there is a .sdf file describing your theme. The recommended approach here is to simply copy the universality theme and then modify it to fit your needs.

Step 2: Register the theme

• To register your new theme in the database, create a .stylesheet-descriptor.xml entity file. You may wish to use the entity file for the universality theme as an example: uportal-warl/src/main/data/required_entities/stylesheet-descriptor/DLMXHTML.stylesheet-descriptor.xml

• To import the .theme file to the database run:

  ant data-import -Dfile=/full/path/to/mynewtheme.theme
  

Step 3: Configure User Profiles

• If you are starting with an empty database you simply need to edit the .layout and .fragment-layout files so that the <theme name=""> entry in the <profile> section matches the name in your .theme file.
• If you have existing users you will need to run SQL to update their profiles to point to the ID of the theme you imported via the .theme file.

Step 4: Create a skin directory

• Skins for the new theme should be made available at uportal-war/src/main/webapp/media/skins/<theme name>. It's generally advisable to copy the existing universality (or applicable other distributed theme) directory as a starting point.

Step 5: Add the skin directory to the maven build

Open uportal-war/pom.xml and find the resource server plugin configuration under the build section.  You will need to add an additional execution referencing your new theme directory.

Note you'll need to add the useGeneratedSources xml node into the uPortal-war/pom.xml so the uPortal build knows where to look for the css files that are generated from the less files.

<plugin>
    <groupId>org.jasig.resourceserver</groupId>
    <artifactId>resource-server-plugin</artifactId>
    <version>${resource-server.version}</version>
    <executions>
        . . .
        <execution>
            <id>aggregate-themename-skins</id>
            <phase>prepare-package</phase>
            <goals>
                <goal>batch-aggregate</goal>
            </goals>
            <inherited>false</inherited>
            <configuration>
                <displayJsWarnings>false</displayJsWarnings>
                <useGeneratedSources>true</useGeneratedSources>
                <includes>
                    <include>media/skins/themename/**/skin.xml</include>
                </includes>
                <sharedJavaScriptDirectory>media/skins/themename/common/javascript</sharedJavaScriptDirectory>
            </configuration>
        </execution>
    </executions>
</plugin>

Step 6: Rebuild/Redeploy uPortal

ant clean deploy-war

Step 7: Restart Tomcat

Restart your tomcat container to activate the change