[Resolved] Styling shortcode like a button on a page

[Jessica]

Is there a way to add shortcode as the link a button goes to instead of it having be a regular URL? Or is there a way to style shortcode as a button? I’m trying to add shortcode to open a booking widget in a lightbox, but I can’t get it to appear any way other than as a plain link. Thanks in advance for any insight!

[Ying]

Hi Jessica,

Can you link the page and point us to where we can see this shortcode?

[Jessica]

Hey Ying, for sure. It’s here: https://awe.gojkemail.com/trips/pico-de-orizaba/ Password awexpeditions

It’s toward the bottom as a link currently that says Book Your Trip next to the Book Your Trip header. It’s working well as that link, but I’d like it to look/function like a button instead if possible. Thanks!

[Ying]

Give this CSS a try.

a.venobox.vbox-item {
    font-family: Jost, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 20px;
    margin-right: 10px;
}

The style is copied from the GB button above the shortcode 🙂

[Jessica]

Woohoo, that worked – thanks SO much Ying!! I appreciate the help so much!

[Ying]

You are welcome 🙂

[Jessica]

Hey Ying (or other support folks) – this code was working perfectly for me in the CSS in the GeneratePress child theme I was using on the site, but it stopped working there about a week ago. Now I put that code in the Customizer CSS and it’s working as it should again. Any idea why it’s not working when added to the child theme CSS and how to get that fixed? Thanks!!

[Fernando]

Hi Jessica,

Are you referring to the style.css file? Two things that could cause it not to work there are:
1. Syntax error somewhere in other CSS code in that file.
2. Caching

For #1, here’s a useful site you can use to check for syntax errors: http://csslint.net/

[Jessica]

Hey Fernando, yes it’s the style.css file in the child theme. I cleared my browser and host/server cache and neither fixed it. I also put that css in the link you sent and it had a couple warnings for IE6 but no errors. Any other ideas? I’ve left it in the Customizer CSS for now but will that be overwritten the next time this client updates her theme? Thanks!

[Ying]

I’ve left it in the Customizer CSS for now but will that be overwritten the next time this client updates her theme? Thanks!

Are you referring to the Customizer > additional CSS? If so, it will not be overridden by the theme updates.

[Jessica]

Yes that’s correct! Oops I was thinking of adding to style.css in the regular theme if not using a child theme – that’s where CSS gets lost right? In Customizer-Additional CSS it’s all good right? Thanks!!

[Ying]

Oops I was thinking of adding to style.css in the regular theme if not using a child theme – that’s where CSS gets lost right?

That’s correct. Do NOT modify any files in the parent theme, all changes will get lost during updates.

Additional CSS it’s all good right?

Yes 🙂

[Jessica]

Great, solved then, thanks so much!

[Ying]

You are welcome   🙂

[Author]

Posts