Mailerlite integration and newsletter signup block

Hi!

I'm not sure how to even articulate my question, but I'll try.

I use Mailerlite to collect emails addresses via my website. When I set this up a while ago, there was no integration available for Squarespace (and I have no recollection of how I set it up), but now there is an integration available. My setup has worked just fine, but I thought I might be able to simplify it by using the new integration. 

However, when I went into Code Injection, I saw that the code for the new integration was already there. I don't know how it got there. Is that something that is updated automatically???

I'm wondering if anyone could tell me what's happening on my site as I'm trying to decide if it would be best to change or update anything or not in order to optimize the newsletter signup. I see that I'm using a line of code, but I don't understand if this is how it would be done with the integration, too, or if it would be different then.

The only thing that I don't like now is the background color. On my homepage, I had to shift things around and ended up with a blue background for the newsletter block instead of white/blank. However, the sign up boxes appear white and I don't know how to make them blue. Can someone tell me how to change that?

Many thanks!

Can you share link to hompage?

37 minutes ago, tuanphan said:

Can you share link to hompage?

Hi! I thought I did, thank you for replying!

https://kristinkuehn.com

To make Mailerlite appears on your site you will need to use Mailerlite embed code code to Code Injection or Code Block So it is normal for code to be available in Code Injection.

You want to make this white to blue same as section color?

On 8/24/2024 at 11:38 AM, tuanphan said:

To make Mailerlite appears on your site you will need to use Mailerlite embed code code to Code Injection or Code Block So it is normal for code to be available in Code Injection.

You want to make this white to blue same as section color?

 

Yes, I'd like to make the white around the first name and email address fields blue.

On 8/27/2024 at 12:51 AM, Aurora said:

Yes, I'd like to make the white around the first name and email address fields blue.

You can use this to Website Tools > Custom CSS

.ml-embedded div {
    background-color: #b5d1e9 !important;
}

3 hours ago, tuanphan said:

You can use this to Website Tools > Custom CSS

.ml-embedded div {
    background-color: #b5d1e9 !important;
}

Thank you so much for your help! It works, however, now the blue box also shows up on my blog pages, where I want them to remain white. Is this something that can be adjusted?

Many thanks!

On 8/30/2024 at 6:37 PM, Aurora said:

Thank you so much for your help! It works, however, now the blue box also shows up on my blog pages, where I want them to remain white. Is this something that can be adjusted?

Many thanks!

Can you share link to a blog page?

On 9/2/2024 at 11:33 AM, tuanphan said:

Can you share link to a blog page?

@tuanphan Of course, thank you! 

https://www.kristinkuehn.com/writing/summer-cross-quarter-2024

On 9/2/2024 at 6:29 PM, Aurora said:

@tuanphan Of course, thank you! 

https://www.kristinkuehn.com/writing/summer-cross-quarter-2024

You can use this CSS code under

body[class*="type-blog"].view-item .ml-embedded div {
    background-color: #fff !important;
}

On 9/7/2024 at 3:20 AM, tuanphan said:

You can use this CSS code under

body[class*="type-blog"].view-item .ml-embedded div {
    background-color: #fff !important;
}

 

Hi @tuanphan, you helped me change the background color for opt-in fields. But now I have a problem. Are you able to assist?

You gave me code to change it from white to blue on my homepage, but then it showed up blue on my blog page (where I didn't want it blue), so you gave me code to change that to white.

However, I now have another page with an opt-in, and again the background is blue where I want it white. As this may happen again in the future, I'm wondering if it's possible to change the code, so that I have only one code that make the background blue on the homepage, and leaves it white everywhere else, instead of changing it to blue everywhere, and then having to change it to white everywhere else other than the homepage. Does that make sense?

Many thanks!

On 10/14/2024 at 8:37 PM, Aurora said:

Hi @tuanphan, you helped me change the background color for opt-in fields. But now I have a problem. Are you able to assist?

You gave me code to change it from white to blue on my homepage, but then it showed up blue on my blog page (where I didn't want it blue), so you gave me code to change that to white.

However, I now have another page with an opt-in, and again the background is blue where I want it white. As this may happen again in the future, I'm wondering if it's possible to change the code, so that I have only one code that make the background blue on the homepage, and leaves it white everywhere else, instead of changing it to blue everywhere, and then having to change it to white everywhere else other than the homepage. Does that make sense?

Many thanks!

You can use this new code 

/* white on other pages */
body:not(.homepage) .ml-embedded div {
    background-color: #fff !important;
}

2 hours ago, tuanphan said:

You can use this new code 

/* white on other pages */
body:not(.homepage) .ml-embedded div {
    background-color: #fff !important;
}

 

@tuanphan thank you!

To clarify, would I use the code above in addition to the following one:

.ml-embedded div {
    background-color: #b5d1e9 !important;
}

As of now, I use the following code on my website:

//Newsletter signup blue background behind name and email fields
.ml-embedded div {
    background-color: #b5d1e9 !important;
}

// Newsletter signup blue background behind name and email fields only on homepage
body[class*="type-blog"].view-item .ml-embedded div {
    background-color: #fff !important;
}

Would I delete the second part? And replace it with the one you just gave me?

To reiterate: I want a blue background only on my homepage, and have no backgound color anywhere else on my website.

Another thought: It looks like you're coding for a white background, but I'm wondering if it's possible to make the background transparent? That way, it would pick up whatever background color from the section. Is that possible?

Many thanks!