Jump to content

Code Block centering for 3rd party widget

Recommended Posts

Hi, 

I'm new to this forum. Our church has changed our 3rd party donation "hosting" platform. (It is now thru Aplos if that helps anyone.) 

The widget code they gave us is this: 

<!-- Example button code using button style 3c --> <link rel="stylesheet" href="https://cdn.aplos.com/css/styles/2.21.3/donation-resources.css"> <button class="aplos-donation-button button3c" data-widget-id="8E6E7677808246DDC92944A5A6C15DBE">Donate</button> <script type="text/javascript" src="https://cdn.aplos.com/widgets/donations/1.0.2/donations.min.js"></script> 

 

I need to center it on the home (or any) page please. Our previous company allowed us to attach to all pages, always in the same spot AND you could begin donation on one of our pages - navigate wherever you'd like - and then finish when ready. It was awesome. 

 

How can I adjust this new widget? Thank you for your help!

Link to comment
9 minutes ago, HereAndThere said:

Hi, 

I'm new to this forum. Our church has changed our 3rd party donation "hosting" platform. (It is now thru Aplos if that helps anyone.) 

The widget code they gave us is this: 

<!-- Example button code using button style 3c --> <link rel="stylesheet" href="https://cdn.aplos.com/css/styles/2.21.3/donation-resources.css"> <button class="aplos-donation-button button3c" data-widget-id="8E6E7677808246DDC92944A5A6C15DBE">Donate</button> <script type="text/javascript" src="https://cdn.aplos.com/widgets/donations/1.0.2/donations.min.js"></script> 

 

I need to center it on the home (or any) page please. Our previous company allowed us to attach to all pages, always in the same spot AND you could begin donation on one of our pages - navigate wherever you'd like - and then finish when ready. It was awesome. 

 

How can I adjust this new widget? Thank you for your help!

add this to design - custom css may help

.aplos-donation-button {
    margin: 0 auto;
    display: block;
}

image.thumb.png.1e46c6e03197d65792a9adfa7fa7cd75.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
7 hours ago, HereAndThere said:

Thank you for your response! *Where* do I include what you mentioned? At the end of the supplied code? 

yeah, like so

<style>
.aplos-donation-button {
    margin: 0 auto;
    display: block;
}
</style>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.