This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

SiteOrigin Button Widget

Resolved 1 reply developerpluginplugin-widgets-bundle
Bilal Haidar
9 years ago · Last reply by Alex S 9 years ago

Hi,

I would like to ask what is the default css configuration for the button used in the widget? I know I can change and customize, but I would like to grab the default css for that button.

As I might guess, with the customizations, the default css gets updated accordingly.

Thanks,
Bilal

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

1
  1. Alex S Staff 9 years, 1 month ago

    Hi Bilal,

    The default button CSS is:

    .so-widget-sow-button-atom-d0a8a77b6f79 .ow-button-base a {
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1em;
  padding: 1em 2em;
  background: #41a9d5;
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#298fba),color-stop(1,#41a9d5));
  background: -ms-linear-gradient(bottom,#298fba,#41a9d5);
  background: -moz-linear-gradient(center bottom,#298fba 0%,#41a9d5 100%);
  background: -o-linear-gradient(#41a9d5,#298fba);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#41a9d5', endColorstr='#298fba', GradientType=0);
  border: 1px solid;
  border-color: #2685ad #247fa5 #227598 #247fa5;
  color: #FFFFFF !important;
  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065);
  text-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.so-widget-sow-button-atom-d0a8a77b6f79 .ow-button-base a .sow-icon-image,
.so-widget-sow-button-atom-d0a8a77b6f79 .ow-button-base a [class^="sow-icon-"] {
  margin: -0.1em 0.75em -0.2em -0.75em;
}
.so-widget-sow-button-atom-d0a8a77b6f79 .ow-button-base a:visited,
.so-widget-sow-button-atom-d0a8a77b6f79 .ow-button-base a:active,
.so-widget-sow-button-atom-d0a8a77b6f79 .ow-button-base a:hover {
  color: #FFFFFF !important;
}
.so-widget-sow-button-atom-d0a8a77b6f79-button-base a.ow-button-hover:hover {
  background: #49add7;
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#2b95c2),color-stop(1,#49add7));
  background: -ms-linear-gradient(bottom,#2b95c2,#49add7);
  background: -moz-linear-gradient(center bottom,#2b95c2 0%,#49add7 100%);
  background: -o-linear-gradient(#49add7,#2b95c2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#49add7', endColorstr='#2b95c2', GradientType=0);
  border-color: #288cb6 #2685ad #247ca1 #2685ad;
  color: #ffffff;
}

    You will need to replace so-widget-sow-button-atom-d0a8a77b6f79 with a unique identifier for the button – such as a widget class, as the above CSS will not work without doing so.

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.

Have a different question or issue?

Start New Thread