Tutorial - How to Add Custom CSS File
-
-
- Damjan Savic
- Newbie
- Posts: 18
- Thanks: 0
- Web design, Graphic design, Computer tech.
-
HI Arifin,
Is this tutorial still "live" can we use this tutorial for joomla 1.7 and joomla 2.5 templates?
Thank you - Simplicity is beauty...
Web Design Sydney
Computer repairs Sydney
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
yes ... but the easiest way is still to add your file via a gantry-function in
index.php of your template ...
<?php $gantry->addStyle('custom.css'); ?>
will add a single css file
a line like this
<?php $gantry->addStyles(array('custom-1.css',custom.css')); ?>
would add more than 1 ...
The css has to go into the css folder of template ...
-
-
-
- Patrick Villella
- Jr. Rocketeer
- Posts: 20
- Thanks: 0
-
Hi all. I ran into this issue on my design as well and figured out the process. I want to share it with all of you here to save frustration. It's actually pretty easy once you understand how the Rocketheme templates are set up.
As noted above, it's a great idea to download the mycustomstyle.css file and its accompanying php file. However, as also noted above, this CSS is not always have the final say. This is because quite a bit of your CSS styling is actually INLINE, meaning that it's coming directly from the HTML of the page.
What happens is when you are using a theme that allows CSS styling through the Template editor, like Clarion, or most Rocketthemes, the colors you choose in the admin interface get processed through the styledeclaration.php file and end up in the final HTML code for the page. This overwrites any CSS that is defined elsewhere.
Specifically, I had this issue while using Clarion. I wanted to add a background to the RokGallery title, which was easy to do either through the extensions.css file or in mycustomstyle.css. However, styling the background of the caption was tricky. If you use Firebug, you will see that the title is styled through extensions.css, but the caption doesn't show a CSS, but, rather, the root of your Joomla site. This shows you it's an Inline style.
Here's how you get rid of an Inline style so you have style control over an element from your mycustomstyle.css file:
Edit the \features\styledeclaration.php file. Search for the element you want and delete its code. This is PHP, so it's going to look a bit different than you might be used to. In my case, I deleted --
$css .= 'body .rg-ss-caption {background-color:'.$this->_RGBA($gantry->get('main-accent'), '0.5').';}'."\n";
(From the $css through to the ending
Save the PHP file. Now style your element normally in either the extensions.css or mycustomstyle.css file and you'll see that it works! The element is no longer having its styling overwritten by the inline style generated by the styledeclaration.php file.
I hope I explained that well. This method works perfectly for my Rockettheme and I imagine the same will hold true for most of them.
Thanks to the Rocketheme team for developing such great templates. I would love to see more comprehensive documentation so we don't have to figure this sort of thing out on our own, but as mentioned many times in the Forums, GET FIREBUG! If not for this plug in, figuring out where the heck your styling comes from so you know what to edit would be nearly impossible. Firebug is a lifesaver.
Happy theming!
Patrick
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
in most cases its better to just use css-specificity and a custom.css file.
But yes ... if you want to get rid of inline code you need to change the styledeclaration.php.
But that's really for the advanced user.
-
-
-
- Patrick Villella
- Jr. Rocketeer
- Posts: 20
- Thanks: 0
-
Wow, fast reply! Thank you for the info, Henning.
I agree that editing the styledclaration.php file is advanced and you can cause damage if you're not careful. I'd like to do it as you suggest. Can you give me a bit more info?
I understand how specificity works. I believe the inline code is giving us a specificity of 11, as we have an HTML selector and a class selector (body .rg-ss-caption). I could add specificity in my CSS file by including an additional HTML selector or an id such as #slideshow or something.
How do I include this additional selector or id in my element? Do I have to edit the php or can I add it through the module suffix?
Thank you for your help. I'm doing fine with the edit I made to the styledeclaration.php, but I'd like to know if there is an easier way to override those inline styles.
Patrick
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
body span.rg-ss-caption {some code} should do the job ...
I often mention this link when it comes to specificity:
coding.smashingmagazine.com/2007/07/27/c...ngs-you-should-know/
-
-
-
- hotscotch
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
-
Hi Ruth,
I saw your post on your issue to change your background image. I too would like to do that. Can you tell me how you did it?
Scott hotscotch
Newbie
Posts: 14
Joined: Mon Mar 21, 2011 4:54 pm
Private messageTop
-
-
-
- JJ Spelman
- Sr. Rocketeer
- Posts: 236
- Thanks: 1
-
Can I do this with wordpress?
[UPDATE March 12]
This is solved by an article here: www.rockettheme.com/magazine/dec-2011/13...cket-theme-templates
-
-
-
- hotscotch
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
-
Hello,
I'm still unable to attach the mycustomstyles.css. I've uploaded the files to the correct directories, checked file permissions, turned off caching, changed the template index.php and added it to the array, and still nothing.
Can anyone throw me a lifeline?
I'm using a RocketTheme, Panacea. Joomla 1.7. Here's a link to one of the pages: vortexwellness.com/our-team
-
Time to create page: 0.060 seconds