Tutorial - How to Add Custom CSS File
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
-
You can try to use !important. Example...
font-size: 14px !important; - Please reply with a direct link to the issue & create a new thread for each new issue.
A template is only as good as the content that goes into it
- DanG
-
-
-
- DMT Vision
- Jr. Rocketeer
- Posts: 29
- Thanks: 0
-
I know that...Can you please explain how to override the default css without hacking the core gantry css or using the !important property or using a more specificity css because this may not be possible every time.
I don't want to use the !important property.
It's not the right way to work.
Does the custom css file override the default css properties or not?
-
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
- Yes it overrides the default CSS.
- Please reply with a direct link to the issue & create a new thread for each new issue.
A template is only as good as the content that goes into it - DanG
-
-
-
- DMT Vision
- Jr. Rocketeer
- Posts: 29
- Thanks: 0
-
Hi prim
Thank you for your reply.
Please look here:
funkycyclewear.com/
I tried to override the menu text color to red (I know it's ugly but this is for test purposes) and it's not working..
Can you figure out why?
-
-
-
- ismadman
- Sr. Rocketeer
- Posts: 186
- Thanks: 3
-
I added through firebug to your custom css file
.menutop a { color: #FF0000 ! important; }
instead of what you have
.menutop li > .item, .roknewspager .active .roknewspager-content, body ul.roknewspager-numbers li, body .roknewspager-numbers li.active, #rt-body-surround .roknewspager .roknewspager-h3 a, .readonstyle-button .readon span, .readonstyle-button .readon .button, .roktabs-wrapper .roktabs-links ul, #rt-body-surround .module-content ul.menu a:hover, .rg-grid-view .tag, .rg-list-view .tag, .rg-detail-slicetag .tag, .rg-detail-filetag .tag, .module-content .menu li#current.active > .item, #rt-main .module-content .menu li.active.current > a, .module-content .menu li#current.active > a { color: RED; }
it worked fine
why are you saying !important isn't correct?
Your custom css file will always be there and !important will override what you want.
If you dont want to use !important then you would have to go through the menu classes and id's to override . - Why isn't beer free ?
I OWE DanG : 4This image is hidden for guests.
Please log in or register to see it.
*Payable when it reaches 24
-
-
-
- DMT Vision
- Jr. Rocketeer
- Posts: 29
- Thanks: 0
-
Thank you ismadman.
What I did is copy the exact css specificity from the fusionmenu.css file.
I saw that the exact code in the custom css file was not overriding the fusionmenu.css this is why I asked this.
Please answer this: From what I undersand now is that the custom css file is not overriding when there is an exact css code only if I use the !important property or use a more specificity css code.
Is it correct?
-
-
-
- DMT Vision
- Jr. Rocketeer
- Posts: 29
- Thanks: 0
-
-
-
- DMT Vision
- Jr. Rocketeer
- Posts: 29
- Thanks: 0
-
-
-
- Cretan Studies Association
- Hero Rocketeer
- Posts: 385
- Thanks: 0
- Social Anthropology Student
-
I have tried this new Gantry 4 tutorial, but it just won't have any effect on my template's CSS...
Before I used to do it the following way and it worked.
www.rockettheme.com/magazine/dec-2011/13...cket-theme-templates
I am using the Panacea template and the name of the file I have created is "rt-panacea-custom.css".
"rt-panacea" is the name of the template folder...I also tried "panacea-custom.css" and plain old "custom.css" but it still won't work...what am I doing wrong? - You can call me George
J2.5.8, Panacea v1.6.6 - www.eks-ik.eu
J2.5.8, Syndicate 1.6.5
-
Time to create page: 0.077 seconds