css override
-
-
- Surbma
- Newbie
- Posts: 13
- Thanks: 0
-
Hi all,
I'd like to modify the rt-gantry template as my needs. For example add background image to the body. I don't understand the way it renders the css files. As I use the style1.css, I only can set the body background if I set the class, like this:body.cssstyle-style1 {background:#fff url(../images/body/bg_body.jpg) top center no-repeat;}
It's really hard to override the default styles. Than what is style1.css file good for, if I can't set the style parameters in it normally?
Is there a way to do it more easily? I think this template is a good base to develop custom templates, but we need a way to customize it via css.
-
-
-
- Dharma Media.
- Sr. Rocketeer
- Posts: 125
- Thanks: 0
- Well, it seems you are having a harder time understanding (or using) css then the template. What might be your problem is that your setting something in style1.css which is overridden in another css file. Check the source of your page to see in which order the css files are loaded, if you don't want to edit the original class styles, make your overrides at the bottom of the last loaded css file.
-
-
-
- Surbma
- Newbie
- Posts: 13
- Thanks: 0
-
This is exactly what I did: I took a look at the source by Firebug and it shows no css file. It seems the template gets some element attributum from another files. What I don't understand is if I choose style1.css, than why is there any other override? It should be the last css to load.
Yes, you are right, the best would be to have my own custom css file and load it last, to override any previous settings.
Thank you!
Anyway, you should automatically place a custom.css file in the template to make it possible for developers to modify the style easily.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Override the gantry rules not by order ...
Override them by specificity
www.smashingmagazine.com/2010/04/07/css-...ity-and-inheritance/
div#mainbody {...} has a higher specificity then #mainbody {...}
body div#mainbody {...} has a higher specificity then div#mainbody {...}
etc.
you can easily add your own css-file.
in the index.php of the template find
<?php $gantry->displayHead(); $gantry->addStyles(array('template.css','joomla.css','style.css', 'fusion.css')); ?>
add your css-file in the array ... and in the css in the css folder of the template.
Why should you do that with gantry? See here
www.gantry-framework.org/documentation/j...ser-specific-control
-
-
-
- Surbma
- Newbie
- Posts: 13
- Thanks: 0
-
Thanks for your help!
Adding my own css file does not work with your example, as it will be not the last css file to load. It is my main problem.
Specificity makes sense, this was my first solution. Not the perfect, as I need to overwrite the original files.
My final solution was to add my own custom.css file in the index.php AFTER the php array:In this case I can set anything as my needs.<link rel="stylesheet" type="text/css" href="/templates/rt_gantry_j15/css/custom.css">
-
-
-
- G Tyler
- Newbie
- Posts: 11
- Thanks: 0
-
I'm having some trouble myself understanding how to implement formatting for new 'styles'.
I get how to use the Template Manager, set the options available there and Save Custom Presets as New. But where do I add additional formatting css code like foreground images, bg coloring, text coloring, blocking, etc. I have 5 sections to my site that needs different color schemes so I thought I could easily create styles to do this. I see the style1-4.css files in the Templates/Gantry/css folder but changing them has no effect.
Any advice? - Gerald "G" Tyler
Senior Multimedia Designer
Hadfield Communications
www.Hadfield.net
-
-
-
- Surbma
- Newbie
- Posts: 13
- Thanks: 0
-
G Tyler wrote:
But where do I add additional formatting css code like foreground images, bg coloring, text coloring, blocking, etc. I have 5 sections to my site that needs different color schemes so I thought I could easily create styles to do this. I see the style1-4.css files in the Templates/Gantry/css folder but changing them has no effect.
You should create a custom.css file and add the following line to index.php right after the php array:<link rel="stylesheet" type="text/css" href="/templates/rt_gantry_j15/css/custom.css">
-
-
-
- G Tyler
- Newbie
- Posts: 11
- Thanks: 0
-
I'm pretty sure that will format every page with that style. I was hoping to get control of the Presets so I can use the Template Manager to select a colored Preset for the Menu Item I have highlighted.
I mispoke in my question above... I meant "Presets", not styles. How do I get further control of Preset styling? Do style1.css, style2.css, etc. have nothing to do with Preset 1, Preset 2, etc.?
I see it now... www.gantry-framework.org/documentation/j...omize/custom-presets . I saw this page but read right over the end of Step 2, and that's where you specify your stylesheet name and various parameters. Does anyone have a link to the entire list of those parameters we can use?...
1.[presets]
2.custompreset_name=Custom Preset
3.custompreset_cssstyle=style6
4.custompreset_linkcolor=#27db2d
5.custompreset_font-family=continuum
6.custompreset_backgroundlevel=med
7.custompreset_bodylevel=med - Gerald "G" Tyler
Senior Multimedia Designer
Hadfield Communications
www.Hadfield.net
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
might worth saying that during developement turning off every form of caching is good.
browser cache, gantry cache, joomla cache ...
Using the ftp-layer in joomla often helps too when the configuration is not saved properly ...
the styles 1 to 4 are amtching the css styles with that name. to see how that is done look into the features and the xml. (and on gantry-framework.org)
-
Time to create page: 0.064 seconds