Tutorial - How to Add Custom CSS File
-
-
- Randy Carey
- Rocketeer
- Posts: 77
- Thanks: 0
- web architect, book/magazine author
-
I like this feature, but there is one thing that is slowing me down. Every time I make a change to the custom css file, the change does not take effect right away. I try making the change through the admin, and I try making it directly through ftp. Either way, the change does not come across until some time later. And I don't have Ganty cached.
Is there a setting I need to check to make the changes become instantaneous?
-
-
-
- Arifin FinLy
- Preeminent Rocketeer
- Posts: 17372
- Thanks: 18
-
If the changes eventually works, it is for sure the cache issue. If you don't have Joomla or Gantry caches enable, please ensure you are clearing your browser cache too, as some changes will not even show up until you clear your cache. You might want to try force refresh for your browser too by pressing CTRL (or CMD on Mac) then click the refresh button in browser.
RCarey wrote:....Either way, the change does not come across until some time later. And I don't have Ganty cached.
Is there a setting I need to check to make the changes become instantaneous?
-
-
-
- Randy Carey
- Rocketeer
- Posts: 77
- Thanks: 0
- web architect, book/magazine author
-
Thanks. I had turned off all of the cache for Gantry and Joomla (and my browser). But I noticed my changes were not being written to the compressed style sheet. So I turned "on" the Gantry GZipper and set cache/expiration times to "1". With that configuration change, I'm seeing my CSS updates take effect right after I save a change.
I see a lot of value in GZipper and this feature for customization. Thanks for sharing the information!
-
-
-
- Arifin FinLy
- Preeminent Rocketeer
- Posts: 17372
- Thanks: 18
-
cjes wrote:
Hi ArifinFor non-Gantry templates, you can also put custom css file, but you will need to hack the template index.php
I was wondering if this trick with mycustomstyle.css is also possible for non-Gantry templates.
If so could you please explain how to set this up?
Thanks
Chris
1) Put the mycustomcss.css file in your template/<template name>/css/ folder
2) You will need to edit the index.php. Open your template index.php at:
<Joomla Root>/templates/<your template name>/index.php
Find below codes:</head>
Change the codes to:<link href="template/<template name>/css/mycustomcss.css" rel="stylesheet" type="text/css" /> </head>
Adjust the <template name> with your actual template name, for example: rt_solarsentinel_j15
-
-
-
- RobinR
- Rocketeer
- Posts: 50
- Thanks: 0
- Website Designer
-
Hi Arifin,
Thanks for sharing this! I spent a lot of time trying to find how to change the h3 tag, finally found the gantry.css and changed it there. Now I changed it back to the original, created the mycustomstyle.css and it all works!
It would be nice if there was some way of using certain tags in JCE as well, so we can see the outcome straight away instead of just having to go through trial and error.
Wishlist: tutorial on how to use RT styles properly, and how to change styles.
Thanks a bunch!
Robin
Netherlands
-
-
-
- Dominic Martin
- Newbie
- Posts: 7
- Thanks: 0
-
Hi,
I want to change the background image for my Zephyr template to one that is not in Gantry's standard list. I've told Gantry to use the StarCraft image. I've uploaded my new image (with the right dimensions) to the same folder /templates/rt_zephyr_j15/images/backgrounds. I've followed this tutorial and uploaded the two files to the locations specified.
I then modified the mycustomcss file to say:
#rt-page-background .background-img-sc2 {background: url(../images/backgrounds/img-eye.jpg) 50% 0 no-repeat;}
I was hoping that this would override the URL location for the Starcraft image and therefore load the image that I want. However, after turning off the Gantry Cache, clearing the Joomla cache and emptying the browser cache, a refresh still loads the original image.
Could someone please tell me what i'm doing wrong? Thanks.
Dominic
Additional: I've discovered that a randomly named PHP file is auto generated in the template's css directory. It contains a copy of all the CSS files combined. I can see the custom CSS appearing in this file but it appears before the overlays CSS file (which specifies the URL sources for the image files). So I think the custom CSS is being applied and then being overwritten again. How can I make the Custom CSS the last thing that's listed in this file? I've used the Gantry feature ordering and placed custom styles last in the list but it hasn't made a difference.
-
-
-
- Dominic Martin
- Newbie
- Posts: 7
- Thanks: 0
-
OK, so I've read this other thread on css-specificity.
http://www.rockettheme.com/forum/index.php?f=337&t=107164&rb_v=viewtopic
I don't see how that can apply to this tutorial. I know the author said that the tutorial was only to show how to add custom CSS functionality but it's not very useful if your custom CSS is not applied.
My guess is that you will use the file to override an existing CSS rule. Since both rules will be named the same, if the original rule is loaded after the custom rule (like here), then no change will be made. I can't see a way to use css-specificity to put some kind of number or priority into the custom css file to say to the browser that this one "wins". Please tell me how if I'm wrong!
The only solution (which appears in the linked thread) is to alter the HTML template to specify the custom css file to be loaded last. If you update the template of course, this change would be overwritten.
-
Time to create page: 0.094 seconds