Editing compiled CSS with Extplorer
-
-
- ianmol100
- Hero Rocketeer
- Posts: 275
- Thanks: 1
-
trying to edit compiled css files using extplorer. The code in the master files just displays as one long line, from left to right, making it nearly impossible to edit. It does the same thing on my server.
Anyone have any suggestions?
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
1. NEVER edit files in the compiled-css folder.
You will loose all changes when you change the template settings.
2. Use a custom-css or less file for your custom-code.
If you want to add a custom css file just add a file called gantry-custom.css in the css folder of your template. The name of the file follows this pattern: [template-name]-custom.css.
For Fracture this would be: rt_fracture-custom.css for example.
A typical workflow for this would be to copy the rule from Firebug for example and paste it into this custom css file and change the property you want. Also add some css specificity.
(.logo-block #rt-logo {...} will be overriden by a rule div.logo-block a#rt-logo {...})
See the gantry-framework.org for more information.
3. That long winding line in the masterfiles is the result of the less-css-compression.
You can turn that off in the template settings > advanced -
The following users have thanked you: Maximiliano Dias
-
-
-
- Ed Gibson
- Sr. Rocketeer
- Posts: 146
- Thanks: 3
-
I (sort of) understand how to add via a custom.css file.
How do I eliminate?
For example, bootstrap.css (compiled css) includes...
img { border: 0 none; height: auto; max-width: 100%; vertical-align: middle; }
and I want it to be...
img { border: 0 none; height: auto; /* max-width: 100%; */ vertical-align: middle; }
How do I remove "max-width: 100%;" ?? - My alter-ego wishes he had RocketThemes!
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
see also:
www.w3schools.com/css/css_dimension.asp
-
-
-
- tjscreative
- Jr. Rocketeer
- Posts: 35
- Thanks: 1
-
How can I override the header color from compiled css in Oculus template?
css-compiled/master-2c2ae87be5d763d4558ebb30dcbbdb1a.css contains the info:
h1,h2,h3,h4,h5,h6{color:#ffffff !important;}
I try to use !important very judiciously, only as needed, but it's all over in this template.
I use SmartSlider2 and then use some h1 labels for optimal seo. I'd really like to keep these labeled h1 and be able to modify within SmartSlider2, as with any other RocketTheme templates I've used.
Captions at lgevans.creathost.com/ should be black, not white. Same problem at lgevans.creathost.com/our-builders/citizen .
Note- I show as a newbie, but have about 5 years in Joomla and about 35 sites. Am familiar with custom-css and have it setup for this site if specificity can help override !important, but I don't think it will. Part of the reason I'm asking is to find if I'm naive or if there is some good reason to use so much !important in a template. Not complaining, but really would like to understand...
Appreciate any help or insights you can offer. - Last Edit: 10 years 9 months ago by tjscreative.
-
-
-
- tjscreative
- Jr. Rocketeer
- Posts: 35
- Thanks: 1
-
OK, so I found the source of my problem, the compiled code, to be style.less and this specific code:
h1, h2, h3, h4, h5, h6 {
color: @body-title !important;
.component-body & {
color: @dark-grey !important;
}
}
I'd like to eliminate or override the !important from "color: @body-title !important;" but have no idea how, as I thought !important was like the last word.
If I just edit the style.less file and remove the !important, I get the results I want, but I don't want to live with a hack long-term.
I can edit SmartSlider's php to add !important to its color, but that seems like just digging a deeper hole.
I'd like to use good techniques to override the default style.less file. Suggestions please? - Last Edit: 10 years 9 months ago by tjscreative.
-
Time to create page: 0.058 seconds