Changing main menu styles in Publisher

Hello,

Is it possible to change one main menu style with another one? I want to have main menu from Magazine style (style3) in Freestyle style (default style1 i think). I have changed menu.css file replacing code in section 'main menu CSS' from style3.css but it doesn't work. I have the same default Freestyle menu still.

Regards
SP

It would be better to use override.css in case You would like to upgrade template in future.

Please show me url to your site and Ill check why the new styling doesnt work.

Oh, thank you for such quick answer. After you have mentioned about override.css, i have chcecked it and there were some code which could make those menu trouble. Now all is ok. Thank you and im sorry for bothering. But i have one another question. Which code fragment i have to put into override.css from 'main menu CSS' section to style my menu. Really it would be better to not mess with original menu.css.

Ok, just to be clear:
You would like to copy styling from:
Magazine template - color style 3
to:
Publisher template?

No. There are 4 color styles in Publisher template (Options -> Template color). I want to have whole page in Freestyle 'color' but not main menu. I want it in Magazine 'color'. As Magazine i understand here Template color not your another template. They have the same names (template 'Magazine' and one of Template color option in 'Publisher') so there is some missunderstanding.

And i have edited menu.css and copy there code from style3.css (section 'main menu CSS') but i think, as you seggested, better choice is to add that code to override.css. But i dont know which code fragment i have to add to that file.

Ill try to paste here all required code, but some stuff might be missing, so please write back if something doesnt look ok.
Lets start with entire section look:

Code: Select all

#gkPageLogo {background: #FFF; border-bottom: 1px solid #E9E8E7; margin-bottom: 44px!important;}


now the menu:

Code: Select all

.gkMenu {margin-top: 15px;}
.gkMenu > ul {height: 60px;}
.gkMenu > ul > li > a {background: rgba(0, 0, 0, 0); color: #333; font-size: 16px; font-weight: 600; padding: 0 10px; text-transform: none;}
.gkMenu > ul > li:hover > a, .gkMenu > ul > li:active > a, .gkMenu > ul > li:focus > a, .gkMenu > ul > li.active:hover > a, .gkMenu > ul > li.active:active > a, .gkMenu > ul > li.active:focus > a, .gkMenu > ul > li.active > a {background: rgba(0, 0, 0, 0); color: #C75F2C;}
.gkMenu > ul div.childcontent-inner {background: #C75F2C; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none;}


Place it in override.css

Please read first about adding custom CSS:
http://www.gavick.com/documentation/joo ... -template/

Tnak you. All works fine now.