Is it possible to edit the template Menu colour & font using EasysiteWizard?

[DianeM]

Hello can anyone help please?

I have successfully set-up a simple web site using one of the templates supplied with Easysitewizard. I am struggling to find out how to change the menu colour and font which is still the same as supplied with the original template - whilst I have been able to customise the rest of the page OK

Is this a limitation of the software or is there something I have missed?

Thanks in anticipation.

Di.

[dave]

THere is no function provided to do it, but if you know or are willing to learn css you can edit it that way by going into the pencil icon and clicking edit css.

[DianeM]

Hi Dave

Thanks for your reply - I'm afraid I don't know what CSS is?? am willikng to learn & give it a go if you could please provide more info! Thanks a lot. D

[Tracey]

Hi DianeM,

We deeply apologize for the inconvenience, but please be informed that color and font settings of the menu on our EasySiteWizard templates cannot be edited as they depend on the template you have chosen. We will take this concern into consideration while developing a new version of EasySiteWizard application.

Thanks

Tracey

BT Forum Moderator

[cowan85]

If you click on the pencil and choose edit CSS you will get a pop up menu listing the styles used on the website.

If you look through the code you will see a section starting:

---

/*
================================================================================
|                                     MENU                                     |
================================================================================
*/
#ESWuserMenuPosition {
 position: absolute;
 left: 140px;
 top: 316px;
 z-index: 100;
}
#ESWuserMenu {
 position: static;
 width: 180px;
}
div.ESWuserButton0 {
 background-image:url(img/btn_off.gif);
 background-repeat:no-repeat;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-weight: bold;
 color: #ffffff;
 text-align: left;
 padding:0px;
 margin: 0px;
 padding-left:20px;
 margin-top:7px;
}
div.ESWuserButton0:hover {
 background-image:url(img/btn_on.gif);
 background-repeat:no-repeat;
}
div.ESWuserButton1 {
 background-image:url(img/subbtn_off.gif);
 background-repeat:no-repeat;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-weight: normal;
 color: #ffffff;
 text-align: left;
 padding:0px;
 margin: 0px;
 padding-left:20px;
 margin-left:6px;
 margin-top:6px;
}
div.ESWuserButton1:hover {
 background-image:url(img/subbtn_on.gif);
 background-repeat:no-repeat;
}

---

This is what defined what your menu looks like.

In the "div.ESWuserButton0 " and "div.ESWuserButton1 " section you should see the following lines: 

---

font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-weight: normal;
 color: #ffffff;

---

This is what controls the font of the menu. You would need to change these options to reflect what you want the menu to look like. The colour of the actual button is actually determined by an image in the example above and may be the same in yours:

---

background-image:url(img/subbtn_off.gif);

---

Although this can be replaced with a solid colour, or another image. In doing this you would also need to change what the button looks like when the mouse is hovering over it.

Message Edited by cowan85 on 28-09-2009 03:14 PM

[DianeM]

OK I'll give this a try - thanks for the advice!

Di.