Home>Support>Button widget – get css from theme?

Button widget – get css from theme?

By David Buus, 6 years ago. Last reply by Alex S, 6 years ago.

Hi guys.

Is there a way, that I can get my buttons to use the css from my theme (oceanWP)?

Currently I am struggling with the hover functions.
It works perfect with my mailchimp shortcode, and the button uses the theme css and looks just the way, I want it to.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

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

    Hi David,

    Not directly, no, but we might be able to allow for this with some custom CSS.
    Do you have a public URL where we can take a look at your setup?

  2. 6 years, 6 months ago David Buus

    Sure thing…

    On the home page:
    https://naturligkrop.com
    the button looks the way I would like it to. This is the mailchimp shortcode.

    But on this page, it doesn’t…
    https://naturligkrop.com/kostplan/
    This is the buttons shortcode

    Also, can you help me with a way to change the text on the blog, where it says: “You might also like”
    https://naturligkrop.com/toastbrod-lchf/
    I would like to say: “Har du også set”

    Thanks

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

    Hi David,

    You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:

    .widget .so-widget-sow-button .ow-button-base a {	background: #bd492b !important;	border-radius: 2px !important;	display: inline-block !important;	margin: 0 !important;	padding: 14px 20px !important;	border: 0 !important;	cursor: pointer !important;	text-align: center !important;	letter-spacing: 0.1em !important;	line-height: 1 !important;	-webkit-transition: all 0.3s ease !important;	-moz-transition: all 0.3s ease !important;	-ms-transition: all 0.3s ease !important;	-o-transition: all 0.3s ease !important;	transition: all 0.3s ease !important;	cursor: pointer !important;	text-shadow: none !important;	line-height: normal !important;}.widget .so-widget-sow-button .ow-button-base a span {	font-family: "Open Sans",sans-serif !important;	font-size: 12px !important;	font-weight: 600 !important;	text-transform: uppercase !important;	color: #fff !important;}.widget .so-widget-sow-button .ow-button-base a:hover {	background-color: #ffffff !important;	color: #bd492b !important;}

    How does that look?

    You might also need to install the SiteOrigin CSS Editor.

  4. 6 years, 6 months ago David Buus

    It unfortunately looks wrong…

    I’ve left it, so that you can see whats happening…

    https://naturligkrop.com/kostplan/

    The color is wrong, the padding is wrong… :(

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

    Hi David,

    Please replace the previously provided CSS with the above-updated CSS.

  6. 6 years, 6 months ago David Buus

    And now the text in hover is wrong :(

    Maybe there is a different way to add buttons, that just follows the theme css?

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

    Hi David,

    You might be able to replicate the default theme button CSS by applying the button class to a link. Try adding the following HTML:

    <a href="http://example.com/" class="button">Test Button</a>
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