This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How do I change the CSS of the Cta widget

Resolved 7 replies pluginplugin-page-builder
Victoria du Roure
11 years ago · Last reply by Victoria du Roure 11 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.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Andrew Misplon Staff 11 years, 8 months ago

    Hi Victoria

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

  2. Victoria du Roure 11 years, 8 months ago

    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. Andrew Misplon Staff 11 years, 8 months ago

    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. Greg Priday Staff 11 years, 8 months ago

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

  5. Victoria du Roure 11 years, 8 months ago

    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. Andrew Misplon Staff 11 years, 8 months ago

    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. Victoria du Roure 11 years, 8 months ago

    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.

Have a different question or issue?

Start New Thread