NOTE: This thread is specific to pre-Valence 4.0 installations. For information on customizing the look and feel of the Valence 4.0 portal, refer to this blog post.
================================================== ================================================
Out of the box, the Valence Application Framework comes with its own header that looks like this:
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)...
AFTER (sample code from another Valence client):
...and the resulting customized header looks like this:
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!
================================================== ================================================
Out of the box, the Valence Application Framework comes with its own header that looks like this:
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)...
HTML Code:
<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>
HTML Code:
<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>
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!
Comment