Joomla Templates Club 406,261 posts

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#204961

Hi there,

On the “More News” module I would like the category colors to always display instead of only when the mouse over.
I’m thinking on the “hover value”, but dont know where can exactly is located, or if even adding a special code to the custom.css

Please take a look to the attachement to see what I need:

Thanks a lot for help

---

Attachments:

1. 

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#564430

Hi there
somebody has any idea?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#564516

Hi Edd,

if you use editor like Firebug in Firefox or Inspect Element in Chrome, you can easily see that in this template css file: /templates/ja_teline_v/css/template.css, look for the css style when hovering the category name for each color:


.category-name.cat-blue a:hover,
.category-name.cat-blue a:focus,
.category-name.cat-blue a:active {
background-color: #0077bb;
border-color: #0077bb;
}

.category-name.cat-green a:hover,
.category-name.cat-green a:focus,
.category-name.cat-green a:active {
background-color: #669900;
border-color: #669900;
}
.category-name.cat-violet a:hover,
.category-name.cat-violet a:focus,
.category-name.cat-violet a:active {
background-color: #bf5fff;
border-color: #bf5fff;
}
..................................................


For each color, you can add style for the <a> link without ‘hover, focus, active’ i.e:


.category-name.cat-blue a {
background-color: #0077bb;
border-color: #0077bb;
}

.category-name.cat-green a {
background-color: #669900;
border-color: #669900;
}
,.......................


The same with other color

P/s: you can add this style into /templates/ja_teline_v/css/custom.css file which will keep your custom css code when you update template.

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#564524

Hi Saguaros,

thanks for your reply, so if I understand: I just need to add only this code:

.category-name.cat-blue a {
background-color: #0077bb
border-color: #0077bb
}

.category-name.cat-green a {
background-color: #669900
border-color: #669900
}

and so on for each color…

to the custom.css ?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#564529

Yes, and remember to add semicolon after the color code.

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#564532

<em>@Saguaros 465346 wrote:</em><blockquote>Yes, and remember to add semicolon after the color code.</blockquote>

😮
what u mean?
sorry I didnt catch :-[

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#564534

It should be like this: http://prntscr.com/6l3fbw

instead of: http://prntscr.com/6l3fi1

This happens when you copy/paste the code.

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#564538

:-[ oh sure: “semicolon”

I will test and I will let you know 🙂

[Author]

Posts