Advanced Branding with Inline Styles
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, Vibe strips out those events. This is by design to protect 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.
- Select Update and OK. After these are selected the branding area will have those styles added.
- Now that the template is in place it is ready to be customized for a specific Vibe site or workspace.
- 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 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.
- 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.
- 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').
This example is a great way to customize your 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.
|File Name||Size||Last Updated|