Jump to content

Button for embedded script doesnt match site styles. Why?

Recommended Posts

Site URL: https://www.pridechorus.org/events/spring-into-action

I have an issue I haven't had in the past. I use this embed code from Eventbrite to have an embedded checkout on this page. In the past, this code has worked to make the button style match the normal style for my site. However, suddenly when I used it this time, the button has a bevel/shadow thing and doesn't match the site style. I don't really konw much about coding or CSS. It's just always worked before. Any idea what is going on here?

Here is the code:

<!-- Noscript content for added SEO -->
<noscript><a href="https://www.eventbrite.com/e/spring-into-action-tickets-244595430517" rel="noopener noreferrer" target="_blank">Buy Tickets on Eventbrite</a></noscript>
<!-- You can customize this button any way you like -->
<center><button id="eventbrite-widget-modal-trigger-244595430517" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" type="button">Buy Tickets</button>
<noscript>Buy Tickets on Eventbrite</noscript></center>

<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
    var exampleCallback = function() {
        console.log('Order complete!');
    };

    window.EBWidgets.createWidget({
        widgetType: 'checkout',
        eventId: '244595430517',
        modal: true,
        modalTriggerElementId: 'eventbrite-widget-modal-trigger-244595430517',
        onOrderComplete: exampleCallback
    });
</script>

button.PNG

Link to comment
  • Replies 3
  • Views 409
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 2 months later...
On 3/6/2022 at 5:32 AM, tuanphan said:

Add to Design > Custom CSS

button[id*="eventbrite"] {
    box-shadow: none !important;
    border: none !important;
}

 

I'm trying to use this code on my site for the same issue (not eventbrite) and although I added the button ID, it still isn't dropping the shadows or borders. any ideas?

my code:

<a href="https://compelcommunitychurch.churchcenter.com/people/forms/391625" data-open-in-church-center-modal="true">
<button class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element"
        type="button">
    SIGN UP HERE
</button>
</a>

Edited by hrobb
needed to add more info
Link to comment
13 hours ago, hrobb said:

I'm trying to use this code on my site for the same issue (not eventbrite) and although I added the button ID, it still isn't dropping the shadows or borders. any ideas?

my code:

<a href="https://compelcommunitychurch.churchcenter.com/people/forms/391625" data-open-in-church-center-modal="true">
<button class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element"
        type="button">
    SIGN UP HERE
</button>
</a>

Try this code

a[href*="churchcenter"] button {
    box-shadow: none !important;
    border: none !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.