Styling

As mentioned in previous chapters the Standard Powering comes with some basic styling options applied by us – change of the navigation bar colour and sizing. But if you have the relevant knowledge on how to edit a cascading style sheet (css) you can make some alterations to the css yourself. It does not give you complete design freedom, but will allow you to make some minor adjustments.

Stylesheet Management

The style sheet management feature allows you to tailor the default powering options to suit your own design and company branding.

You can download your existing default stylesheet and make changes to font, colour, sizes etc and then upload the edited stylesheet. This is something that is best left to someone with design and cascading style sheet (CSS) knowledge.

You can upload a new stylesheet.

Changing the “original” Powering Style Sheet

Each branch in Expert Agent has a website powering style sheet. If you are planning to use a single iframe for head office and pull in all the data from the sub branches, you only have to change one CSS file.

Downloading and Uploading the CSS file

The CSS file can be accessed from within Expert Agent. Go to Tools - Configuration - Website Configuration - Stylesheet Management.

The form below is displayed:

You can now download the file called eapowering.css by clicking on Download. You MUST preserve this file name – it has to be uploaded as eapowering.css otherwise it will not work.

This is a standard CSS file. We assume you are competent in style sheet editing.

It is important none of the style name tags are changed because each is hard coded into EA agent and changing will stop the style from working within your account. 

Changing Height

There are 2 heights that need to be adjusted if you would like to increase or reduce it from the standard height of 360 pixels.  Firstly there is the height of the iframe, the bit which goes into the code for each page, and secondly the powering height for the data which displays inside the iframe.  The second is controlled by the cascading style sheet by a style roughly half way down and displayed as follows:

.scrolling {

width:100%;

height:360px;

overflow:auto;

}

.scrollingShort {

width:100%;

height:310px;

overflow:auto;

}

The ’scrolling’ height must always be 50pixels more than the ‘scrollingShort’ height. 

NOTE – the height must always be specified in pixels – using percentages will give odd results. If at first you change it and 2 vertical scroll bars appear it is because the iframe height is not enough and increasing slightly will fix it.  So for example if the powering heights are 360 and 310 pixels, the iframe height needs to be 360 or above.

Changing Width

You can leave the powering and iframe width set to 100%

Top navigation bar colours

If you would like to change the colour of the top navigation bar where the ‘search, next and previous’ links are situation you can do this from the following style in the cascading style sheet:

#maintoolbar {

background-color: #0b1d5a;

border-bottom: solid 1px #FFF;

}

The background colour can be changed to the hexadecimal value of your choice by replacing the 6 letters/numbers after the #.  This might have already been provided to you by your designers, alternatively you can source colour codes using this website http://www.colorschemer.com/online.html

The same changes can also be applied for the sub navigation bar that appears underneath the top of the powering and appears as so in the style sheet:

#subtoolbar {

background-color: #999999;

border-bottom: solid 1px #FFF;

}

Background Colours

This gets fairly complicated – there are several elements that need changing. We will list them here in due course. Until then, please email This email address is being protected from spambots. You need JavaScript enabled to view it. specifying the hex code for the colour required. Make sure you have saved your css file back to Expert Agent before doing this as Alana will use the version of the file that is currently on the system.

Navigation Bar Graphics

You can upload graphics that get used in the top navigation bar – either to add a bevel or to add wholly different custom images. As standard, this is just text on a coloured background.

To do this, you’ll need to upload a 1px wide graphic that can be repeated across the bar. Then, go to the top of the CSS file and change the following:

Font/size/colour

The font can also be changed from the standard Verdana and for this you simply need to change the font tag throughout the stylesheet along with the size and color accordingly.  The font tags appear as so:

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #FFF;

The standard font tags that can be used are as follows:

font-family: Verdana, Arial, Helvetica, sans-serif;

font-family: Arial, Helvetica, sans-serif;

font-family: "Times New Roman", Times, serif;

font-family: "Courier New", Courier, monospace;

font-family: Georgia, "Times New Roman", Times, serif;

font-family: Geneva, Arial, Helvetica, sans-serif;

Using a font set that is not Windows standard will not display for internet users which do not have that font installed, and it will revert to a default.

More Button

The More button needs to stand out – to change from the standard black, search in the CSS file for:

main text area- plain text link styles

then change the next section.

The default is:

#txtContainer a {

color: #FF0000;

text-decoration: none;

which gives a red More button. Just change Color: to an appropriate Hex code

Resizing the Powering Map

This is controlled in the Expert Agent Powering Setup form under Maintenance>Configure.

Further information and Tips

For more information on style sheet tags and values the following website may help http://www.htmldog.com/guides/cssbeginner/ 

These are the basic styles which can be changed for the web powering.  As you will see there are many more styles within the cascading style sheet but we recommend not changing these unless you have previous experience in this area.

Website Image Management

The images that are used within powering are also customizable and as with the stylesheet management you can upload your own images to replace the existing ones.

Once again this is something that is best left to someone with the appropriate skill set.