How do I change the menu color

Professional Jomal template designed to be easily adaptable to all kinds of business
GK User
Mon Jan 23, 2012 12:55 pm
Hy! I want to use Corporate 2 template ( 1.5 version ) but I need to change the menu color in Black, and I don't find where is the original colour.

I use style 4 if that matter.

Please help me :D it's important
Thanks in advance
User avatar
Senior Boarder

GK User
Mon Jan 23, 2012 2:24 pm
I solved the problem, in fact I had a plugin that I spoil my website.
User avatar
Senior Boarder

GK User
Mon Jan 23, 2012 2:30 pm
axell_moto wrote:Hy! I want to use Corporate 2 template ( 1.5 version ) but I need to change the menu color in Black, and I don't find where is the original colour.

I use style 4 if that matter.

Please help me :D it's important
Thanks in advance



Hi.
To change menu color you need to edit some code.
In templates / gk_corporate2 / css / gk_stuff.css :
Code: Select all
 #gk-nav .gk-megamenu { background: /your color, if black: #000000/; } /** main menu color **/

#gk-nav #gksdl-mainnav>ul>li { padding:0 11px; height:20px; line-height:20px; margin:10px 0; border-left:1px solid /your color/; } /** vertical line separating columns **/

#gk-nav #gksdl-mainnav>ul>li.active>a { display:block; height:20px; line-height:20px; background:/your color/; -moz-box-shadow:1px 1px 1px /your color/; -webkit-box-shadow:1px 1px 1px /your color/; }

#gk-nav ul.level0>li>div.childcontent { font-size:100%; margin-left:0!important; margin-top:0px!important; background: /your color/; -moz-box-shadow:1px 1px 1px /your color/; -webkit-box-shadow:1px 1px 1px /your color/; }

#gk-nav ul.level0>li li div.childcontent { font-size:100%; margin-left:190px!important; margin-top:-30px!important; background: /your color/; -moz-box-shadow:1px 1px 1px /your color/; -webkit-box-shadow:1px 1px 1px /your color/; }

I checked it all and it works for me.
If you want you can change font colors and horizontal separating lines too. Everything is in gk_stuff.css file.

//edit: ohh, you have already solved the problem... Maby someone else will need it ;)
User avatar
Platinum Boarder

GK User
Mon Jan 23, 2012 4:07 pm
Yes. Thanks a lot anyway
User avatar
Senior Boarder

GK User
Mon Jan 23, 2012 4:08 pm
No problem at all.
See you around...
User avatar
Platinum Boarder

GK User
Mon Jan 23, 2012 4:12 pm
I have a more question: How can I make the menu Corporate 2 will appear like the menu of Game Magazin? I whant to be same ...
User avatar
Senior Boarder

GK User
Mon Jan 23, 2012 4:53 pm
You mean appearance (colors etc.) or animation?
User avatar
Platinum Boarder

GK User
Mon Jan 23, 2012 5:10 pm
appearance, colors, the same menu and if is possible I want to be rounded corner
User avatar
Senior Boarder

GK User
Mon Jan 23, 2012 5:18 pm
I asked our programmers and I get answer: " It is complex custom work."
User avatar
Platinum Boarder

GK User
Mon Jan 23, 2012 5:19 pm
Rounded corner or the menu Game Magazin?
User avatar
Senior Boarder

GK User
Mon Jan 23, 2012 5:20 pm
Moving all menu.
User avatar
Platinum Boarder

GK User
Mon Jan 23, 2012 5:25 pm
Ah. Ok then ... thanks a lot. I think a change the template with other
User avatar
Senior Boarder

GK User
Mon Jan 23, 2012 5:26 pm
Ok, as you wish. I asked about round corners and the answer is: "rather not - border-radius for specific container and that's all."
User avatar
Platinum Boarder

GK User
Sat Feb 18, 2012 12:00 pm
How can i change the menu color for joomla 1.7 template
the override thing does not work

so please help me with the code for joomla 1.7 - corporate 2 template
User avatar
Junior Boarder

GK User
Sat Feb 18, 2012 6:05 pm
This is best after me working on it for an hour

The whole source code is ready - you can just copy and paste in your override.css and enable your settings for override.css ( turn it on ) - the demo is on my site - http://squaresmicrosystems.com

Code: Select all

/*
#------------------------------------------------------------------------
# penguinMail - December 2010 (for Joomla 1.6)
#
# Copyright (C) 2007-2011 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

/* Here you can include your override CSS styles */

#gkMenu {
    background-color: #F88017;
}
#gkWrap2 .box_menu h3, #gkWrap2 .box_text h3, #gkWrap2 .box h3 > span {
    background: none repeat scroll 0 0 #F88017;
}
a.readon, input[type="submit"], .adminform button, input[type="button"] {
    background: none repeat scroll 0 0 #168EF7;
}
#gkWrap3 .box_menu h3, #gkWrap3 .box_text h3, #gkWrap3 .box h3 > span {
    background: none repeat scroll 0 0 #F88017;
}
div.box.dark {
    background: none repeat scroll 0 0 #FFFFFF !important;
  border: 1px solid #8A847A;
}
div.box.dark a {
    color: #000000 !important;
}
div.box.dark > h3 > span {
    background-color: #F88017 !important;
  color: #FFFFFF !important;
}
.nspArt p.nspText {
    color: #000000;
    float: none;
}
#gkMainBlock a:hover {
    color: #000000;
}

div.gk-menu > ul.level0 > li.active > a, div#gkDropMain > ul > li.active > a, div.gk-menu > ul.level0 > li:hover > a, div#gkDropMain > ul > li:hover > a, div.gk-menu > ul.level0 > li.active:hover > a, div#gkDropMain > ul > li.active:hover > a {
    background: none repeat scroll 0 0 #000000;
}
.nspHeader {
    color: #168EF7;
    font-size: 150%;
    line-height: 1.2em !important;
    margin-bottom: 6px;
}
div.gk-menu > ul.level0 > li > .childcontent .gkcol {
    background-color: #168EF7;
    float: left;
}
div.gk-menu > ul.level0 > li .childcontent ul li {
    background: url("../images/menu_bullet.png") no-repeat scroll 2px center #168EF7;
    border-top: 1px solid #000000;
}
div.gk-menu > ul.level0 > li {
    border-left: 1px solid #000000;
}
div.gk-menu > ul.level0 > li .childcontent ul {
    background: none repeat scroll 0 0 #000000;
    margin: 0 7px;
}
div.gk-menu > ul.level0 > li .childcontent ul li a {
    color: #FFFFFF;
}
div.gk-menu > ul.level0 > li .childcontent ul li a:hover {
    color: #FFFFFF;
    text-decoration: none;
}
div.gk-menu > ul.level0 > li > .childcontent .module {
    background: none repeat scroll 0 0 #168ef7;
}
div.gk-menu > ul.level0 > li .childcontent ul li li {
    background: url("../images/menu_bullet.png") no-repeat scroll 2px center #168ef7;
    border-top: 1px solid #000000;
}
div.gk-menu > ul.level0 > li li.group .gk-group-content > ul {
    background-color: #168EF7;
}
div.gk-menu > ul.level0 > li .childcontent .gkcol ul {
    background-color: #168EF7;
    padding: 0 !important;
}
div.gk-menu > ul.level0 > li li.group .group-title {
    background: none repeat scroll 0 0 #168EF7;
    border: 1px solid #000000;
}




Hope this helps you - you can change your color codes accordingly - to get the color codes visit http://www.computerhope.com/htmcolor.htm

Regards,
spokanet
User avatar
Junior Boarder

GK User
Sat Feb 18, 2012 6:06 pm
spokanet wrote:How can i change the menu color for joomla 1.7 template
the override thing does not work

so please help me with the code for joomla 1.7 - corporate 2 template


This is best after me working on it for an hour

The whole source code is ready - you can just copy and paste in your override.css and enable your settings for override.css ( turn it on ) - the demo is on my site - http://squaresmicrosystems.com

Code: Select all

/*
#------------------------------------------------------------------------
# penguinMail - December 2010 (for Joomla 1.6)
#
# Copyright (C) 2007-2011 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

/* Here you can include your override CSS styles */

#gkMenu {
    background-color: #F88017;
}
#gkWrap2 .box_menu h3, #gkWrap2 .box_text h3, #gkWrap2 .box h3 > span {
    background: none repeat scroll 0 0 #F88017;
}
a.readon, input[type="submit"], .adminform button, input[type="button"] {
    background: none repeat scroll 0 0 #168EF7;
}
#gkWrap3 .box_menu h3, #gkWrap3 .box_text h3, #gkWrap3 .box h3 > span {
    background: none repeat scroll 0 0 #F88017;
}
div.box.dark {
    background: none repeat scroll 0 0 #FFFFFF !important;
  border: 1px solid #8A847A;
}
div.box.dark a {
    color: #000000 !important;
}
div.box.dark > h3 > span {
    background-color: #F88017 !important;
  color: #FFFFFF !important;
}
.nspArt p.nspText {
    color: #000000;
    float: none;
}
#gkMainBlock a:hover {
    color: #000000;
}

div.gk-menu > ul.level0 > li.active > a, div#gkDropMain > ul > li.active > a, div.gk-menu > ul.level0 > li:hover > a, div#gkDropMain > ul > li:hover > a, div.gk-menu > ul.level0 > li.active:hover > a, div#gkDropMain > ul > li.active:hover > a {
    background: none repeat scroll 0 0 #000000;
}
.nspHeader {
    color: #168EF7;
    font-size: 150%;
    line-height: 1.2em !important;
    margin-bottom: 6px;
}
div.gk-menu > ul.level0 > li > .childcontent .gkcol {
    background-color: #168EF7;
    float: left;
}
div.gk-menu > ul.level0 > li .childcontent ul li {
    background: url("../images/menu_bullet.png") no-repeat scroll 2px center #168EF7;
    border-top: 1px solid #000000;
}
div.gk-menu > ul.level0 > li {
    border-left: 1px solid #000000;
}
div.gk-menu > ul.level0 > li .childcontent ul {
    background: none repeat scroll 0 0 #000000;
    margin: 0 7px;
}
div.gk-menu > ul.level0 > li .childcontent ul li a {
    color: #FFFFFF;
}
div.gk-menu > ul.level0 > li .childcontent ul li a:hover {
    color: #FFFFFF;
    text-decoration: none;
}
div.gk-menu > ul.level0 > li > .childcontent .module {
    background: none repeat scroll 0 0 #168ef7;
}
div.gk-menu > ul.level0 > li .childcontent ul li li {
    background: url("../images/menu_bullet.png") no-repeat scroll 2px center #168ef7;
    border-top: 1px solid #000000;
}
div.gk-menu > ul.level0 > li li.group .gk-group-content > ul {
    background-color: #168EF7;
}
div.gk-menu > ul.level0 > li .childcontent .gkcol ul {
    background-color: #168EF7;
    padding: 0 !important;
}
div.gk-menu > ul.level0 > li li.group .group-title {
    background: none repeat scroll 0 0 #168EF7;
    border: 1px solid #000000;
}



Hope this helps you - you can change your color codes accordingly - to get the color codes visit http://www.computerhope.com/htmcolor.htm
User avatar
Junior Boarder

GK User
Sat Feb 18, 2012 6:07 pm
mikeMB wrote:
axell_moto wrote:Hy! I want to use Corporate 2 template ( 1.5 version ) but I need to change the menu color in Black, and I don't find where is the original colour.

I use style 4 if that matter.

Please help me :D it's important
Thanks in advance



Hi.
To change menu color you need to edit some code.
In templates / gk_corporate2 / css / gk_stuff.css :
Code: Select all
 #gk-nav .gk-megamenu { background: /your color, if black: #000000/; } /** main menu color **/

#gk-nav #gksdl-mainnav>ul>li { padding:0 11px; height:20px; line-height:20px; margin:10px 0; border-left:1px solid /your color/; } /** vertical line separating columns **/

#gk-nav #gksdl-mainnav>ul>li.active>a { display:block; height:20px; line-height:20px; background:/your color/; -moz-box-shadow:1px 1px 1px /your color/; -webkit-box-shadow:1px 1px 1px /your color/; }

#gk-nav ul.level0>li>div.childcontent { font-size:100%; margin-left:0!important; margin-top:0px!important; background: /your color/; -moz-box-shadow:1px 1px 1px /your color/; -webkit-box-shadow:1px 1px 1px /your color/; }

#gk-nav ul.level0>li li div.childcontent { font-size:100%; margin-left:190px!important; margin-top:-30px!important; background: /your color/; -moz-box-shadow:1px 1px 1px /your color/; -webkit-box-shadow:1px 1px 1px /your color/; }

I checked it all and it works for me.
If you want you can change font colors and horizontal separating lines too. Everything is in gk_stuff.css file.

//edit: ohh, you have already solved the problem... Maby someone else will need it ;)



For Joomla 1.7

Code: Select all
/*
#------------------------------------------------------------------------
# penguinMail - December 2010 (for Joomla 1.6)
#
# Copyright (C) 2007-2011 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

/* Here you can include your override CSS styles */

#gkMenu {
    background-color: #F88017;
}
#gkWrap2 .box_menu h3, #gkWrap2 .box_text h3, #gkWrap2 .box h3 > span {
    background: none repeat scroll 0 0 #F88017;
}
a.readon, input[type="submit"], .adminform button, input[type="button"] {
    background: none repeat scroll 0 0 #168EF7;
}
#gkWrap3 .box_menu h3, #gkWrap3 .box_text h3, #gkWrap3 .box h3 > span {
    background: none repeat scroll 0 0 #F88017;
}
div.box.dark {
    background: none repeat scroll 0 0 #FFFFFF !important;
  border: 1px solid #8A847A;
}
div.box.dark a {
    color: #000000 !important;
}
div.box.dark > h3 > span {
    background-color: #F88017 !important;
  color: #FFFFFF !important;
}
.nspArt p.nspText {
    color: #000000;
    float: none;
}
#gkMainBlock a:hover {
    color: #000000;
}

div.gk-menu > ul.level0 > li.active > a, div#gkDropMain > ul > li.active > a, div.gk-menu > ul.level0 > li:hover > a, div#gkDropMain > ul > li:hover > a, div.gk-menu > ul.level0 > li.active:hover > a, div#gkDropMain > ul > li.active:hover > a {
    background: none repeat scroll 0 0 #000000;
}
.nspHeader {
    color: #168EF7;
    font-size: 150%;
    line-height: 1.2em !important;
    margin-bottom: 6px;
}
div.gk-menu > ul.level0 > li > .childcontent .gkcol {
    background-color: #168EF7;
    float: left;
}
div.gk-menu > ul.level0 > li .childcontent ul li {
    background: url("../images/menu_bullet.png") no-repeat scroll 2px center #168EF7;
    border-top: 1px solid #000000;
}
div.gk-menu > ul.level0 > li {
    border-left: 1px solid #000000;
}
div.gk-menu > ul.level0 > li .childcontent ul {
    background: none repeat scroll 0 0 #000000;
    margin: 0 7px;
}
div.gk-menu > ul.level0 > li .childcontent ul li a {
    color: #FFFFFF;
}
div.gk-menu > ul.level0 > li .childcontent ul li a:hover {
    color: #FFFFFF;
    text-decoration: none;
}
div.gk-menu > ul.level0 > li > .childcontent .module {
    background: none repeat scroll 0 0 #168ef7;
}
div.gk-menu > ul.level0 > li .childcontent ul li li {
    background: url("../images/menu_bullet.png") no-repeat scroll 2px center #168ef7;
    border-top: 1px solid #000000;
}
div.gk-menu > ul.level0 > li li.group .gk-group-content > ul {
    background-color: #168EF7;
}
div.gk-menu > ul.level0 > li .childcontent .gkcol ul {
    background-color: #168EF7;
    padding: 0 !important;
}
div.gk-menu > ul.level0 > li li.group .group-title {
    background: none repeat scroll 0 0 #168EF7;
    border: 1px solid #000000;
}
User avatar
Junior Boarder

GK User
Tue Feb 21, 2012 11:37 am
Thank you spokanet for your contribution.
User avatar
Platinum Boarder


cron