Home>Support>How can I add HTML/CSS code to visual editor

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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 6 months ago Alex S
    Hi, I Work Here

    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.

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