How best can I fix a Gantry Framework and ChronoForms Styling Conflict?

Question

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?

Answer 1

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

Answer 2

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.