Can someone let me know to change the color of a tab when it is clicked. For example, in the attached image you can see that when I click on 'Create a Security Policy Rule' and it shows the background color as Dark Grey. I would like to change the color from Dark Grey to say Light Grey or Red.

Can someone show me how to do that please?


CarltonBackgound Image


3 Answers 3


You can use a tool like Firebug or similar for inspect the source code of your page directly in your browser, a tool like this give you information about the CSS selectors and the path to the files.

In this case, it seems that you have enabled the compression of code, add or change this code in your main css file:

#je_accord754.je_acc ul ul li:hover > a, 
#je_accord754.je_acc ul ul li.open > a, 
#je_accord754.je_acc ul ul li.active > a {
    background: #F08A36;

Also here you have an screenshot:

enter image description here

  • Wow. That looks great. I'm going to try it. I will let you know how I get on. Cheers
    – Carltonp
    Jun 1, 2016 at 19:55
  • Hi, there are over 50 .css files. Can you let me know which css file to edit?
    – Carltonp
    Jun 1, 2016 at 20:08
  • In your case, try in menu.css or style1.css Jun 1, 2016 at 20:11
  • I tried in menu.css and style1.css and I couldn't see #je_accord754.je_acc ul ul li:hover > a, #je_accord754.je_acc ul ul li.open > a, #je_accord754.je_acc ul ul li.active > a { background: #F08A36;
    – Carltonp
    Jun 1, 2016 at 20:14
  • Try adding the new code at the bottom of the file, save, clear the caché and reload the page. Jun 1, 2016 at 20:16

Hi I check it and this what you have to do, in you joomla go to template and in the files find this template/gk-news2/css/template css

I think you have a folder with this name template css in the left side you have a number find this number 738 in that line you have this code

and you have to change this:

je_accord754.je_acc > ul > li > a:hover, #je_accord754.je_acc > ul > li.active > a, #je_accord754.je_acc > ul > li.open > a { template css:738

color: #f08937 !important;
background: none !important;

change this: color: #f08937 !important;.... for this.... background-color: #f08937 !important; and delete this: background: none !important;

enter image description here

on your website in that menu click on what you want to change color, then click the right button and select inspect, reviews the code, in your right side is where are the css and there you can change color so you can see which is the one who does that change.

when you have it, look up, there is a league where it indicates the folder, go to your template and searches that folder and there you can change it. Also in that league you can see the number of that code

  • ok. sorry for my delayed response. Going to check out your answers now
    – Carltonp
    Jun 3, 2016 at 13:51
  • It didn't work. I added the following but nothing #je_accord754.je_acc > ul > li > a:hover, #je_accord754.je_acc > ul > li.active > a, #je_accord754.je_acc > ul > li.open > a { color: #f08937 !important; background-color: #f08937
    – Carltonp
    Jun 3, 2016 at 14:22
  • Hello. Thanks for your help but I'm still struggling to change the colour. I managed to change the colour by going to template and adding the code je_accord754.je_acc > ul > li > a:hover, #je_accord754.je_acc > ul > li.active > a, #je_accord754.je_acc > ul > li.open > a { template css:738 color: #f08977 !important; background-color: #f08977 !important; but I still cant change the colour with my original request which was 'Create a security policy rule' at the link keylooplabs.com/index.php/workbooks-2/pan-edu-201/… ... its driving me crazy!
    – Carltonp
    Jun 3, 2016 at 17:13
  • I think the problem I'm having is knowing what css to use. Can you help me?
    – Carltonp
    Jun 3, 2016 at 18:03
  • I have just added an image to show what I get when I right click and then select inspect. I hope you can see
    – Carltonp
    Jun 4, 2016 at 21:16

If you want to find where is the file, you have to put you mouse like in the photo, you can see there where is the source

enter image description here

When I right click and inspect I get the followingenter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.