1

Channel form css overrides my css. Ruining the consistent layout across the site.

Is it supposed to be like that? How can I have my style on the submit button for example?

Thanks, L.

2

Simply apply greater significant specificity in your CSS rules that you want to lay on your form. This is a simple part of CSS. Here is an example:

// The forms theme 
.form .button {
    color: red;
}

// Your button theme, adding greater specificity if needed
.button,
.my-page-body .form .button {
    color: blue;
}

This is really more of a CSS answer than EE answer.

You can set a class on your Channel Form using a param: https://docs.expressionengine.com/latest/channel/channel_form/index.html#class
And just apply your styles to that class:

{exp:channel:form
    class="my-form-class"
    ...}

    <button class="button" />

{/exp:channel:form}

...

// Form styles
.my-form-class .button {
    color: blue;
}

Another option is to disable including EE form assets using a param on the Channel Form: https://docs.expressionengine.com/latest/channel/channel_form/index.html#include-assets
This can be dicey if you are using complex fields in the Channel Form instead of simple text/text-area fields.

Any of these options could work for you; you'll need to be a lot more specific in your use case to recommend one option over another, and I doubt I covered all of them in this answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.