Fireworks POPUp Menu costimization 1

[willya340]

Hi

I`ve this question before , but no one answered.

Anyway , I`d like to know how to customize the look of the pop up menu created with fireworks 4.0 , with going to the program again , ie modify the .js file , I`m thinking of removing the borders from the menu , modify the font and many others , I tried to look inside the .js file , but it is so confusing?!!!

Anyone has any idea ?!!!

 

[EugenePaliev]

Hello willya340!

There number of ways to customise pop-up created with FW:
1) rebuild it again in FW;
2) change settings manually on your page (.htm file);
3) change settings manually in .js file (usualy it's fw_menu.js).

I would suggest first way - you may see all changes you do to pop-up view right now. If you prefer to do it manually, here is a tip how to do it (second way):

1) open your page that uses pop-up menu;
2) find function fwLoadMenus() somewhere in the SCRIPT block (usually in HEAD);
3) change parameters of this function to fit your needs. Here is the whole function:

function fwLoadMenus() {
if (window.fw_menu_0) return;
window.fw_menu_0 = new Menu("root",36,19,"Verdana, Arial, Helvetica, sans-serif",12,"#ffffff","#00538d","#00538d","#8ec6ec");
fw_menu_0.addMenuItem("a","location='a'"
fw_menu_0.addMenuItem("b","location='b'"
fw_menu_0.addMenuItem("c","location='c'"
fw_menu_0.hideOnMouseOut=true;

fw_menu_0.writeMenus();
} // fwLoadMenus()

What you may change is marked bold.

1) First item - 36 (in my example, you will probably have different settings) - sets the pop-up width, change to your pop-up wider or more narrow;
2) second item - 19 - cell height;
3) third item - "Verdana, Arial, Helvetica, sans-serif" - sets font family;
4) fourth - 12 - font size;
5) "#ffffff" - font color;
6) sixth item - "#00538d" - font hover color;
7) seventh item - "#00538d" - cell bg color;
8) last item - "#8ec6ec" - cell hover bg color.

I hope you'll find this helpful, but I would again suggest to rebuild pop-ups using FW!

Good Luck!

 

[willya340]

Thanks Eugene for replying , I allready know this bit of info , what I`m looking for is how to remove the cell borders in the popup menus , can I do it in the .js file , because i tried to tweak the html code but there is nothing with borders there.

Thanks again , and if u can help further , I`ll be gratefull :-V

 

[EugenePaliev]

Here is the .js code (first function Menu()):

function Menu(label, mw, mh, fnt, fs, fclr, fhclr, bg, bgh) {
this.version = "990702 [Menu; menu.js]";
this.type = "Menu";
this.menuWidth = mw;
this.menuItemHeight = mh;
this.fontSize = fs||12;
this.fontWeight = "plain";
this.fontFamily = fnt||"arial,helvetica,verdana,sans-serif";
this.fontColor = fclr||"#000000";
this.fontColorHilite = fhclr||"#ffffff";
this.bgColor = "#555555";
this.menuBorder = 0;
this.menuItemBorder = 1;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "#ffffff";
this.menuBorderBgColor = "#777777";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";
this.items = new Array();
this.actions = new Array();
this.childMenus = new Array();

That removes any border! Was that what you really needed?

 

[willya340]

Thank u very much Eugene , U r no.1 , u don`t know how u saved me with your answer , appreciate your help :-V

 

[EugenePaliev]

Thank you willya340! You are always welcome!!!

 

[outra9e]

EUgene

I have asked this question in other threads

Do you know how to specify a frame for the target of a link in a fireworks generated pop up menu?

I have tried to change the fw_menu.js, but I am mot having much luck, at present it puts the pages in the same frame as the menu!!!!

Cheers