I am trying to add the following code to the SiteOrgin Visual Editor. via Page Builder. Instead of a button all i see it the code on the screen. Any Suggestions?
<a href="#" class="myButton">Cluster Flux MSP Services</a> .myButton { -moz-box-shadow:inset -1px 0px 0px -50px #cf866c; -webkit-box-shadow:inset -1px 0px 0px -50px #cf866c; box-shadow:inset -1px 0px 0px -50px #cf866c; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315)); background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0); background-color:#d0451b; -moz-border-radius:42px; -webkit-border-radius:42px; border-radius:42px; border:3px solid #942911; display:inline-block; cursor:pointer; color:#ffffff; font-family:Georgia; font-size:21px; padding:15px 24px; text-decoration:none; text-shadow:0px 0px 50px #854629; } .myButton:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b)); background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%); background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%); background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%); background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%); background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b',GradientType=0); background-color:#bc3315; } .myButton:active { position:relative; top:1px; }
Hi Wchristner,
Okay, so WordPress (or rather TinyMCE) will filter out the style element when switching between the text and visual tabs (reference). As a result, it’s basically not possible to use the editor widget and directly add CSS like this. Instead, I would recommend adding the CSS with a plugin like SiteOrigin CSS – once installed please navigate to WP AdminAppearanceCustom CSS and add your CSS.