Home>Support>Can’t apply custom style to Call to Action widget

Can’t apply custom style to Call to Action widget

By meaganbird, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

So I’ve been tinkering with the Call to Action and trying to customize my style. It looks great when I code it in the “inspect element” tool in the browser. I apply my changes in my child theme, refresh, and nothing. I looked closer and found that it’s injecting this inline style and overwriting my custom CSS:

.origin-widget.origin-widget-call-to-action-simple-light_dashed{zoom:1;padding:2em;position:relative;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background:url(http://www.springgrovecounseling.net/wp-content/plugins/siteorigin-panels/widgets/img/textures/light-dashed.png) repeat #F6F6F6;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.1);border:1px solid #E0E0E0}.origin-widget.origin-widget-call-to-action-simple-light_dashed:before{content:'';display:block}.origin-widget.origin-widget-call-to-action-simple-light_dashed:after{content:'';display:table;clear:both}.origin-widget.origin-widget-call-to-action-simple-light_dashed .title{line-height:1.6em;margin:0;color:#333333;font-weight:auto}.origin-widget.origin-widget-call-to-action-simple-light_dashed .subtitle{line-height:1.25em;margin:0;color:#555555;font-weight:auto}.origin-widget.origin-widget-call-to-action-simple-light_dashed .origin-widget-button{position:absolute;display:block;top:50%;right:2em;margin-top:-22px}@media (max-width:680px){.origin-widget.origin-widget-call-to-action-simple-light_dashed .origin-widget-button{position:static;margin-top:2em}.origin-widget.origin-widget-call-to-action-simple-light_dashed .origin-widget-button a{display:block}}

How can I fix this so my custom CSS can be applied?

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, 11 months ago meaganbird

    the code snippet didn’t show the tags. It’s in between tags.

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

    Hi Megan

    Here is CSS Tricks on the topic: http://css-tricks.com/override-inline-styles-with-css/.

    If you send through your customisation I can help format it for you if needs be.

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