Joomla Templates Club 406,261 posts

[kurdse Friend kurdseJoin date: February 2012Posts: 55Downloads:0Uploads:2 Thanks: 37]

#175142

Hi,

How can I change the colors for each section in the menu?
I want to have different colors for different sections in the menu.

Site: kurd.se/2013

Thanks in advance.

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#444379

Hi kurdse

I am not sure what you mean by change the colours for each section in the menü? Do you mean you want the menü to use different colours or that you would like the site to use a different colour scheme for each menü item?

If you want the menü colours to change you can use a suffix. If you want the whole site to change you could use as starting point a post I did for Tiris. It is based on Joomshopping but where I use the word ‘categories’ they are in fact menü items so the whole concept is the same. It is just using page assignments and themes.

http://www.joomlart.com/forums/topic/multiple-themes-in-your-tiris-joomshopping-site/.

Maybe that helps as a starting point for you?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#444422

Here is a suggestion . . . .

Create individual CSS classes for each color you want to assign to your respective menu items.

FOR EXAMPLE, you could name your classes “blue1,” “orange1,” “yellow1,” etc … or pretty much whatever you want
(best not to make them too log o convoluted, though)

You then add the class code into /templates/ja_purity_ii/css/template.css

FOR EXAMPLE:


.ja-megamenu ul.level0 li.mega.blue1 {
background-color: orange;
}

OR, if you only want the color to change only on mouseover . . .

.ja-megamenu ul.level0 li.mega.blue1.over {
background-color: blue;
}


Then – within each menu item’s configurations – in Parameters >> JA Extended tab – set the “additional class” to whichever one you choose.

Let me know if this method works for you.

1 user says Thank You to TomC for this useful post

1. kurdse

[kurdse Friend kurdseJoin date: February 2012Posts: 55Downloads:0Uploads:2 Thanks: 37]

#444604

Hi,

Do I have to create diffrent css files or do I create diffrent classes in template.css ?
I think I need more help with this one.:((
I want to change th hole color for each menu.

Thanks in advance.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#444605

You should probably create them within templatesja_teline_iiicssmenumega.css

If there is no such file, then okay to create them within your template.css file.

1 user says Thank You to TomC for this useful post

1. kurdse

[kurdse Friend kurdseJoin date: February 2012Posts: 55Downloads:0Uploads:2 Thanks: 37]

#444610

Where do I put the diffrent color codes. and what do I write in the “additional class” ?

/*
# ------------------------------------------------------------------------
# JA Teline III v2 template for Joomla 1.5
# ------------------------------------------------------------------------
# Copyright (C) 2004-2010 JoomlArt.com. All Rights Reserved.
# @license - PHP files are GNU/GPL V2. CSS / JS are Copyrighted Commercial,
# bound by Proprietary License of JoomlArt. For details on licensing,
# Please Read Terms of Use at http://www.joomlart.com/terms_of_use.html.
# Author: JoomlArt.com
# Websites: http://www.joomlart.com - http://www.joomlancers.com
# Redistribution, Modification or Re-licensing of this file in part of full,
# is bound by the License applied.
# ------------------------------------------------------------------------
*/

.ja-megamenu { margin: 0; padding: 0; }
.ja-megamenu a.over, .ja-megamenu a.active { color: #000 !important; }

ul.megamenu { margin: 10px; /* menu's gutter */ }

/* lv - 0
-----------------------------------*/
/* Styling ---*/
.ja-megamenu ul.level0 {
float: left;
margin: 0;
padding: 0;
}

.ja-megamenu ul.level0 li.mega {
background: none;
display: block;
float: left;
margin: 0;
padding: 0;
}

.ja-megamenu ul.level0 li.mega a.mega {
border-right: 1px solid #ccc;
color: #000;
display: block;
font-weight: normal;
line-height: normal;
margin: 0;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
}

.ja-megamenu ul.level0 li.mega .has-image {
padding-left: 25px;
display: block;
background-repeat: no-repeat;
background-position: left top;
}

.ja-megamenu ul.level0 li.mega span.menu-title { display: block; }

.ja-megamenu ul.level0 li.mega span.menu-desc {
font-family: Arial, Helvetica, sans-serif;
display: block;
font-weight: normal;
color: #666;
text-transform: none;
text-shadow: 1px 1px 0 #fff;
padding-left: 0;
}

.ja-megamenu ul.level0 li.mega a img {
float: left;
padding-right: 5px;
}

.ja-megamenu ul.level0 li.over, .ja-megamenu ul.level0 li.haschild-over {
background: url(../../images/mainnav-hover.gif) repeat-x bottom #f7f7f7;
color: #000;
}

.ja-megamenu ul.level0 li.haschild a.mega span.menu-title,
.ja-megamenu ul.level0 li.haschild-over a.mega span.menu-title {}

.ja-megamenu ul.level0 li.haschild a.mega span.menu-desc,
.ja-megamenu ul.level0 li.haschild-over a.mega span.menu-desc {
padding-left: 12px;
}

.ja-megamenu ul.level0 li.active a {
background: url(../../images/mainnav-active.gif) repeat-x top #333;
color: #fff !important;
}

.ja-megamenu ul.level0 li.active li.mega a {
color: #333 !important;
}

/* lv - 1 and below
-----------------------------------*/
/* Layout ---*/

.ja-megamenu ul.level1 li.mega { float: none; }

/* Columns ---*/
.ja-megamenu .megacol { float: left;}

/* Styling ---*/
.ja-megamenu ul.level1 li.mega { border-top: 1px solid #ccc; }

.ja-megamenu ul.level1 li.first { border-top: 0; }

.ja-megamenu ul.level1 li.mega a.mega {
background: none;
border: 0;
color: #cccccc;
font-weight: normal;
font-size: 92%;
padding: 5px 10px 6px;
}

.ja-megamenu ul.level1 li.mega a.mega span.menu-title { background: none; padding: 0; }

.ja-megamenu ul.level1 li.haschild {
background: url(../../images/arrow.png) no-repeat 95% center;
padding: 0;
}

.ja-megamenu ul.level1 li.over, ul.level1 li.haschild-over { background: #f7f7f7; }

.ja-megamenu ul.level1 li.group { background: none; }

/* CHILD CONTENT
-----------------------------------*/
.ja-megamenu .childcontent {
z-index: 999;
}

.ja-megamenu .childcontent-inner {
background: #ddd;
border: 1px solid #ccc;
border-top: 0;
color: #000;
font-family: Helvetica, Arial, sans-serif;
}

.ja-megamenu .childcontent .ja-moduletable {
color: #ccc;
border-bottom: 0;
line-height: 1.5;
margin: 10px 0;
padding: 0;
}

.ja-megamenu .childcontent .ja-moduletable h3 {
background: none;
color: #fff;
border-bottom: 1px dotted #444;
margin-left: 10px;
margin-right: 10px;
text-indent: 5px;
text-transform: none;
}

.ja-megamenu .childcontent .ja-moduletable .ja-box-ct {
padding: 0 5px;
}

.ja-megamenu .childcontent .ja-moduletable a {
color: #ccc;
text-decoration: none;
border-bottom: 1px dotted #ccc;
}

.ja-megamenu .childcontent .ja-moduletable a:hover,
.ja-megamenu .childcontent .ja-moduletable a:focus,
.ja-megamenu .childcontent .ja-moduletable a:active {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}

.ja-megamenu .childcontent .ja-moduletable ul:first-child {
margin-top: 0 !important;
}

.ja-megamenu .childcontent .ja-moduletable li {
background: url(../../images/bullet.gif) no-repeat 2px 7px !important;
margin-bottom: 5px;
}

/* Grouped --- */
.ja-megamenu .group {}

.ja-megamenu .group-title {
border-bottom: 1px solid #444;
overflow: hidden;
}

.ja-megamenu .group-title .menu-title {
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-size: 115%;
}

.ja-megamenu .group-title .menu-desc {
color: #999;
padding-left: 0 !important;
}

.ja-megamenu .group-content .ja-moduletable,
.ja-megamenu .group-content ul.megamenu {
margin: 10px; /* Group-content's gutter*/
}

/* reset --- */
.ja-megamenu .childcontent ul.megamenu .ja-moduletable {
padding: 0;
}

.ja-megamenu .childcontent ul.megamenu .ja-moduletable h3 {
margin-left: 0;
margin-right: 0;
}

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#444636

You can enter your new classes anywhere within this file – at the bottom is fine.

As for how to enter each additional class you want . . .

As I described in post #3 above, if you want to create different colors for each class, you can name your classes “blue1,” “orange1,” “yellow1,” etc … or pretty much whatever you want
(best not to make them too log or convoluted, though)

FOR EXAMPLE:


.ja-megamenu ul.level0 li.mega.blue1 {
background-color: orange;
}

OR, if you only want the color to change only on mouseover . . .


.ja-megamenu ul.level0 li.mega.blue1.over {
background-color: blue;
}

For the “background-color” parameter … I would use the correct hex color code for each color you want.

Here are some resources for hex color codes . . .

http://www.2createawebsite.com/build/hex-colors.html

http://html-color-codes.com/

Then – within each menu item’s configurations – in Parameters >> JA Extended tab – set the “additional class” to whichever one you choose.

1 user says Thank You to TomC for this useful post

1. kurdse

[Author]

Posts