Customize Less CSS that uses !important
-
-
- tjscreative
- Jr. Rocketeer
- Posts: 35
- Thanks: 1
-
In Oculus, Preset 2, dark body style, I'm having an issue with h1, h2, h3, h4, h5, and h6 font color. All seems fine until I use a plugin that also uses those heading styles. Specifically, SmartSlider2 from Nextend uses h1-h6 to maximize seo. The problem is that Oculus has the font color for all these set to inherit the default heading, white, with !important, so that my normal overrides in oculus-custom.css won't work.
I'm surprised to see !important used heavily in this particular template preset, as I !thought! !important should only be used as a last resort.
I can edit the less file that creates the problem, templates/rt_oculus/less/style.less and remove !important from the following code. Then things seem to work right.
h1, h2, h3, h4, h5, h6 {
color: @body-title !important;
.component-body & {
color: @dark-grey !important;
}
}
You can see the problem on a site I'm just developing at lgevans.creathost.com/ . The headings in the first slide should be black, but become white because of this problem.
I'd rather not hack the stock code, but I haven't found any other technique to overcome the !important formatting other than editing on an element level or in php, something I dislike as much as !important.
Thank you in advance for your help.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
You are correct in that it should be avoided wherever possible ( but sometimes it is not possible). You should not change our original template files. You should use a custom CSS or LESS file to effect an override on the template statement. Of course to do this you will have to use !important yourself (and add a little more CSS specifity).
As GANTRY4 now incorporates LESS. There are two recommended methods for dealing with your custom changes to the template. Unless you specifically want to use LESS then you should USE ITEM 1 below.
-
1. For older templates (pre FRACTURE
-
2. For those of you that want to use the power of
Do not change the CSS files in the compiled-css folder as these changes will be lost whenever Gantry 4 detects a change in a LESS file, or the cache gets cleared.
For more information on LESS please see the documentation on Gantry 4 at http://www.gantry-framework.org . Also, see this tutorial http://www.rockettheme.com/component/kunena/free-joomla-stuff/174956-your-first-css-custom-file-or-less-custom-file?start=0#860738 .
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- tjscreative
- Jr. Rocketeer
- Posts: 35
- Thanks: 1
-
Thank you for your reply, Mr. T, but this solution, using !important to override another !important, loses the benefit of css, so I'm really hoping you have more in your bag of tricks or can tell me things I don't know about custom css input.
If I add a statement in my rt_oculus-custom.css file or my template-custom.less file, say for instance...
div#nextend-smart-slider-1 .sliderfont2 {
color: #000000 !important;
}
...it works, then I lose the font color selection in my slider and am forcing a specific color, black. Rather than customizing css, this feels like going back toward hand coding html (sorry to be brutal). In that case, I might better opt to go back to old-fashioned hacking.
I appreciate your gentle and politically correct input about judicious use of !important and how important it is not to edit the template's original files, but there must be some more graceful way to work with this than custom css editing each instance of font colors in the slider. I sincerely hope so. At this point, I'm regretting using the Oculus template, though I have used it on other sites and overall find it quite nice.
Is there a way I can tell have the template use the plugin's color variable settings with !important, so as not to set a fixed color?
Thank you again for your reply, your very quick reply.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
The color variables from the template are available in LESS (not CSS) so you would have to use a custom LESS (rather than CSS) file to use those.
Ok, So I've had the opportunity to discuss this with one of our DEVS, and in the instance you've cited we are inclined to agree with you that the use of !important on those statements IS bad practice. So, I've raised a bug ticket for this to be investigated further (obviously we'll have to do some more testing to satisfy ourselves this change can be made safely).
So, in the mean time, yes, remove those !important from our original style.less file if that solves your issue. Hopefully then there will be a new release of the template to address this in due course.
Regards, Mark. -
The following users have thanked you: tjscreative
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
This message contains only secure information that is visible to MrT, moderators and administrators
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- tjscreative
- Jr. Rocketeer
- Posts: 35
- Thanks: 1
-
I haven't heard anything and am down to the wire making this site go live. Any progress on the template or must I work around it for now?
Thanks,
Todd
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
No, no news, the ticket is outstanding - and i'm afraid it's unrealistic to expect that to be dealt with that quickly, so yes you will have to work around it for now.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- tjscreative
- Jr. Rocketeer
- Posts: 35
- Thanks: 1
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
tjscreative wrote:
I love the template and have used it in both WordPress and Joomla. It's just very disapointing to struggle with stuff like this.
How about this as a workaround. As far as I can tell the !important attribute has been applied to the H1 & H2 tags. Can you tell your slider to use H3 for the slider captions and then use CSS to bring the H3 slider font-size up to H1 or H2 levels?
-
-
-
- tjscreative
- Jr. Rocketeer
- Posts: 35
- Thanks: 1
- I appreciate the suggestion and will consider it. I was hoping to be able to use h1 and h2 to help with seo, but now need to get the site up, so your suggestion is a timely alternative. Thank you very much.
-
Time to create page: 0.055 seconds