Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 7, 2024 at 1:25 pm #1466440
    rosalewis

    Hello,

    I’ve been trying to change the subscribe button for the mailerlite form I have on my website, but it’s not working. Do you have any suggestions?

    It’s on the homepage, created using the Mailerlite plugin.

    Another option is that I’ve tried to make one using the Mailerlite HTML form builder (on the test homepapge), but this adds extra padding that I can’t get rid of.

    Thanks,
    Rosa

    September 7, 2024 at 7:05 pm #1466457
    Rikard

    Hey rosalewis,

    What exactly are you looking to change? If you have a screenshot highlighting your intentions, then please share it with us.

    Best regards,
    Rikard

    September 7, 2024 at 7:21 pm #1466458
    rosalewis

    Hi Rikard,

    I’d like to change background colour, font colour, shape, border etc.

    More like a standard Enfold button, something like the button at the bottom of the test page.

    I can edit the exact details of the CSS but I’m having trouble getting the CSS to work i.e. anything I add isn’t being picked up by the code.

    Thanks,
    Rosa

    September 8, 2024 at 10:04 am #1466472
    Rikard

    Hi,

    Thanks for the clarification. This is what is currently applying to that button:

    #mlb2-17812585.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  background-color: #1c3052 !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #ffffff !important;
  cursor: pointer;
  font-family: 'Nunito', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 21px !important;
  height: auto;
  padding: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

    As you can see, the !important statement is added to all the attributes, so I’m not sure if you can override them. You might want to reach out to the plugin developers for further help if you can’t get your CSS to work.

    Best regards,
    Rikard

    September 8, 2024 at 6:16 pm #1466485
    rosalewis

    Hello,

    Yes, sorry I was trying to change the button on this page:

    Home

    Or alternatively I could remove the extra padding/ space of the form on this page:

    Test copy of home

    Is either of those possible or does it have the same problem?

    Thanks,
    Rosa

    September 8, 2024 at 6:27 pm #1466487
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    .mailerlite-subscribe-button-container .mailerlite-subscribe-submit {
  background-color: red;
  padding: 20px;
  color: white;
}

    Best regards,
    Rikard

    September 8, 2024 at 6:43 pm #1466488
    rosalewis

    Thanks. It works on mobile, but not on desktop?

    September 9, 2024 at 4:41 am #1466502
    Ismael

    Hi,

    Thank you for the update.

    Please try to add this css code to move the submit button upwards and remove the extra space.

    .ml-block-form .ml-form-embedSubmit {
    top: -50px;
    position: relative;
}

    Best regards,
    Ismael

    September 9, 2024 at 10:49 pm #1466574
    rosalewis

    Managed to sort it out. Thanks for your help

    September 10, 2024 at 5:08 am #1466591
    Ismael

    Hi,

    Great! Glad to know that this has been resolved. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Trying to change Mailerlite button style’ is closed to new replies.