Novell Home

Advanced Branding with Inline Styles

Introduction

There are three different processes for creating more advanced branding displays. The first (1) process uses the Advanced Branding tool discussed in the previous article. With this tool users can add images, change colors, and add links. The second (2) process to create custom branding is done using inline styles in HTML. If users have ever tried to enter inline DOM events they will have noticed that, by default, Novell Vibe strips out those events. This is by design to protect Novell Vibe against XSS attacks. However, this function can be enabled for specific users or groups. For this article we will just focus on this second (2) process of adding DOM events to the HTML of our branding. In a later article we will introduce the third (3) branding process, adding an external style sheet to the file directory.

To see an example of what will be covered in this article, visit our Virtual Sandbox.

There are two files attached to this article: simple.html and inline.html. These files correspond to the different processes of branding creation. The "simple.html" file is a table with five links in it. This example is meant for everyday users who just want a little more functionality. The "inline.html" file is similar to the "simple" example but it adds some inline events that spruce up the look of the links and how they function. This example is for administrators and trusted users of the admin since they will be able to add javascript.

Instructions

  1. In order to create events like onmouseover, onmouseout, or onclick users must be given the ability to add javascript. Warning: Administrators should only give trusted users or groups the ability to do add javascript. Giving these rights to all users should be avoided, to protect Novell Vibe against XSS attacks. Therefore it's prudent to only allow the admin these rights. The process of enabling this feature is outlined in the documentation. Enabling Individual Users to Bypass the XSS Security Filter
  2. Once the ability to add javascript has be enabled copy the inline.html text and paste it into the Advanced Branding>Edit HTML Source.

    Edit HTML Source
    HTML Source Editor dialog

    Dialog

  3. Select Update and OK. After these are selected the branding area will have those styles added.

     Inline Branding
    Color change on mouse over.

     Inline Hover

  4. Now that the template is in place it is ready to be customized for a specific Novell Vibe site or workspace.
  5. Go back to the HTML Source Editor. There are a few things that can be adjusted to customize this template, namely the URLs, link text and image. We want this to open a common folder that is updated frequently. So we must add the permalink to the onclick event. We must paste the permalink over the text that says ADD URL HERE and then change the text of the "LINK" to something that correlates to the URL. We can also add any other kind of url whether internal or external to Novell Vibe. If the link is external it is recommended that instead of onclick="window.location.href='URL'" use onclick="window.open('URL')" to open the link in a new window.

     Edit Inline

  6. Depending on the length of the text for the links the width and position for each <div> will need to be adjusted accordingly. It is easier to view the html code if the word wrap is not checked.

    Width

  7. All the color schemes can be adjusted to fit certain needs. The colors for the links are located in the in the onmouseover and onmouseout events (this.style.color='gray').

    Final Branding

This example is a great way to customize your Novell Vibe branding with out much overhead. Keep an eye out for our next branding article. It will discuss using CSS to bring maximum customization to the branding area.


Attachments

File Name Size Last Updated
0.75 KB 5/23/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

Read our Privacy Policy.

Request a Call

© 2014 Novell