How can I add HTML/CSS code to visual editor
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;
}This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
1Hi 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.
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.