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
7 years ago · Last reply by Alex S 7 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.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Alex S Staff 7 years, 11 months ago

    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 7 years, 11 months ago

    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 7 years, 11 months ago

    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 7 years, 11 months ago

    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 7 years, 11 months ago

    Hi David,

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

  6. David Buus 7 years, 11 months ago

    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 7 years, 11 months ago

    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