Putting your corporate logo on the Valence framework

[robert.swanson]

Out of the box, the Valence Application Framework comes with its own header that looks like this:

http://www.cnxcorp.com/forum_images/Valence_Header_Demo_20080721.jpg

We've had a few requests for instructions on how to incorporate a custom logo into the header of the Valence framework. It's a pretty simple process:

The header is simply an html fragment. You can find it on your IFS at valence-1.1/html/vvheader.html.

Copy this vvheader.html into a backup file (just to be safe), then you're free to change it to whatever you want. The only rule is that you must include somewhere in the html fragment the <%line1%> and <%line2%> replacement tags.

<%line1%> is replaced by the portal with the logged-in user, Log Out, Help and About links.
<%line2%> is replaced with the environment name.

Normally these would go on upper right of the page, but you're free to put them on the left or in the center or wherever you want.

That's all there is to it!

Here's a before-after example of the html code for the header:

BEFORE (the "out of the box" default)...

<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr class="banner">
<td valign="top"><img height="50" src="../extjs/resources/images/default/atomic/valence_logo3.jpg" width="356" alt="Valence Web Application Framework by CNX" border="0" /></td>
<td width="100%" background="../extjs/resources/images/default/atomic/hdr_bgd3.jpg"><span style="float:right;padding-right:10px;font-family:arial;font-size:10px;text-align:right;line-height: 1.75em;"><%line1%><br /><strong style="color:#0485C8;"><%line2%></strong></span></td>
</tr>
</tbody>
</table>


AFTER (sample code from another Valence client):


<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr class="banner">
<td valign="top" background="../extjs/resources/images/header/hdr_bgd3.jpg"><img src="../extjs/resources/images/header/logo_fp_270x50.jpg" alt="Focal Point" width="270" height="50" border="0" /></td>
<td width="100%" background="../extjs/resources/images/header/hdr_bgd3.jpg"><span style="float:right;padding-right:10px;font-family:arial;font-size:10px;text-align:right;line-height: 1.75em;"><%line1%><br /><strong style="color:#0485C8;"><%line2%></strong></span></td>
<td valign="middle" background="../extjs/resources/images/header/hdr_bgd3.jpg" style="padding: 0 3px 0 0;"><img src="../extjs/resources/images/header/art_of_light_44x42.jpg" alt="The Art of Light" width="44" height="42"></td>
</tr>
</tbody>

</table>


...and the resulting customized header looks like this:

http://www.cnxcorp.com/forum_images/FP_Header_Demo_20080721.jpg

The possibilities are quite unlimited! Just depends on how good your artwork is. This is typically best left to graphic artists. Unless you're one of those uber-talented web designer/programmer guys!

[robert.swanson]

As a follow up to the previous post, here's how you can replace the welcome page with something more relevant to your own company...

The "default" Welcome Page looks like this:
http://www.cnxcorp.com/forum_images/Valence_Welcome_Page_20080721.jpg

You can and should replace this with something more applicable to your users. And the process is very simple.

Whereas in the header you're just replacing an html fragment, the Welcome Page is its own complete html page with full html markups. The IFS path for the Welcome Page is /valence-1.1/welcome/welcome.html. Simply replace this html file with anything you want, no restrictions! Any html editor will do.

For example, you could put company announcements, phone numbers for IT support, information about upcoming downtime on your system, current developments, company picnics, who got hired, who got fired, embarrassing photos of co-workers.... you name it! All you have to do is edit the file whenever you want to change what shows. The possibilities are mind-boggling!

[richard.milone]

Just a quick follow-up to this. As of Valence 1.2, you will find the about page, welcome page and Valence portal header markup in the vvresources folder.