CSS For Helix Template - Question | JoomShaper
Back to the questions

CSS For Helix Template

E

Ekaterina

Template 2 weeks ago

Hi. Tell me how the style is created /templates/shaper_helixultimate/css/template.css I need to remove for padding style "!important"

(input[type=search]:not(in the style for the external indentation.form-control),input[type=tel]:not(.form-control),input[type=number]:not(.form-control),select:not(.form-select):not(.form-control){display:block;width:100%;padding:.5rem .5rem !important;)

I delete it but it reappears. I need to adjust the style for the forms and use my own indentation style for the padding.

0
6 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 weeks ago #217408

Hi,

indeed you cannot remove it from template style file, you have to override it using Custom CSS.

Read Tip No1 >> https://www.joomshaper.com/documentation/helix-framework/customization-tips

and whole details >> https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta#documentation-heading-3

0
E
Ekaterina
Accepted Answer
2 weeks ago #217409

I know how to customize custom CSS. But I have a lot of forms used on my website. And I can't write a style in custom CSS for everyone. The style for the forms is configured in another component. I need to make sure that the style doesn't overlap with the template.

https://disk.yandex.ru/i/BqPbxjSBVDmu_Q

0
E
Ekaterina
Accepted Answer
2 weeks ago #217410

I deleted the "!important" in the file in line 2209 and now everything is fine. \templates\shaper_helixultimate\scss\theme.scss

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 weeks ago #217412

Yes, but remember that next update may override that. So consider file permission change.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 weeks ago #217411

You have those options (that's all I can suggest):

  1. Create override for each page that you used form (Page Settings > Page CSS > Custom CSS)
  2. Or, create global CSS override
  3. Or, edit theme.scss (and change permission to it later)
0
E
Ekaterina
Accepted Answer
2 weeks ago #217413

These methods are the same in meaning. They cannot override the style if you use "!important". Why use this when the components can use styles for different form. Everything works well in the template and without "!important"..

0