Skip to Content

Look&Feel customization


After customizing the Logon page (described in
Portal Customizations Intro – Login Part 1 and Portal Customizations Intro – Login Part 2 ) this blog leads you through the customization possibilities to your portals “Look and Feel” which is created through the portal desktop. A portal desktop is defined through the framework page and the portal theme. Both can be customized to a certain level without changing code. If that is not enough, the framework page can be further customized by modifying existing components PAR files or adding new components (which are usual iviews, but they have some special settings in the portalapp.xml). You can change the portal theme with the onboard Theme Editor which is located under the System Administrator Role in the sub-tab “Portal Desktop”;. The theme editor gives you the ability to apply the corporate colors of the portal, exchange the standard images with the company logo and the name of the portal (masthead), change the character styles defined in the CI . The framework page is a special page and its content can be customized by changing the properties of the iViews on the page or by customizing the JSP files which are located in the PAR files of the respective iview. The framework page contains 4 iviews and a page and uses the single full-width column:

  • Masthead Area(Welcome , Logon/Logoff, Personalize)
  • Tools Area (Collaboration Link, Search)
  • Top Level Navigation (TLN)
  • Page Title bar
  • Desktop Innerpage (Layout is a 2 column :Narrow-Wide )
    • Detailed Navigation
    • Dynamic Navigation
    • Related Links
    • Portal Favorites
    • Content Area
    • Detailed Navigation (for Collaboration)

The easiest part of creating a custom Look&Feel for your portal is modifying the Masthead through the Portal theme editor. The Masthead is the top part of the portal once you are logged in. It looks in the default portal like the image below. So the first changes are probably:

  • Add/exchange images
  • Change the background color of the welcome box (the orange box with the “welcome”) and the Functional Links (Help, Personalize and Log Off)

image
Certain changes of the Welcome Text are also possible:

  • Add a salutation (e.g. Mr or Mrs, as defined in the userprofile)
  • Show only a part of the name (Welcome Kai)or job title with last name (Welcome CEO Unewisse)

What of is shown can be changed without coding; you simply need to go to the UME entry ume.users.displayname_template and enter the parameter and characters you want. It can be a combination of :

  • User attributes: The available user attributes are: {firstname}, {lastname}, {salutation}, {title}, {jobtitle}, {company}, {department}, {currency}, {email}, {telephone}, {mobile}, {fax}, {streetaddress}, {city}, {zip}, {country}, {state}, {locale}, {timezone}, {j_user}
  • Characters: Most characters whose unicode lies between u0020 and u007E can be written as they are. These are characters such as A-Z, a-z, commas, semicolons,etc..
  • Unicode characters: Characters whose unicode does not lie between u0020 and u007E, must be written in the form uXXXX

Further things you could add into the JSP Code:

  • Current Date and time to the masthead
  • Change the focus from the “Welcome” to a more useful place like the Search component

This requires to change the Masthead JSP and Toolbar JSP and hence two custom PAR files. You have to add to the Search Input Field within the Toolbar JSP, and then change the ID within the JS function setFocusOnHeader() to the search field ID.

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Matthias Kasig
    Hi,

    nice blog – as we are about to introduce EP to our SLD I was also looking for part 1 and 2 of this series, but couldn’t find em.
    can u link them?
    thank u, matthias

    (0) 
  2. Nidhi Malik
    Hi,

    Its a very useful blog. I am trying to change the welcome text from Welcome Firstname Lastname to Welcome Firstname. I changed the suggested parameter in the configtool but still I cannot see the changes on masthead. I see the name changed in Identity Management screen but not on masthead. Can you please suggest?

    Regards
    Nidhi

    (0) 

Leave a Reply