Home>Support>How do I change the CSS of the Cta widget

How do I change the CSS of the Cta widget

By Victoria du Roure, 10 years ago. Last reply by Victoria du Roure, 10 years ago.

I am trying t change the margins, colors and alignment of the CTA in the widget area

www.alltheshoesfit.com

I want to center the text and the button and make them in line. I see the CSS but I do not know where to make the changes.

Can you help?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi Victoria

    Is the widget live? Please can I take a look so I can see the button style.

  2. 10 years, 3 months ago Victoria du Roure

    Hi – I deactivated it because it didn’t look good. Here is a link to a test page where I set it up in a page builder col.

    http://www.alltheshoesfit.com/test/

  3. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Here is the container and two headline:

    /* Call to Action Widget */

.sow-cta-base {
background: #F8F8F8;
border: 1px solid #E3E3E3;
padding: 2em 2.5em;
zoom: 1;
}

.sow-cta-base .sow-cta-text h4 {
margin-top: 0;
}

.sow-cta-base .sow-cta-text h5, .sow-cta-base .sow-cta-text p {
font-weight: normal;
margin-bottom: 0;
}

    You might need to add the !important hack when changing any existing properties.
    Ref: http://css-tricks.com/when-using-important-is-the-right-choice/

    Our tutorial on Custom CSS is here: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

  4. 10 years, 3 months ago Greg Priday
    Hi, I Work Here

    Also, just a small note. The next update of the widget bundle will handle this centering, Keep an eye out for the update.

  5. 10 years, 3 months ago Victoria du Roure

    Thank you! I saw the container CSS using the safari developer console, but I do not know where too access the css for that container. I am not using one of your themes (maybe I should), and I have a CSS Editor plug-in but it does not seem to always work. Can you recommend a good CSS editor to use? Jet pack?

  6. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    That’s it, either the module in Jetpack or something like this: https://wordpress.org/plugins/simple-custom-css/.

    For several reasons, if you are just editing a property, like changing color, your change might lose out on priority in the CSS plugin or lack specificity. In that case try !important.

    .sow-cta-base {
background: #000 !important;
}

    The developer console will help you see if your added custom selector is losing out. If it’s correct but doesn’t have priority, it will show but further down the list and be crossed out.

  7. 10 years, 3 months ago Victoria du Roure

    Perfect! Thanks so much.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More