Button CSS not working

[saltersfireplace]

I have been trying to be able to use the Cornerstone shortcode generator to create a button in a regular wordpress page that matches a custom button i created in the Pro Header builder. Having no luck. Whats the best way to do this. Its a button that will appear many times throughout the site.

Specifically want to change the letter spacing to match the menu bar button.

[alexander]

Hi @saltersfireplace,

The shortcode generator uses older button designs that are styled based on Theme Options and the current Stack. We don’t really recommend using those unless you’re already on an older site and need to for compatibility.

There are a few ways to do what you’re looking for. If you Inspect the button in the Header Builder you can save it as a Preset. Then in any of the other builders you can just drag that variant in to your page from the element library.

Another method is creating a Global Block and simply placing a Button inside. This can be referenced via a shortcode (shown in the Global Block Manager view) or by inserting a Global Block element.

[saltersfireplace]

So i am adding this button into the regular wordpress backend because i’m editing a product short description. Pro does not allow me to edit this part of a product.

So Im thinking i need to go with the Global Block. Can you share the best way to do that? Or documentation for that.

[saltersfireplace]

I have tried adding a global block to wordpress backend. Its not showing up however.

[cs_gb name=“get-my-estimate-button”]GET MY ESTIMATE[/cs_gb]

[nabeel]

Hi Matt,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:

• Link to your site
• WP login URL
• WP username/password
  ​
  To know how to create a secure note, please check this out: How The Forum Works

Thanks!

[saltersfireplace]

I’ve decided against using global blocks or editing the shortcode itself.

I’d rather use the actual x-button class and just make adjustments to the class itself.

Here’s what I have added:
.x_button {
font-weight: bold;
text-shadow: none;
letter-spacing: 8px;
}

But its not showing up in the button.

Reference http://10e74beebf3624210.temporary.link/product/gf-160-by-jotul/ to see the button added to a regular wordpress page (outside of cornerstone or pro as it is a woocommerce product)

[tristup]

Hi Matt,

The Button element maintain a certain HTML structure and classes in the Tags, which is not present in your shortcode. I went ahead and added the HTML tags and the classes to implement the similar style of the button in Header. I have found the style has been integrated with specifiec class named e209-12, which is added statically to maintain the styles. The X Button code will look like the following.

[x_button href="https://whyfire.com/scenarios-page-salters/?refdealer=template-price-book-salters" class="e209-12 x-anchor x-anchor-button x-hide-xs"]<span class="x-anchor-content"><span class="x-anchor-text"><span class="x-anchor-text-primary">GET MY ESTIMATE</span></span></span>[/x_button]

I have also removed the padding for the default class integrated for the X Button shortcode with the hierarchy class by adding the following code into the Theme Options > CSS.

.e209-12.x-btn
{
    padding:0;
}

Hope this helps.
Thanks

[saltersfireplace]

Perfect! Thanks so much!

[marc_a]

Hi Matt,

You’re welcome and it’s our pleasure to help you. If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.