How to Customize a Theme

In this example you will customize a Host Integrator theme by modifying the logo, colors, fonts, and other stylistic and design formats. Host Integrator contains three complete themes that are available from the Customization tab in Web Builder. You can personalize these themes to increase the impact and effectiveness of your Web application.

Problem:

You have generated a Web application using one of the available themes on the Customization tab, however, the look and feel of the supplied theme is not quite appropriate for your situation.

 

Solution:

By walking through the steps below you will:

When complete the Web application will be personalized for your use and available to be used with other Web applications.

The work flow in each of these procedures is:

  1. Deploy an existing Web application.
  2. Modify the deployed Web application's theme as needed.
  3. Rename and copy the new theme folder back into the existing themes directory to be used again. If you modify an existing theme, such as Classic Silver, and do not rename it, then it will no longer be available in its original format to use without re-installing the product.


Let's begin:

Changing the logo graphic

  1. Generate and deploy a Web application using the theme that most closely matches your final Web application goal.


  2. Locate the directory where the new Web application is deployed, and paste the new image file into <deployed Web app>\themes\<theme_name>\images.


  3. Rename header-logo.png to header-logo.png.bak.


  4. Rename the new image to header-logo.png.


  5. To avoid the possibility of having to adjust other settings, resize your new image to match the original logo size.


  6. Open the Web application in the browser. The new logo should be visible.


  7. If the image doesn't fit, you may need to edit the following properties:
  8. Save your changes:
    1. Rename the theme folder to a new theme name. (Optional)
    2. Copy the theme folder back into <vhi_install_directory>\webbuilder\lib\themes.
    3. The new theme is now available from the drop-down list on the Customization tab.


Additional changes you can make:


Changing font and background colors (divs)

  1. Generate and deploy a Web application using the theme that most closely matches your final Web application goal.


  2. Locate the directory where the new Web application is deployed, and open <deployed Web app>\themes\<theme_name>\styles.css.


  3. Scroll to the /* begin major colors */ section.


  4. To update the background color, modify the background-color: values.


  5. To update font colors, modify the color: values.


  6. Open the Web application in the browser. The new colors should be visible.

    If the color changes are not visible, verify that they are not being overridden in a more specific selector. In the file, locate the section which defines the properties for the area to be changed, and update any color values as necessary.


  7. Save your changes:
    1. Rename the theme folder to a new theme name. (Optional)
    2. Copy the theme folder back into <vhi_install_directory>\webbuilder\lib\themes.
    3. The new theme is now available from the drop-down list on the Customization tab.
Notes:

Colors can be specified in one of two ways:


Changing font styles and sizes

  1. Generate and deploy a Web application using the theme that most closely matches your final Web application goal.


  2. Locate the directory where the new Web application is deployed, and open <deployed Web app>\themes\<theme_name>\styles.css.


  3. Scroll to the /* begin typography/font settings */ section.


  4. To update the size of the font, modify the font-size: value.


  5. To update the font family or style, modify the font-family: value.


  6. Open the Web application in the browser. The new fonts should be visible.

    If the font changes are not visible, verify that they are not being overridden in a more specific selector. In the file, locate the section which defines the properties for the area to be changed, and update any font values as necessary.


  7. Save your changes:
    1. Rename the theme folder to a new theme name. (Optional)
    2. Copy the theme folder back into <vhi_install_directory>\webbuilder\lib\themes.
    3. The new theme is now available from the drop-down list on the Customization tab.
Notes:

If you change the font sizes in the Seattle theme, you may also need to adjust the location of the div.actions div in styles.css


Changing terminal colors

  1. Generate and deploy a Web application using the theme that most closely matches your final Web application goal.


  2. Locate the directory where the new Web application is deployed, and open <deployed Web app>\themes\<theme_name>\styles.css.


  3. Scroll to the /* begin terminal screen style */ section.


  4. Update the background-color: value and color: value.


  5. Open the Web application in the browser. The new terminal colors should be visible.


  6. Save your changes:
    1. Rename the theme folder to a new theme name. (Optional)
    2. Copy the theme folder back into <vhi_install_directory>\webbuilder\lib\themes.
    3. The new theme is now available from the drop-down list on the Customization tab.
Notes:

Colors can be specified in one of two ways:


Setting a background image

  1. Generate and deploy a Web application using the theme that most closely matches your final Web application goal.


  2. Locate the directory where the new Web application is deployed, and open <deployed Web app>\themes\<theme_name>\styles.css.


  3. Scroll to the /* begin begin major colors */ section.


  4. Find the selector for the div where you want to set a background image, for example div.header. If one doesn't exist you may have to create one using the format div.<div class id>.


  5. Add the line background-image: url('<path to image file relative to styles.css>'); For example: background-image:url('images/myimage.jpg');


  6. Open the Web application in the browser. The new background image should be visible.


  7. You can refine the behavior of the background image by using tags such as background-repeat: no-repeat;. See a complete CSS reference for more information.


  8. Save your changes:
    1. Rename the theme folder to a new theme name. (Optional)
    2. Copy the theme folder back into <vhi_install_directory>\webbuilder\lib\themes.
    3. The new theme is now available from the drop-down list on the Customization tab.

Changing to a fixed layout width

If you are using a classis theme as a starting point:

  1. Generate and deploy a Web application using the theme that most closely matches your final Web application goal.


  2. Locate the directory where the new Web application is deployed, and open <deployed Web app>\themes\<theme_name>\layout.css.


  3. Update the first selector and add a new selector to match:
  4. html, body {
    	margin: 0;
    	width: 100%;
    	text-align: center; /* to work around IE quirks mode */
    }
    div.main {
    	width: 1024px;  /* can be adjusted to the desired width */
    	border: solid black 2px;
    	margin: auto;
    	text-align: left; /* to work around IE quirks mode */
    }		
    	
  5. Open the Web application in the browser. The main div containing all the content should be centered and have a fixed width.


  6. Save your changes:
    1. Rename the theme folder to a new theme name. (Optional)
    2. Copy the theme folder back into <vhi_install_directory>\webbuilder\lib\themes.
    3. The new theme is now available from the drop-down list on the Customization tab.

 

If you are using Seattle theme as a starting point:

  1. Generate and deploy a Web application using the theme that most closely matches your final Web application goal.


  2. Locate the directory where the new Web application is deployed, and open <deployed Web app>\themes\<theme_name>\layout.css.


  3. Adjust the width in the div.main selector to 1024px; or whatever value is appropriate.

    Due to the absolute positioning of the div.actions menu, the Seattle theme does not lend itself to being centered.

  4. Open the Web application in the browser. The main div containing all the content should have a fixed width.


  5. Save your changes:
    1. Rename the theme folder to a new theme name. (Optional)
    2. Copy the theme folder back into <vhi_install_directory>\webbuilder\lib\themes.
    3. The new theme is now available from the drop-down list on the Customization tab.

Updating a theme preview snapshot

Snapshot preview images are used in the Theme Selection dialog box in Web Builder.

  1. Generate and deploy a Web application using the theme for which you want to create snapshots.


  2. For each page in the Web application that you will take a snapshot:
    1. Expand the browser to a reasonable size, such as 1024x768
    2. Navigate to the page you want to capture
    3. Press the keys Alt + Printscreen (Windows only)
    4. Open the Windows Paint application
    5. Paste the screenshot using CTRL + V or Edit->Paste
    6. Crop the screenshot as needed
    7. Save the screenshot as a PNG, JPG, or GIF image in <vhi install location>\lib\webbuilder\themes\<themename>\_snapshots.
  3. The new snapshot should be visible the next time the Theme Selection dialog box displays.




 

 

  Attachmate