I am using ChronoForms and RocketTheme templates on most of the websites I build.

The Gantry Framework includes some Bootstrap styling that overrides the ChronoForms styling so that (for example) a text input box is a fixed size of 206 pixels:

input, textarea, .uneditable-input {width: 206px;}

It looks like this is happening because of the stylesheet load order:

<link rel="stylesheet" href="/components/com_chronoforms/css/frontforms_tight.css" type="text/css" />
<link rel="stylesheet" href="/components/com_chronoforms/css/formcheck/theme/classic/formcheck.css" type="text/css" />
<link rel="stylesheet" href="/components/com_chronoforms/css/formcheck_fix.css" type="text/css" />
<link rel="stylesheet" href="/templates/gantry/css-compiled/bootstrap.css" type="text/css" />

Is there an easy way to enable the ChronoForms styling in preference to the Gantry bootstrap styling without editing core files?


In Chronoforms you can LoadCSS in your form events. You should be able to override Gantry in there.


Without the items installed in front of me I am making a guess that this can be changed in template header of index.php. If it is done here you will have to track it when updating the template.

I know plugins are loaded by the order seen in the plugin manager. I might look there but may not be of much help being that this is primarily template.

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .