Guest Posted April 30, 2020 Share Posted April 30, 2020 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; } Link to comment
Bill_Judd Posted May 18, 2020 Share Posted May 18, 2020 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 Link to comment
meltyogastudio Posted May 19, 2020 Share Posted May 19, 2020 @tuanphan Do you know how to integrate a Mindybody class schedule to be on a squarespace page? Link to comment
tuanphan Posted May 20, 2020 Share Posted May 20, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Bill_Judd Posted May 20, 2020 Share Posted May 20, 2020 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? Link to comment
Bill_Judd Posted May 20, 2020 Share Posted May 20, 2020 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" /> Link to comment
tuanphan Posted May 21, 2020 Share Posted May 21, 2020 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kristin.creative Posted May 26, 2020 Share Posted May 26, 2020 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{ } Link to comment
alchemyofmovement Posted September 27, 2021 Share Posted September 27, 2021 (edited) 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; } Edited September 27, 2021 by alchemyofmovement tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment