Novell is now a part of Micro Focus

Advanced Branding with External Style Sheets


This is the third installment of the branding series. This article will go over employing an external style sheet to the Vibe branding area. The previous article on branding was about applying inline javascript events to the branding area for easy navigation. Some administrators have reservations about allowing users to enter javascript. By applying an external style sheet to the Vibe installation users will be able to obtain similar styling as the inline javascript without administrators worrying about security issues. This article will use a Windows server setup to demonstrate this process but it is similar with a Linux server.

This article comes with two files branding_menu.css and branding_menu.html. Administrator level access is required in order to insert the css file. Administrators will need to navigate on the Vibe server to the directory that css file is located. The path for this file is: apache-tomcat/webapps/ssf/js/gwt/gwtteaming/GwtTeaming.css.


  1. Select the GwtTeaming.css file.
    Select GwtTeaming.css
  2. Next, open and copy the text from branding_menu.css file.
  3. Find the class named .brandingLink, this can be done easily by using CTRL+f.
    Finding .brandingLink Class
  4. Below the .brandingLink class paste the text from the branding_menu.css file.
    Inserted Branding Menu CSS
  5. Save changes made to GwtTeaming.css. The server may or may not need to be restarted, while doing this article the file worked without restarting. If the next part of the process doesn't work right the server may need to be restarted.
  6. The next part of the process can be done by end users. Simply open the branding_menu.html file and copy all the text.
  7. Next, navigate to the folder, workspace, or site branding that needs to have the custom branding. Follow the process of the previous branding article and open the advanced branding editor dialog. Folder>Brand Folder>Advanced>HTML
    HTML Editor
  8. Paste the text from the branding_menu.html file into the HTML Editor and select Update>OK>OK
  9. The end result should look like this depending on the background color selected.
    Finished Branding

This branding navigation stills needs to be customized to fit the needs of users. In order to change this go back to the Advanced Branding HTML Editor and change the links to fit users needs. These links can be external pages, internal Vibe pages or even downloads for popular Vibe documents. We will be adding additional style sheets for this article so look back periodically and find out what's new.


File Name Size Last Updated
1.24 KB 7/06/2011

Request a Call

Submit a service request

* Required Fields

First Name is a required field
Last Name is a required field
Email is a required field
Company is a required field
Phone is a required field
City is a required field
Country is a required field
Address is a required field
Zip/Postal Code is a required field
State is a required field
Comments is a required field
I give Micro Focus and/or Micro Focus partners permission to contact me regarding Micro Focus products and services. View our Privacy Policy
is a required field

Request a Call

© Micro Focus