Customize the Look and Feel of User-Interface

Customize the Look and Feel of User-Interface

An easy way to customize your Geoportal is to change its text and color scheme. Instructions are in the three sections below.

1. Customize the Geoportal interface Text
   
   Most of the text for the Geoportal interface is managed in the gpt.properties file in the \\geoportal\WEB-INF\classes\gpt\resources folder. The text seen on the interface is associated with a unique identifying 'bean', which maps it to text in the gpt.properties file.
   
   
   
   It is important to review the text in the gpt.properties file and update it according to your organization's Geoportal implementation. To find out what text in the interface is mapped to what text string in the gpt.properties file, do the following:
   • In a text editor, open the body.jsp file associated with the web page that you want to change. These files are stored in the \\geoportal\catalog\content folder. In this example, we will open the aboutBody.jsp file and alter text on the About page.
   • Note where the bean text is located. It is often indicated by a preceding 'value="#{gptMsg' string. In our aboutBody.jsp file, there are two beans referenced. In this example, the second one will be updated. This bean, catalog.content.about.statement, contains text that will display on the About page describing your organization's Geoportal extension implementation.
   • Open the gpt.properties file in a text editor
   • Search for the 'catalog.content.about.statement' bean. You should see an entry like the following:
     
     
     
     catalog.content.about.statement = \

<p>\

customize this text to describe your organization's Geoportal extension implementation

</p>
   • Change the text after the '=' sign to include appropriate text for your organization's Geoportal
   • Save the gpt.properties file
   • Refresh the web page, click on the "About" link at the top, and see that the page has been updated
   • If other jsp pages referenced the catalog.content.about.statement bean, those pages would be updated with your new text in the Geoportal interface as well. The bean references are useful for quickly updating buttons and text used throughout the Geoportal interface.
   Verify that you have updated text associated with the "Privacy", and "Disclaimer" pages. These are often overlooked.
2. Change the Default Color Theme to Another Pre-Defined One
   
   The \\geoportal\catalog\skins\themes directory contains 2 sub-folders: blue and red. The active color theme is referenced in the \\geoportal\catalog\skins\lookAndFeel.jsp file. By default, the active theme is the red theme. The simplest customization is to change from one pre-defined color theme to another – for example, from the red theme to the blue one.
   • Navigate to the \\geoportal\catalog\skins folder.
   • Open the lookAndFeel.jsp file in a text editor.
   • Notice there are three <link rel="stylesheet" …> tags. The first (...\tundra.css) defines the stylesheet reference for the map in the Create Metadata interface defining the bounding box extent for a data resource. The second (...\main.css) defines the color scheme for the Geoportal interface. The third (...\preview.css) defines the color scheme for the Preview functionality.
   • By default, the main and preview stylesheets are set to reference stylesheets in the "red" themefolder. When you change these to reference the "blue" folder, the Geoportal interface and Preview function will be displayed according to styles in the "blue" theme folder. it will reference the /themes/red/main.css. Change these reference to point to the blue folder, as shown below:
     
     
     
     <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/catalog/skins/themes/blue/main.css" />

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/catalog/skins/themes/blue/preview.css" />
     
     
     
     /themes/blue/main.css.
   • Restart the geoportal web application, and then load the Geoportal interface in a browser. You should see a blue interface.
3. Create Your Own Color Theme
   
   The simplest way to create your own color theme is to use one of the pre-defined themes as a base and edit it. Make a copy of one of the pre-defined themes that are available out-of-the-box and modify its images and class definitions:
   • Navigate to the \\geoportal\catalog\skins\themes folder.
   • Copy the red folder into the same directory, giving it a new name (i.e. "green")
   • Open the gpt/images directory
   • Replace any of the images with your own.
   • Modify the gpt/main.css file to define new styling.
4. Switch the Default Favicon
   
   You may want to change the favicon from the default ESRI globe to something more suited to your organization. Instructions for doing this are provided in Switch the Default Favicon.