Joomla Templates Club 406,261 posts

[fbernardello Friend fbernardelloJoin date: February 2015Posts: 287Downloads:16Uploads:35 Thanks: 51 Thanked: 2 times in 2 posts]

#209073

Dear support,
we know it’s possible on Teline V to change the color of a menu voice setting it into the category (as described here: http://www.joomlart.com/documentation/joomla-templates/ja-teline-v/how-to#category-color).

But, what if I have a menu voice which is not referring to a category (for example a title separator)?
Menu default Hover colour is black. How can I change it?
I tryed to define a new class, called “menured” on custom.css file, and I tryed to insert it into the “link CSS class” on “Link options” on the menu voice.

This is the code I used:

a.menured {
background-color: @red;
}
a.menured:hover {
background-color: @red;
}
a.menured:focus {
background-color: @red;
}
a.menured:active {
background-color: @red;
}

Unfortunately 🙂 it’s not working.
Have you got suggesions/workaround?

Regards,
F.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#578268

Hi @fbernardello,

You can try this method :

1. Create new separator menu item with type Text Separator

2. Navigate to admin >>> Extensions >>> Template Manager >>> choose your template >>> hit Megamenu button to edit Megamenu >>> click the Text Separator menu item >>> type appropriate color class name in Extra Class

3. Refer to this section in documentation and look for everywhere it’s indicate a tag in the code, duplicate that line and replace a with “.separator” (without double quote). For example :

.magazine-category-title {
// ---------------
&.cat-red {
a {
background-color: @red;
&:hover, &:focus, &:active {
background-color: @red;
}
}
}
}

change to :

.magazine-category-title {
// ---------------
&.cat-red {
a,
.separator {
background-color: @red;
&:hover, &:focus, &:active {
background-color: @red;
}
}
}
}

or change :

.item-list .item .item-inner .item-title a:hover,
.item-list .item .item-inner .item-title a:active,
.item-list .item .item-inner .item-title a:focus {
color: @red;
}

to :

.item-list .item .item-inner .item-title a:hover,
.item-list .item .item-inner .item-title a:active,
.item-list .item .item-inner .item-title a:focus,
.item-list .item .item-inner .item-title .separator:hover,
.item-list .item .item-inner .item-title .separator:active,
.item-list .item .item-inner .item-title .separator:focus {
color: @red;
}

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#644559

Hi @fbernardello,

You can try this method :

1. Create new separator menu item with type Text Separator

2. Navigate to admin >>> Extensions >>> Template Manager >>> choose your template >>> hit Megamenu button to edit Megamenu >>> click the Text Separator menu item >>> type appropriate color class name in Extra Class

3. Refer to this section in documentation and look for everywhere it’s indicate a tag in the code, duplicate that line and replace a with “.separator” (without double quote). For example :

.magazine-category-title {
// ---------------
&.cat-red {
a {
background-color: @red;
&:hover, &:focus, &:active {
background-color: @red;
}
}
}
}

change to :

.magazine-category-title {
// ---------------
&.cat-red {
a,
.separator {
background-color: @red;
&:hover, &:focus, &:active {
background-color: @red;
}
}
}
}

or change :

.item-list .item .item-inner .item-title a:hover,
.item-list .item .item-inner .item-title a:active,
.item-list .item .item-inner .item-title a:focus {
color: @red;
}

to :

.item-list .item .item-inner .item-title a:hover,
.item-list .item .item-inner .item-title a:active,
.item-list .item .item-inner .item-title a:focus,
.item-list .item .item-inner .item-title .separator:hover,
.item-list .item .item-inner .item-title .separator:active,
.item-list .item .item-inner .item-title .separator:focus {
color: @red;
}

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#743191

Hi @fbernardello,

You can try this method :

1. Create new separator menu item with type Text Separator

2. Navigate to admin >>> Extensions >>> Template Manager >>> choose your template >>> hit Megamenu button to edit Megamenu >>> click the Text Separator menu item >>> type appropriate color class name in Extra Class

3. Refer to this section in documentation and look for everywhere it’s indicate a tag in the code, duplicate that line and replace a with “.separator” (without double quote). For example :

.magazine-category-title {
// ---------------
&.cat-red {
a {
background-color: @red;
&:hover, &:focus, &:active {
background-color: @red;
}
}
}
}

change to :

.magazine-category-title {
// ---------------
&.cat-red {
a,
.separator {
background-color: @red;
&:hover, &:focus, &:active {
background-color: @red;
}
}
}
}

or change :

.item-list .item .item-inner .item-title a:hover,
.item-list .item .item-inner .item-title a:active,
.item-list .item .item-inner .item-title a:focus {
color: @red;
}

to :

.item-list .item .item-inner .item-title a:hover,
.item-list .item .item-inner .item-title a:active,
.item-list .item .item-inner .item-title a:focus,
.item-list .item .item-inner .item-title .separator:hover,
.item-list .item .item-inner .item-title .separator:active,
.item-list .item .item-inner .item-title .separator:focus {
color: @red;
}

[fbernardello Friend fbernardelloJoin date: February 2015Posts: 287Downloads:16Uploads:35 Thanks: 51 Thanked: 2 times in 2 posts]

#578303

Dear @adam M,
thank you for your reply: if I apply a class (ex cat-red) on megamenu Extra Class for a “category menu voice”, it works.
But if I try to apply it to another object it doesn’t.

About the suggestion on point 3, I checked the documentation (chapter 2. For menu item) but it speaks about category colors.
When you write ” look for everywhere it’s indicate a tag in the code” what file/files are you referring to? (I checked for example megamenu.css), but I’m not sure about it.

Regards,
Federico

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#578371

Hi @fbernardello,

1. Assuming you want to apply color purple to that menu item, first follow step 1 above and add appropriate class name to menu item.

2. Open file /templates/ja_teline_v/css/custom.css (if you don’t have this file, just create a new one) then add this code :

.navbar-default .navbar-nav > li.cat-purple > .separator:hover,
.navbar-default .navbar-nav > li.cat-purple > .separator:focus {
background-color: #8c5de4 !important;
}

1 user says Thank You to Adam M for this useful post

1. fbernardello

[fbernardello Friend fbernardelloJoin date: February 2015Posts: 287Downloads:16Uploads:35 Thanks: 51 Thanked: 2 times in 2 posts]

#578405

Dear @adam-m,
great, it’s working. n.1!!!
Just a final request: How can I set the css to let the text-separator highlighted when I move to the submenu? (see attachment).

Thanks in advance,
Federico

[fbernardello Friend fbernardelloJoin date: February 2015Posts: 287Downloads:16Uploads:35 Thanks: 51 Thanked: 2 times in 2 posts]

#644696

Dear @adam-m,
great, it’s working. n.1!!!
Just a final request: How can I set the css to let the text-separator highlighted when I move to the submenu? (see attachment).

Thanks in advance,
Federico

[fbernardello Friend fbernardelloJoin date: February 2015Posts: 287Downloads:16Uploads:35 Thanks: 51 Thanked: 2 times in 2 posts]

#743327

Dear @adam-m,
great, it’s working. n.1!!!
Just a final request: How can I set the css to let the text-separator highlighted when I move to the submenu? (see attachment).

Thanks in advance,
Federico

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#578482

Hi @fbernardello,

You can try modify previous code as below and let me know the result :

.navbar-default .navbar-nav > li.cat-purple.open > .separator,
.navbar-default .navbar-nav > li.cat-purple.open > .separator:hover,
.navbar-default .navbar-nav > li.cat-purple > .separator:hover,
.navbar-default .navbar-nav > li.cat-purple > .separator:focus {
background-color: #8c5de4 !important;
}

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#578481

Hi @fbernardello,

You can try modify previous code as below and let me know the result :

.navbar-default .navbar-nav > li.cat-purple.open > .separator,
.navbar-default .navbar-nav > li.cat-purple.open > .separator:hover,
.navbar-default .navbar-nav > li.cat-purple > .separator:hover,
.navbar-default .navbar-nav > li.cat-purple > .separator:focus {
background-color: #8c5de4 !important;
}

1 user says Thank You to Adam M for this useful post

1. fbernardello

[fbernardello Friend fbernardelloJoin date: February 2015Posts: 287Downloads:16Uploads:35 Thanks: 51 Thanked: 2 times in 2 posts]

#578508

Hi Adam M,
great! Thank you very much for your precious help!

Regards,
F.

[Author]

Posts