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?
the code snippet didn’t show the tags. It’s in between tags.
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.