Tutorial - How to Add Custom CSS File
-
-
- Arifin FinLy
- Preeminent Rocketeer
- Posts: 17372
- Thanks: 18
-
Hello Dominic,
First, my purpose of this tutorial is to show how you can add a custom css "file". If you read the replied above, your issue is actually the same, that's why I added "How to Add Custom CSS Code Correctly" section in the first thread. You must "not" use the "same" rule, but you should use the correct selector like I explained in that section. Could you please kindly check again?
Also, as you mentioned you discovered random named php file, I am pretty sure you activated the Gantry Gzippr and/or Gantry Cache in template manager. In that case, please clear your Joomla caches first as some changes will not be seen before you clear the cache, at Tools -> Clean Cache. -
The following users have thanked you: Netburner, Inc
-
-
-
- Dominic Martin
- Newbie
- Posts: 7
- Thanks: 0
-
Hello Arifin,
Thanks for your reply. Yes, I hold my hand up to Gantry Gzippr and Cache. They were turned off within the gantry configuration but were still enabled as plugins. It was Gzippr that was creating the file I mentioned. All the plugins are now disabled and the cache cleared. I always clear the browser cache between refreshes.
I still don't get the "How to Add Custom CSS Code Correctly" because I'm doing exactly what you said but it still doesn't work.
If I use Chrome's Inspect Element (Similar to Firebug), it tells me that the matched CSS rule is from Overlays.css, line 16. Instead of changing .rt-block, I want to change .background-img-sc2. Instead of it being part of the div #rt-showcase, I need to use #rt-page-background.
So into my custom CSS file, I follow the example you made and put:#rt-page-background .background-img-sc2 {background: url(../images/backgrounds/img-eye.jpg) 50% 0 no-repeat;}
This has no effect at all. Chrome does not list it as a matched style. If I reverse the statement to:Then at least my custom css shows up as a matched rule and is applied. However, it's crossed out because Overlays.css must be loaded after mycustomstyle.css and css-specificity uses the version of the rule that loads last..background-img-sc2 #rt-page-background {background: url(../images/backgrounds/img-eye.jpg) 50% 0 no-repeat;}
So, how can I not use the same rule, if that's the rule I want to overwrite? That's exactly what you did in your example. You wanted to overwrite the original .rt-block in the #rt-showcase div with your own settings. As you can see in my examples, I did use the right selector.
Is there any way to ensure that mycustomstyle.css takes priority over all the other styles without modifying the template?
-
-
-
- Dominic Martin
- Newbie
- Posts: 7
- Thanks: 0
-
It's probably a bit of a cheat but if you use the CSS !important declaration within your mycustomstyle.css, it stops style rules further down from taking precedence. So my rule now is:
.background-img-sc2 #rt-page-background {background: url(../images/backgrounds/img-eye.jpg) 50% 0 no-repeat !important;}
SOLVED - my custom rule will now overwrite the original rule, irrespective of the load order of the stylesheets or the cascade order (unless !important is used lower down the chain).
-
-
-
- Arifin FinLy
- Preeminent Rocketeer
- Posts: 17372
- Thanks: 18
- Yes, !important should work for sure, but in same cases in IE it can't work properly. You would better try to use the correct selector like I mentioned in the first thread.
-
-
-
- MKTG Experts
- Sr. Rocketeer
- Posts: 197
- Thanks: 0
- how come this feature is not part of gantry framework out of the box?
-
-
-
- jwwicks
- Rocketeer
- Posts: 80
- Thanks: 4
- Developer II
-
Hello Arifin,
Does this still work the same way in J1.6. Can't seem to get it to show up. Using Tachyon if it matters. Placed the files in the appropriate directories, cleaned the cache, even changed browsers, no go. In J1.5.x this worked like a charm. Any issues with J1.6 that you know of?
Thanks,
Jw
PHP Built On Windows NT PATSY 6.0 build 6002
Database Version 5.1.45-community
Database Collation utf8_general_ci
PHP Version 5.2.13
Web Server Apache/2.2.15 (Win32) mod_ssl/2.2.15 OpenSSL/0.9.8n
WebServer to PHP Interface cgi-fcgi
Joomla! Version Joomla! 1.6.1 Stable [ Onward ] 07-Mar-2011 23:00 GMT
User Agent Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.151 Safari/534.16 - A person who never made a mistake never tried anything new. - Albert Einstein
Joomla 3.x, Gantry 5.x
WordPress 4.x, Gantry 5.x
Drupal 8.x
-
-
-
- Tim2006
- Hero Rocketeer
- Posts: 282
- Thanks: 0
-
Hi,
I am wanting the same. I am trying to add 'mystyle.css' to Gantry and have followed the directions given here:
1. - add 'mycustomstyle.php' to the features folder
2. - add 'mycustomstyle.css' to the css folder
All cache and zippers are turned off but my css file doesn't appear to load?
AM using Gantry 1.6.1, J!1.6.1 and Tachyon 1.6 template.
Are there different instructions for Joomla 1.6? Or should the above work?
Thanks
-
-
-
- MKTG Experts
- Sr. Rocketeer
- Posts: 197
- Thanks: 0
-
I got this to work with Joomla 1.5 / Gantry
Just took a while for the changes to kick in the first time.
emptying browser cache/cookies helped.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
The easiest way to add a css file is to open the index.php of your template
and add the name of the file to
$gantry->addStyles(array('template.css','joomla.css','mycool.css'));
and drop your file into the css-folder ...
This way the css-file gets always loaded.
This hasn't changed in joomla 1.6 ...
-
-
-
- Tim2006
- Hero Rocketeer
- Posts: 282
- Thanks: 0
-
Thanks Henning - much appreciated.
That does work but it involves a template hack. The original post from Arifin said:
Arifin FinLy wrote:How to Add Custom CSS File
We just need to add one new Gantry feature and one custom css file. We don't need to hack any core files.
and it would still be useful to know how to do this. Reams of paper detailing file hacks are a right pain in the rump when it comes to installing template updates.
-
Time to create page: 0.092 seconds