Putting !important Property On Template.css Limits Ability To Override Via Custom.css - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Putting !important Property On Template.css Limits Ability To Override Via Custom.css

JL

Julian Lilio

Template 3 years ago

Dear Support

Template: Finion Objective: Show top-services even on smaller-sized devices. Issue: Overriding this using custom.css is not possible unless !important property is removed from the template.css. File to check: template.css Affected CSS snippet:

@media (max-width:480px){
    .map-link,.create-account,.top-services{
        display:none !important
    }
}

Suggestion: Due to the possibility of the file being updated by a new template version, as much as possible, please do not use !important tag on template.css on final template releases because it limits the ability to make use of the css override by the end user using custom.css. I have tested this and clearing browser cache does not help. At the moment, I have removed !important from template.css.

Kindly double check at your end and perhaps include this as an update on future release(s).

Thank you.

Best regards

Julian

0
8 Answers
Pavel
Pavel
Accepted Answer
3 years ago #49242

Hi Julian.

If property with !important placed in custom.css it must override property with !important from template.css, since custom.css has higher priority than template.css.

If it does not happens you should check where custom.css is connected in template code. Some Joomshaper's templates have problem with connection order of custom.css file.

Read this topic https://www.joomshaper.com/forum/question/7549. I hope this will help you solve the problem.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #49270

Hi

I also agree with Pavel.If property with !important placed in custom.css it must override property with !important from template.css

By the way Julian thanks for your suggestions. I will note it down and inform our DEV team

-Thanks again

0
JL
Julian Lilio
Accepted Answer
3 years ago #49283

Dear Pavel and Mehtaz

Thank you for your answers.

@Pavel, I agree with the css hierarchy and it should behave as you were saying. [Yet, it isn't]. See below. - edited: custom.css is above template.css, which is your point. thanks for recommending a "fix" on the index.php by moving parts so it produces the correct sequence. Still, I hope this gets fixed by the dev team; I'm sure one of these days, the index.php file will also be overriden by a new version.

<link href="/site/templates/finion/css/bootstrap.min.css" rel="stylesheet" />
<link href="/site/plugins/system/helixultimate/assets/css/system-j4.min.css" rel="stylesheet" />
<link href="/site/plugins/system/helixultimate/assets/css/choices.css" rel="stylesheet" />
<link href="/site/templates/finion/css/font-awesome.min.css" rel="stylesheet" />
<link href="/site/templates/finion/css/finatic-font.css" rel="stylesheet" />
**<link href="/site/templates/finion/css/custom.css" rel="stylesheet" />**
<link href="/site/templates/finion/css/fa-v4-shims.css" rel="stylesheet" />
**<link href="/site/templates/finion/css/template.css" rel="stylesheet" />**
<link href="/site/templates/finion/css/presets/preset1.css" rel="stylesheet" />

I have been using Joomshaper products for quite sometime already, although I concede I may not have the same indepth knowledge as both of you have.

CSS specificity is a tricky topic to comprehend, much more to master. The little that I know dictates that littering the code with !important will affect those who develop (or extend) the code afterwards.

Recompiling the SCSS puts back the !important tag in the template.css (and reintroduces the issue) which means I may need to find where that is among the scss files, perhaps until a more elegant way to address this is in place.

So yes, @Mehtaz thanks for assuring that you will escalate this to the dev team.

Best regards

Julian

0
Pavel
Pavel
Accepted Answer
3 years ago #49287

The little that I know dictates that littering the code with !important will affect those who develop (or extend) the code afterwards.

Hi Julian. This is not a dogma. This rule is more suitable for developing from scratch. But we work with ready-made solutions in our practice. Even bootstrap contains !important somewhere. Good practice here will not use !important thoughtlessly. But use when necessary.

Using !important in your example is quite justified.

And yes, you need to fix custom.css connection order in your template

0
JL
Julian Lilio
Accepted Answer
3 years ago #49302

Thanks Pavel. I respect your opinion, but I cannot say that I agree with you on this.

The reason why people get ready made solutions is so that they don't need to do stuff by themselves. It's perfectly ok if they have someone like you who is technically competent in terms of code and stuff. That is not the case for many.

The strength, promise (and success) of Joomshaper lies in that... making it simple, especially for the simple and perhaps I'm in that (greater) category of users/customers.

I can understand logic, tweak some code here and there (even if that's not my main line of work). However, what is simple for some including yourself may not be so for others. Please do not assume that everyone else can follow technical instructions nor can code (nor has the extra time to spend more for what could have been simpler). That's the reason we have Page Builder and the wonderful Helix template framework, among others, even Joomla itself. I hope you can respect that too.

Thanks you for being a big help to many in the forums. :)

Cheers and happy holidays.

Note: Thanks Support for letting me know that responses are done directly on the forum not via email reply.

Best regards

Julian

0
Pavel
Pavel
Accepted Answer
3 years ago #49308

Please do not assume that everyone else can follow technical instructions nor can code (nor has the extra time to spend more for what could have been simpler).

I do not think so much and I do not argue with you. Perhaps it just seemed to you. I just share my experience and suggest a solution so as not to wait until it will be fixed by the Joomshaper team.

There are no ideal, ready-made solutions and unfortunately many things are not corrected for years. Therefore, we, as webmasters careful about our clients, have to take correction in our hands. And for this we need skills that will not be superfluous for any webmaster

0
JL
Julian Lilio
Accepted Answer
3 years ago #49660

This will be a pretty long reply, I apologize up front. I like to write in narratives when I find time. It's holiday in the Philippines today.

@Pavel. Ah, I see. You are a webmaster. One of the many hats I wear and which I love to do as well. I hope that one day, you will be more exposed to many other things related to the various landscapes of technology and perhaps then, you can broaden your understanding and be more forgiving. Perhaps you are right, there are no ready-made solutions that are ideal. In fact, for me, all technologies, no matter where they are in their level of maturity, will NOT always remain ideal. They evolve. They have to evolve due to many other factors.

Joomshaper's Solutions are Excellent but not Perfect I'd like to narrow this down to both Helix template framework and SP Page Builder. Both are excellent solutions, but they aren't perfect. They continue to evolve. For what they are before and now, I am already very grateful. If you have used other solutions such as JoomDev's (very nice Astroid framework which I have used in some of my work, but now in limbo when the company changed their business model) and ThemExpert's (I have lifetime access to Quix, but it seems taking forever for them to release a version that is compatible with Joomla 4), then you will better understand what I mean to be grateful with what JoomShaper has done to date for the Joomla community. I have been using Joomla since it was Mambo. I have been using Joomshaper products since 2014, using what can be used and setting aside those that are still to be improved or do my own workaround. As an imperfect person, I get irritated too.

I will not have to do what you have suggested, because what I did already worked for me. Yes, removing the !important tag from template.css is a workaround. Your recommendation related to css hierarchy, may be the real fix, but only if submitted to and accepted by the dev team and included in an official release. Until then, it's just another workaround (i.e., it is not permanent and can be overriden by a future release). Thank you for trying to help, anyways.

Joomshaper Team: If there's something that may be good for this community, that's a technical suggestion section (for those who are knowledgeable) to recommend fixes (in my opinion, avoiding workarounds), sort of like the Joomla bug squad with volunteers. Most 'fixes', if they aren't included in official releases, have the tendency to be overwritten. With this, it's easier to filter through all sorts of information such as requests for assistance (which I personally would do on rare occassions), comments (like mine), criticism (which some have the tendency to do instead of being grateful despite already knowing the fact that it's the same everywhere else and probably worse elsewhere; I was like this too many years ago, but I have learned better over the years as a technologist having been using varied solutions both open and closed sources) that are otherwise scatttered in the forums. Hence, technical recommendations (within the 'technical' suggestion section, or whatever you would name it) will help the dev team, which will no longer need to skim through all forum posts and comments but can get (and validate) the technical recommendation for inclusion in the official release. Then, it may be faster for the team.

Just my two cents.

Best regards

Julian

0
Pavel
Pavel
Accepted Answer
3 years ago #49728

Your recommendation related to css hierarchy, may be the real fix, but only if submitted to and accepted by the dev team and included in an official release.

Hi Julian. It was included in the fix list, as far as I know. Basic Helix Ultimate has no problem. Only some commercial templates have this bug. And this is a 100% developer error and must be corrected. Otherwise, custom.css simply does not make sense. Another question is - when it will be fixed?. I think this is a critical error. But apparently the developer team is concentrated on another task and not rush to correct it.

I hope that one day, you will be more exposed to many other things...

I have a lot of experience in many other things, as well as you... I have long live in the world, since 1973 ;)

0