Site URL: https://www.wonder-puppy.squarespace.com/good-puppy

Mindbody Enrollment Widget (new/current) deployed. The header of the widget is fixed at the top of the page, not in the code block with the rest of the details. Based on another thread it seems Healcode is using a class (header) that Squarespace 7.1 also uses. I've been trying to figure out how to change the class of the enrollment widgets header to display properly in the code box (not sure if this is the correct language, Im brand new to this!)

I've included the code for the enrollment widget and all Custom CSS code on the site

Any help would be  amazing!

Widget Code

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script>

<healcode-widget data-type="enrollments" data-widget-partner="object" data-widget-id="b66765187cd" data-widget-version="0" ></healcode-widget>

Custom CSS

.sqs-block-html a {background-image:none!important}
.header-nav-item a:hover {
     ;font-weight:bold;
  }

/*style "LOGIN | REGISTER" MINDBODY link to look like button*/ a.healcode-login-register-text-link {
color: #fff !important; border: solid 0px #366f82; background: #366f82; border-radius: 3px; padding-top: 10px; padding-bottom: 10px; padding-right: 15px; padding-left: 15px; text-transform: uppercase; letter-spacing: 1.3px; display: inline-block;
}

.header-actions .btn:hover {background-color:#A82947; color:#fff; opacity:1!important}

 /*MULTIPLE COLUMNS ON SCREENS LARGER THAN PHONES*/
@media screen and (min-width: 640px) {
  
 	#block-yui_3_17_2_1_1588029697963_16185 {
    column-count: 4;
    column-gap: 0px;
  }
}

 /* MBO ENROLLMENT WIDGET HEADER CLICKS*/
div.healcode .header {
  pointer-events: auto;
}

/*MBO ENROLLMENTS UNDERWAY DISPLAY*/
div.healcode .healcode-underway { display: none !important; }

Hi Matt

Did you get any answers on this, I am struggle a lot as well with some of the codes for Mindbody.

I have just started using Squarespace, I have used Wix and Cargo for the last ten years and now I am not sure I have done the right move as this section of building seem to be complicated in 7.1 version.

I would love to hear how you are getting on with the Mindbody links, especially their appearance and placements.
All the best 

Bill

@tuanphan Do you know how to integrate a Mindybody class schedule to be on a squarespace page?

14 hours ago, meltyogastudio said:

@tuanphan Do you know how to integrate a Mindybody class schedule to be on a squarespace page?

 

I haven't used Mindybody yet. Can you share all iframe code?

To get your schedule on to your Squarespace page:

1-Go to your Mindbody / Branded web section, create a "schedule" widget (not a link).

2-Deploy it by copy the automatic generated code, then go to your Squarespace page and add a code block which you then paste you generated code.

Its fairly simple and there is videos on Mindbody and YouTube how to do this.

My problem is to position / align code blocks on a Squarespace page as its automatically left align, any ideas?

6 hours ago, tuanphan said:

I haven't used Mindybody yet. Can you share all iframe code?

https://kocombatacademy.squarespace.com/mindbody password: 5454

iframe code:

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script><healcode-widget data-version="0.2" data-link-class="loginRegister" data-site-id="94289" data-mb-site-id="665939" data-type="account-link" data-inner-html="Login | Register"  />

16 hours ago, Bill_Judd said:

https://kocombatacademy.squarespace.com/mindbody password: 5454

iframe code:

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script><healcode-widget data-version="0.2" data-link-class="loginRegister" data-site-id="94289" data-mb-site-id="665939" data-type="account-link" data-inner-html="Login | Register"  />

Add to Home > Design > Custom CSS

[data-section-id="5eb3bb6a92975f0d83c142d3"] .content {
    width: 100% !important;
}
div#block-yui_3_17_2_1_1588837177670_4733 * {
    text-align: center;
}

Hi! I found some answers and help on this website: https://pixalitydesign.com/pixality-blog/mindbody-squarespace

Heres what she helped me do to centre them: 

Sure is! If you add this code into your Custom CSS area, it will center all code blocks on your entire site:
//center code blocks
.sqs-block-code{
text-align: center;
}

Which will work, except it will center all code blocks across your entire site, which may not be what you want. Here's a little video on how to make that only apply to one page: https://www.useloom.com/share/c4e703e195344a6cafffea8863111d1c
...and if using the apply-to-1-page method, you'll want to use this code in the Custom CSS instead and update the collection ID like I mention in the video
//center code block on demo page

collection-597576ead2b85704bb590f7d .sqs-block-code{

}

Hi! I was having the same issue with the Enrollment widget from Mindbody. I did some digging and found this custom code that I just copied and pasted into the "custom css" section in branded web in Mindbody. It seemed to work, hopefully it helps! 

div.healcode .header {
  position: relative!important;
  pointer-events: auto;  
}