Afterburner 2.0 - Change activelink color - gantry 4.1.24
-
-
- Mike Ames
- Newbie
- Posts: 7
- Thanks: 0
-
Sorry if this is too basic but I cant seem to find an answer.
I have Joomla 3.x with Afterburner 2.0 with Gantry 4.
My hover link colors need to be changed and I cant seem to find where. I know how to do a custom CSS overide and have successfully done that with header color etc... but I cant find the module link colors. Its got to be simple but I cant find info on it. Any help is appreciated.
I do knwo how to edit the css less files just dont knwo which one or even if thats the right place given the css overides are suppose to take care of that.
Thanks in advance.
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
-
Check this to learn how to use Firebug to debug and customize templates
www.rockettheme.com/blog/coding/1767-bas...omizing-with-lesscss
This is how you create a custom stylesheet file...
www.gantry-framework.org/documentation/j...custom_stylesheet.md
When we release upgrades template files will change and you will have to reapply all your changes again (that's if you can remember where they all are). If you keep your changes in a separate Custom CSS file you'll have no issues upgrading. - Check my services at: Mihha-Vision
-
-
-
- Mike Ames
- Newbie
- Posts: 7
- Thanks: 0
-
Thanks,
I have read that and understand from all you other posts on other subjects. I do have developers tools installed in chrome. What I was looking for was the element info. I think I got it. From what I see below I think I need to make changes to the ul.nav.menu element but ill have to just putz with it. Some things are so simple and yet become a big PITA with gantry and the other overhead. Thanks for your response.
html
body.logo-type-custom.headerstyle-dark.menustyle-dark.footerstyle-grey.font-family-helvetica.font-size-is-default.menu-type-dropdownmenu.layout-mode-responsive.col12
header#rt-top-surround
div#rt-header
div.rt-container
div.rt-grid-3
div.rt-block
div.module-surround
div.module-content
ul.nav.menu
li.item-220
-
-
-
- Mike Ames
- Newbie
- Posts: 7
- Thanks: 0
-
I found what I needed by reading the code and looking at what it was refering to. That lead me to the variables. In the variables.less file
I changed the following. I assume an update will wipe that out but its simple enough to change again. I wish I had the time to really understand gantry but I dont so brute force.
@bodytitle: #E5E500;//#303030; - Last Edit: 10 years 8 months ago by Mike Ames.
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
-
You shouldn't change core template files because with the first update, those files will be overwritten. You should create a custom css file and put your customizations there
Please post URL to your site and I will tell you what exactly do you need to change and place in the custom css file - Check my services at: Mihha-Vision
-
-
-
- Mike Ames
- Newbie
- Posts: 7
- Thanks: 0
-
Thanks for the response.
I am aware that updates will overwrite the changes. I am just confused what CSS tages will change what I need so thank you for taking time. I have already created the custom css file and tested it an it works. The site I am workign on now is a test site. Please forgive the look I am just changing thing to see the impact. I will go back and redesign it when I have my head wrapped aroun it. The site is located here www.three.techedclass.com/
I was trying to change the header background color, rollover link color, and the menu heading colors. I have found out how to do that through brute force but thats it.
Thanks again.
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
-
When you create a css override, you have to use better css specificity (search the internet to learn what that means) or use "!important" to give higher importance to your custom css code
For example, you can use the following code to change the header background. That code uses css specificity and higher importance of the css override
div#rt-header { background: red !important; } - Check my services at: Mihha-Vision
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Mike Ames wrote:
I appreciate your help. You got me going enough to figure it all out. Much appreciated. I just have to hunt for the tages now with the web tools.
Two more links to help with such an onerous learning curve
To find out more on how to create and use Custom CSS files this guide Your first CSS custom file - OR - LESS custom file
This is the CSS Reference bible with lots of live examples. - Last Edit: 10 years 8 months ago by DanG.
-
Time to create page: 0.078 seconds