Jump to content

Mailerlite integration and newsletter signup block

Go to solution Solved by tuanphan,

Recommended Posts

Posted

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!

Posted

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?

image.thumb.png.97ce5e81164a7f3e5f71f4b1ae618981.png

 

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

Posted
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?

image.thumb.png.97ce5e81164a7f3e5f71f4b1ae618981.png

 

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

Posted
3 hours ago, tuanphan said:

You can use this to Website Tools > Custom CSS

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

image.thumb.png.5600fbc67c1ecc9cd5079033bfa0022b.png

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!

Posted
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?

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

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

You can use this CSS code under

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

 

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

  • 1 month later...
Posted
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!

Posted
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;
}

 

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

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

  • Solution
Posted

To make transparent on Other Pages, use this code

body:not(.homepage) .ml-embedded div {
    background-color: transparent !important;
}

To make background on homepage only, use this code

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

 

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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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