Jump to content

Mind Body Widget Customization

By GriffitoLoz, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

GriffitoLoz Level 3

GriffitoLoz

Posted
Posted (edited)

Site URL: https://www.bellevuepilates.com/new-clients-1

Hi all, I need to center align--in the embed text box-- the text that gets displayed from a Mind Body Healcode. I want to center align "Buy Now" under each square image, and also underline it and make it this color #84b0d7 (to look like a hyperlink) .

Here is the code for the first "Buy Now" under Intro to Beginner Semi Private, as an example:

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script><healcode-widget data-version="0.2" data-link-class="healcode-pricing-option-text-link" data-site-id="70232" data-mb-site-id="12994" data-service-id="1276" data-bw-identity-site="false" data-type="pricing-link" data-inner-html="Buy Now" />

This produces the text "Buy Now" but it's not centered in the embed code box. (See screenshot below). Page is https://www.bellevuepilates.com/new-clients-1

image.png.adad6f9ca3d44f18dcff7084b2d46dc4.png

Edited by GriffitoLoz
Clarify need.
  • Replies 2
  • Views 426
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

  • Solution
tuanphan Level 18

tuanphan

Posted
  • Solution
Posted

Use this to Website Tools > Custom CSS 

div.embed-block:has(healcode-widget) {
    text-align: center;
}
div.embed-block:has(healcode-widget) a {
    border-bottom: 2px solid #84b0d7;
}

image.thumb.png.9d712d29ef3e55840a349f00894cc852.png

If you want run on mobile only, use this new code 

@media screen and (max-width:767px) {
	div.embed-block:has(healcode-widget) {
    text-align: center;
}
div.embed-block:has(healcode-widget) a {
    border-bottom: 2px solid #84b0d7;
}
}

 

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!)

GriffitoLoz Level 3

GriffitoLoz

Posted
  • Author
Posted

Beautiful, that worked, except now there are two horizontal blue lines further up the page as well. Those two buttons are also Mind Body Healcode widgets and I think it's underlining them as well?:

image.png.fbf3c2ece16a74fd4374eebd1fd48042.png

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources