Mindbody widget customization on 7.1

Site URL: http://www.klasikfit.com

I am losing my mind trying to customize Mindbody healcode links on a customer's website. I've injected the code into the code blocks, but cannot for the life of me get the CSS to style the code the way I want. Here's the code I'm using, and it's not working on 7.1:

2 hours ago, daringcreativeco said:

Site URL: http://www.klasikfit.com

I am losing my mind trying to customize Mindbody healcode links on a customer's website. I've injected the code into the code blocks, but cannot for the life of me get the CSS to style the code the way I want. Here's the code I'm using, and it's not working on 7.1:

a.healcode-contract-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;

}

The following CSS is working, but it's impacting all code blocks overall (and that's not my goal; my goal is to target each code block individually OR target each Mindbody healcode link), and it's making the button align to the left of the screen: 

.sqs-block-code
{
text-align: center;
font-family: Avenir Next;
background-color: white !important;
color: #2FC7F9;
font-size: 15px;
font-weight: 700;
margin: auto;
border-radius: 3px; 
padding-top: 10px; 
padding-bottom: 10px; 
padding-right: 25px;
padding-left: 25px; 
text-transform: uppercase; 
letter-spacing: 1.3px; 
display: inline-block;
}

 

There's hardly any resources out there for coding Mindbody widgets, so I am praying someone can help here. Thanks in advance!

You can identify the block id using this tool

Squarespace ID Finder - Chrome Web Store (google.com)

8 hours ago, daringcreativeco said:

Site URL: http://www.klasikfit.com

I am losing my mind trying to customize Mindbody healcode links on a customer's website. I've injected the code into the code blocks, but cannot for the life of me get the CSS to style the code the way I want. Here's the code I'm using, and it's not working on 7.1:

a.healcode-contract-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;

}

The following CSS is working, but it's impacting all code blocks overall (and that's not my goal; my goal is to target each code block individually OR target each Mindbody healcode link), and it's making the button align to the left of the screen: 

.sqs-block-code
{
text-align: center;
font-family: Avenir Next;
background-color: white !important;
color: #2FC7F9;
font-size: 15px;
font-weight: 700;
margin: auto;
border-radius: 3px; 
padding-top: 10px; 
padding-bottom: 10px; 
padding-right: 25px;
padding-left: 25px; 
text-transform: uppercase; 
letter-spacing: 1.3px; 
display: inline-block;
}

 

There's hardly any resources out there for coding Mindbody widgets, so I am praying someone can help here. Thanks in advance!

replace .sqs-block-code with .code-block-id

use above tool to find block id.

5 hours ago, tuanphan said:

replace .sqs-block-code with .code-block-id

use above tool to find block id.

When I use .code-block-id nothing happens. It will only update with sqs.block-code. 

I have even tried it with the block ID number but it's still not working. This is what I have now and it's not impacting the design the way I need it to:

#block-yui_3_17_2_1_1620753293385_10282
.sqs-block-code
{
text-align: center !important;
font-family: Avenir Next;
background-color: white !important;
color: #2FC7F9;
font-size: 15px;
font-weight: 700;
margin: auto;
border-radius: 3px; 
padding-top: 10px; 
padding-bottom: 10px; 
padding-right: 25px;
padding-left: 25px;
letter-spacing: 1.3px; 
display: inline-block;
}

The button still isn't centered on the page. I have tried wrapping the code in <center></center>, and that doesn't work either.

This is the page: https://www.klasikfit.com/memberportal

Any other thoughts?

56 minutes ago, daringcreativeco said:

When I use .code-block-id nothing happens. It will only update with sqs.block-code. 

I have even tried it with the block ID number but it's still not working. This is what I have now and it's not impacting the design the way I need it to:

#block-yui_3_17_2_1_1620753293385_10282
.sqs-block-code
{
text-align: center !important;
font-family: Avenir Next;
background-color: white !important;
color: #2FC7F9;
font-size: 15px;
font-weight: 700;
margin: auto;
border-radius: 3px; 
padding-top: 10px; 
padding-bottom: 10px; 
padding-right: 25px;
padding-left: 25px;
letter-spacing: 1.3px; 
display: inline-block;
}

 

The button still isn't centered on the page. I have tried wrapping the code in <center></center>, and that doesn't work either.

 

This is the page: https://www.klasikfit.com/memberportal

 

Any other thoughts?

Add the code to Design->Custom CSS. not the advanced code injection

#block-yui_3_17_2_1_1620753293385_10282 {
text-align: center !important;
font-family: Avenir Next;
background-color: white !important;
color: #2FC7F9;
font-size: 15px;
font-weight: 700;
margin: auto;
border-radius: 3px; 
padding-top: 10px; 
padding-bottom: 10px; 
padding-right: 25px;
padding-left: 25px;
letter-spacing: 1.3px; 
display: inline-block;
}

31 minutes ago, bangank36 said:

Add the code to Design->Custom CSS. not the advanced code injection

#block-yui_3_17_2_1_1620753293385_10282 {
text-align: center !important;
font-family: Avenir Next;
background-color: white !important;
color: #2FC7F9;
font-size: 15px;
font-weight: 700;
margin: auto;
border-radius: 3px; 
padding-top: 10px; 
padding-bottom: 10px; 
padding-right: 25px;
padding-left: 25px;
letter-spacing: 1.3px; 
display: inline-block;
}

 

Thank you - removed the .sqs-block-code but it's still aligning to the left of the screen. 

41 minutes ago, bangank36 said:

Add the code to Design->Custom CSS. not the advanced code injection

#block-yui_3_17_2_1_1620753293385_10282 {
text-align: center !important;
font-family: Avenir Next;
background-color: white !important;
color: #2FC7F9;
font-size: 15px;
font-weight: 700;
margin: auto;
border-radius: 3px; 
padding-top: 10px; 
padding-bottom: 10px; 
padding-right: 25px;
padding-left: 25px;
letter-spacing: 1.3px; 
display: inline-block;
}

 

And I have been putting everything into Custom CSS, not advanced code injection. 

28 minutes ago, daringcreativeco said:

And I have been putting everything into Custom CSS, not advanced code injection. 

We still see the code in the page content, make sure to remove it form page injection as well

About the button, could you remove the space on the left, make sure the code block full width and update this snippet?

#block-yui_3_17_2_1_1620753293385_10282 {
    margin: 0 auto;
    display: block !important;
    max-width: 200px;
    text-align: center !important;
    font-family: Avenir Next;
    background-color: #fff !important;
    color: #2fc7f9;
    font-size: 15px;
    font-weight: 700;
    margin-left: auto;
    margin-right: auto;
    border-radius: 3px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 25px;
    padding-left: 25px;
    letter-spacing: 1px;
    display: inline-block;
}

8 minutes ago, bangank36 said:

We still see the code in the page content, make sure to remove it form page injection as well

About the button, could you remove the space on the left, make sure the code block full width and update this snippet?

#block-yui_3_17_2_1_1620753293385_10282 {
    margin: 0 auto;
    display: block !important;
    max-width: 200px;
    text-align: center !important;
    font-family: Avenir Next;
    background-color: #fff !important;
    color: #2fc7f9;
    font-size: 15px;
    font-weight: 700;
    margin-left: auto;
    margin-right: auto;
    border-radius: 3px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 25px;
    padding-left: 25px;
    letter-spacing: 1px;
    display: inline-block;
}

That worked! Thank you so much!!!!!!!!! 

Hi @daringcreativeco I see some problems. Do you want to fix these?

Site URL – https://www.klasikfit.com/

1. (Mobile-Homepage) Reduce white space?

2. (Mobile-Footer) Center footer text/links?

3. (Tablet-Header) Move button up a bit?

4. (Tablet-Partnerships)

Hi @tuanphan. Sorry about the delay, I didn't get notified about your post. Yes! I would love to fix all of those issues. Possible with CSS?

12 hours ago, daringcreativeco said:

Hi @tuanphan. Sorry about the delay, I didn't get notified about your post. Yes! I would love to fix all of those issues. Possible with CSS?

Q1. With white spacing, you can remove space inside image with a software, eg: Photoshop, AI... or crop in Squarespace.

Q2, 3, 4. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* center footer */
div#block-5fd55976226e9048fa9f164c * {
    text-align: center;
}
}
/* tablet */
@media screen and (min-width:768px) {
/* menu button */
.header-menu-cta {
    position: relative;
    top: -50px;
}
/* partnerships */
div#block-66de3c22647d3f8f9977 h3 {
    white-space: nowrap !important;
}
}

On 6/12/2021 at 3:42 AM, tuanphan said:

Q1. With white spacing, you can remove space inside image with a software, eg: Photoshop, AI... or crop in Squarespace.

 

Q2, 3, 4. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* center footer */
div#block-5fd55976226e9048fa9f164c * {
    text-align: center;
}
}
/* tablet */
@media screen and (min-width:768px) {
/* menu button */
.header-menu-cta {
    position: relative;
    top: -50px;
}
/* partnerships */
div#block-66de3c22647d3f8f9977 h3 {
    white-space: nowrap !important;
}
}

 

Thank you so much!