CSS Additions not working

  • Resolved mmenigma

    (@mmenigma)


    5 years, 7 months ago

    Hello, I’m in need of a little css help.

    At the site I need help with I’ve made some css changes in the css box at the form. However, none of the css changes are taking effect on the front end.

    On an identical form at another site, I’ve made the exact same css changes with perfect results. you can view that here https://www.cannabischeri.com/cannademy-dosage-calculator/

    The broken site has only 6 active plugins installed and I’m using WP native theme. I deactivated all but CCF plugin and still no css changes.

    Any thoughts?

    Thanks, Mitch

    • This topic was modified 5 years, 7 months ago by mmenigma.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @mmenigma

    If the CSS changes works properly in the form preview, but not in the public website, that means these styles are being redefined or modified by the theme active on your website. The alternative is to define the CSS rules with the !important; modifier.

    For example, you have entered the following style definition:

    
.cp_cff_pastel #fbuilder {
    padding: 20px;
    background: #9cf;
    border-radius: 8px;
    color: #333;
}

    Modify it as follows:

    
.cp_cff_pastel #fbuilder {
    padding: 20px !important;
    background: #9cf !important;
    border-radius: 8px !important;
    color: #333 !important;
}

    In this way you ensure your rules will have precedence over the others.

    Best regards.

    Thread Starter mmenigma

    (@mmenigma)

    I’m sorry I think I didn’t explain it properly. css changes are not working at all on the problem site. Not in the preview or on live.

    Thanks, Mitch

    Plugin Author codepeople

    (@codepeople)

    Hello @mmenigma

    Do you have tried the recommended solution, define the css rules with the !important; modifier?

    Best regards.

    Thread Starter mmenigma

    (@mmenigma)

    I’m very sorry I doubted you. Yes. That fixed it. However, I don’t understand why I don’t need the !important modifier on my other site. The css works without it.

    Plugin Author codepeople

    (@codepeople)

    Hello @mmenigma

    In CSS it is very important in the order that they are loaded. For example, suppose there are two .css files, and you define in one of them the style: p{font-weight:bold;}, so, are waiting the paragraphs’ texts be in bold, but there is another file defining p{font-weight:normal;}

    If this second file is loaded after yours, the text of paragraphs would be normal, except if you define your css rule with the !important; modifier. I don’t have checked the order in which the CSS are loaded in your website, but it is evident your styles were being overwritten.

    Best regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS Additions not working’ is closed to new replies.