Docs

[GhostWhale]

Hi,

I’m no developer but have picked up the basics of CSS whilst building my site using X and your help through this forum.

I’m using “SendInBlue” rather than Mailchimp for my newsletter platform and have installed the SendInBlue plugin. The design of their widget is not in keeping with the rest of my site and I’m trying to adjust the global CSS for the widget using the X custom CSS tool in customiser to change this and i’m clearly doing something wrong so am hoping you can point out my mistake.

Rather than list all the changes I want to make, I’ll use an example of what I’m doing. Once I know what I’m doing wrong will let me make all the other changes I need.

So for the example, I’m trying to change the background colour of the ‘name’ input field in the widget to #123456. The code I’m putting into X’s custom css tool is:

.sib-NAME-area: {
background-color: #123456;
}

[GhostWhale]

This reply has been marked as private.

[Thai]

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

.sib_signup_form input[type="text"],
.sib_signup_form input[type="email"] {
    background-color: #f0f0f0;
    padding: 10px 15px;
}

Hope it helps 🙂

[GhostWhale]

It really does help. Thanks.

The only outstanding thing I can’t figure out is how to adjust the width of the input fields. If you can help with this I’ll be sorted.

Cheers

[Thai]

Hi There,

Please update the previous CSS a bit:

.sib_signup_form input[type="text"], .sib_signup_form input[type="email"] {
    background-color: #f0f0f0;
    padding: 10px 15px;
    border-radius: 0px;
    border-width: 2px !important;
    max-width: 600px !important;
}

Hope it helps 🙂

[GhostWhale]

Yup nailed it.

Thanks

[Joao]

Great to hear it.

Let us know if you need help with anything else.

Joao

[Author]

Posts