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.

Button widget – get css from theme?

Open 7 replies customizationpluginplugin-widgets-bundle
David Buus
Started · Latest reply by Alex S

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.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Alex S Staff

    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. 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. Alex S Staff

    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. 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. Alex S Staff

    Hi David,

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

  6. 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. Alex S Staff

    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.

Have a different question or issue?

Start New Thread