Forums

I have to disable Semantic UI in the frontend. I have very simple forms with simple styling an it takes mir hours to override all the Semantic UI classes. Spend now hours for searching where I can disable Semantic UI but I can´t find it.

Where / How can I do this?

Thanks

Hi cdash,

There is no way to do that, but if your form has custom HTML (you didn't add any fields using the designer) then the fields will not be affected by the semantic styling.

I may add this feature to the next update!

Best regards,
Max

Hi Max,

I use ChronoForms for years now and I always used custom HTML. But there was always a tab like "Code" ore something that I couldn´t find in ChronoForms 6. So the first Time I used the Designer.

Do I have to add custom code in the designer. Is it possible to use custom HTML when I add in the designer Custom -> HTML?

An option to disable Semantic UI and the possibility to add custom css classes to fields would be cool.

Thanks

Hi cdash,

Just drag a Custom > HTML under the designer and add your form code inside, do not use any semantic ui classes and no semantic files will be loaded except those needed by Chronoforms to display the error messages.

You can also use a custom > CSS to add your own CSS rules for the HTML or just call a CSS file in the same HTML box.

Best regards,
Max

I realized that now, by default i use the Bootstrap comming with my Template and UIKit. Tried to set some classes for tables and no sucess, my table is mounted inside a Custom HTML.

My doubt is, CFv6 comes with tables themes inside UI Semantic package? I tried to use some classes based at UIDocs and no sucess.

Hi Austre,

The semantic ui will not affect the table unless the table has the class "ui table"

Best regards,
Max

Hi Max,

I also use uikit for rendering the frontend. A way to disable semantic ui will be very nice.

Regards,
Marc

PS: First time working with V6 -> very good job!!! :-)

I can confirm that this is unpractical. As beautiful as it is to have a stylish form up and running within 15 minutes, semantic.css is overriding things like line-height in html! This has nothing to do with the forms. As long as it's restricted to form elements, I wouldn't mind...
​
Chronoforms6 is a totally new version and I understand new concepts need time to improve, so I would find it useful for a future updated version to either remove all styling that does not correspond with the semantic classes (preferred) or in the worst casea, at least to offer a possibility to remove it.

Hi,
​
Yeah . It would be great if the semantic ui css (used in chrono 6) only targeted the form and not all site content - at least headers++ etc..
The way it is now it pulls in 5 css files and 4 js files (ref below) and causes the pages with form to render different than all other templated pages.

 <link href="/libraries/cegcore2/assets/semantic-ui/reset.inline.min.css" rel="stylesheet" />
 <link href=/libraries/cegcore2/assets/semantic-ui/site.inline.min.css" rel="stylesheet" />
 <link href="/libraries/cegcore2/assets/semantic-ui/semantic.min.css" rel="stylesheet" />
 <link href="/libraries/cegcore2/assets/semantic-ui/text.css" rel="stylesheet" />
 <link href="/libraries/cegcore2/assets/semantic-ui/fixes.semantic.css" rel="stylesheet" /> 

<script src="/libraries/cegcore2/assets/semantic-ui/semantic.min.js"></script>
 <script src="/libraries/cegcore2/assets/js/g2.js"></script>
 <script src="/libraries/cegcore2/assets/js/g2.boot.js"></script>
 <script src="/libraries/cegcore2/assets/js/g2.forms.js"></script>

The optimal solution would be if the if the necessary css & js could be contained in 2 files (1 js and 1 css) which only targeted the form(s) with specific "chronoform" class selector or similar. The same class selector could be applied to "feedback message" (since it is not a form).
​
Besides this issue I think Chronoforms rocks!

PS: Another option would probably be to ensure that the chronoforms CSS assets are loaded before the template assests - so in case of equal specificity the template CSS is not ruined by the cegcore2 CSS assets (which now are loaded last - or at least after template files) - making them take precedence in these cases (of otherwise of equal specificity)

Those files are how they come from Semantic-UI. It's not really normal practice to make large changes to the libraries you include.
​
https://semantic-ui.com/introduction/getting-started.html
​
There are plugins you can use to change the order your CSS files are loaded though.

Sure, mostly libraries are used to reduce work and keep updating simple - so you would want to keep external libraries unchanged, agreed. Libraries, however much work they should save, they should not dictate the look of the whole page, but only offer solutions for specific dom elements and in a modular system like joomla, these solutions have to be modular, too. So to affect all tables with classname "ui table" is fine for me, to affect html dom element in ANY way is a no-go. So a library that overrides values like line-height of the html element is one to avoid IMHO. Also, to offer just a few colours of buttons without the option to inherit colors of the general template makes no sense for me. Every half decent template has a button concept in place.
​
Why not stick to a removable bootstrap option?
​
I experience this with many otherwise great and super flexible extensions: there is either no styling concept and almost no classes, or a lot of predefined things that are very hard to override or disable. What a shame as it reduces the flexibility that was carefully implemented on the feature level!

It uses Semantic probably because of all the other stuff in the background. Semantic does more than just style the form, it also has all the JS to deal with submission, validation, form events, and more.

Hello all,
​
That's a bug, the semantic.min.css file had some uncommented code which should have been commented, that should be fixed in the next update or you can send me a message to get the updated file.
​
Thank you for posting about the issue!
​
Best regards

Well there you go OP. You're right and I'm wrong🙂

@healyhatmanHi,
Do you have any examples of a Joomla! extensions that can actually change the load order of CSS?
And actually make the chronforms assets load first and not last (causing header issues H1 etc..)
​Yeah sure - the js doesnt cause any immediate conflicts either.
​
Is there any chance the chronoforms extension itself could have the CSS assets loaded first natively (before template files) - instead of last?
​
@adminWould the mentioned commenting out of code fix the header overrides etc?
If so - could you please post the file here, optionally a description of which lines in which files should be commented out - or how should I send you a message - to get the updated file?
​
Thanks a lot for replies! 🤣
​
Best regards,
Hjelperne

By the way - thanks for the heads up! It appears commenting out (the rest of) L: 19 in

/libraries/cegcore2/assets/semantic-ui/semantic.min.css

containing the following CSS (below only the code that I now commented out - not the code that is already commented out on the same line):

 /* html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}*/ /*!

fixed my header issue++
​
If its possible to add this tweak to next release (if it does not screw up other chronos stuff I am not using) - this would most certainly fix issues I am sure many people are experiencing with simple forms at least.
​
Once again life is sweet!
Thanks for sharing your thoughts.

Hi Hjelperne,
​
Yes, that's the problem to be fixed in the next update!
​
Best regards