SOLVED Add a custom css file to a template override
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
You can create a file using a simple text editor for custom css and name it using this format: templatefolder-custom.css (e.g., rt_kirigami-custom.css or gantry-custom.css).
More Info here: www.gantry-framework.org/documentation/j...custom_stylesheet.md
-
-
-
- Matthew D
- Jr. Rocketeer
- Posts: 34
- Thanks: 0
-
I know this sounds like beating a dead horse, but I am having issues with this same thing.
I have created a custom css file, called it rt_alerion-custom.css saved it to the rt_alerion folder, added the custom class to the module but no styles! The link to the style sheet is there, the custom class is showing in the html for the module but still no style showing.
An extra pair of eyes would be real helpful! Here is the class:
.home-box-wrapper element .class {
border: 1px solid #ccc;
padding:3px;
border-radius:5px;
box-shadow: 5px 5px 7px #ccc;
color:#000;
}
here is the site: gowithrv.com
Thanks
Matt
-
-
-
- Dick Bronder
- Newbie
- Posts: 17
- Thanks: 0
-
Hi Matt,
Leave out the element .class and see if that works.
.home-box-wrapper {
border: 1px solid #ccc;
padding:3px;
border-radius:5px;
box-shadow: 5px 5px 7px #ccc;
color:#000;
}
-
-
-
- Matthew D
- Jr. Rocketeer
- Posts: 34
- Thanks: 0
-
Thanks Dick for the reply, but that didn't work either! Not sure what is going on. if you happened to check the site the boxes on the left are working because I hard coded the css into the template for the module, obviously not what I want to do!
Thanks
Matt
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
you have invalid code in your custom css file
.rt-logo-ribbon {
background:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
is missing a closing "}". That's all it takes.
-
-
-
- Bill Slaughter
- Rocketeer
- Posts: 75
- Thanks: 1
-
Thanks for the info.
I am trying to override the showcase title font sixe and have created a custom css file iaw the instructions here.
The file is recognized (in template.css folder ) and loaded but it is not overridding the default css.
Here is the items as they appear in firebug:
// showcase.css
.layout-showcase .sprocket-features-title {
font-size: 350%;
font-weight: normal;
line-height: 1.2em;
}
// rt_metropolis-custom.css
.layout-showcase .sprocket-features-title {
font-size: 250%;
font-weight: normal;
line-height: 1.2em;
}
They appear in this order but the custom items (bottom) are all lined out. If I disable the top ones manually the bottom ones take effect.
Any ideas on how I can get my custom css override the default showcase.css.
Thanks.
Bill S>
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
-
-
- Bill Slaughter
- Rocketeer
- Posts: 75
- Thanks: 1
-
I understand the comments I added them in in the body of the first message. They do not exist in the file.
My css is in a file named 'rt_metropolis-custom.css' and is in the template/css folder. I have not modified the showcase.css. I want to override the css being applied by the showcase.css file.
Thanks for your response but you did not answer my question - How can I override the css being applied by the showcase.css file.
Bill S.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
use CSS specificity ...
www.rockettheme.com/blog/coding/32-basic...mizing-with-less-css
coding.smashingmagazine.com/2007/07/27/c...ngs-you-should-know/
css-tricks.com/specifics-on-css-specificity/
Perhaps you have a link to check?
if your css file is set up right and you dont have syntax issues in that file a rule like
div.layout-showcase .sprocket-features-title {
font-size: 250%;
font-weight: normal;
line-height: 1.2em;
}
or
div.layout-showcase .sprocket-features-title a span {
font-size: 250%;
font-weight: normal;
line-height: 1.2em;
}
should help - Last Edit: 10 years 1 month ago by Henning.
-
Time to create page: 0.084 seconds