Advanced Branding with External Style Sheets

Introduction

This is the third installment of the branding series. This article will go over employing an external style sheet to the Novell 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 Novell 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 Novell 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.

Instructions

1. Select the GwtTeaming.css file.
   
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.
   
4. Below the .brandingLink class paste the text from the branding_menu.css file.
   
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
   
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.
   

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 Novell Vibe pages or even downloads for popular Novell Vibe documents. We will be adding additional style sheets for this article so look back periodically and find out what's new.

---

Attachments

File Name	Size	Last Updated
Branding Menu (Zip)	1.24 KB	7/06/2011