Editing custom mailchimp form

  • Resolved James_Borrell

    (@james_borrell)


    10 years, 3 months ago

    Hi All,

    I’ve been fiddling around with some embedded mailchimp code, I’ve learned a bit about CSS/HTML, but I wonder if someone could point me in the right direction.

    I’d like to edit the ‘subscribe button’. It comes up as a pretty boring grey button.

    http://www.jamesborrell.com/
    (right hand side sidebar)

    Reading some threads, I’ve tried this code in the custom css page..

    #mc_signup_submit.button {
background-color: purple;
color: white;}

    But it seems to make no different. As far as I can see, there’s nothing in the code on the page that controls the colour of the button, so it must be controlled somewhere else?

    Suggestions welcomed…

    Thanks!

    James

Viewing 4 replies - 1 through 4 (of 4 total)
  • WPyogi

    (@wpyogi)

    10 years, 3 months ago

    Try using a browser tool like Firebug – it shows you all the CSS for any element and where that code is coming from. Once you know the code, COPY it to the custom CSS and change it there. Looks like it’s this:

    #mc-embedded-subscribe {
    background-color: #FF0000;
}

    Thread Starter James_Borrell

    (@james_borrell)

    10 years, 3 months ago

    Hi WPyogi,

    Thanks for this, that works perfectly. I really appreciate it.

    I have tried looking for the code using firebug, but I just can’t seem to see the section you have posted? I’d really like to understand where I’m going wrong so that I can do this myself next time…

    If I right click on the button, and select ‘inspect with firebug’

    I get the following code highlighted, which is HTML, not CSS I believe:

    <input id="mc-embedded-subscribe" class="button" type="submit" name="subscribe" value="Subscribe">

    On the right I get this:

    #mc-embedded-subscribe {
    clear: both;
    display: block;
    margin: 1em 0 1em 5%;
    width: auto;

    I know both are providing info on the structure and style, but I’m not sure where to find the colour element that you posted?

    Many thanks,

    James

    WPyogi

    (@wpyogi)

    10 years, 3 months ago

    What you are looking for are the CSS “selectors” – this part – “#mc-embedded-subscribe” – I copied that part and then added the color.

    Thread Starter James_Borrell

    (@james_borrell)

    10 years, 3 months ago

    Thanks WPyogi, I’ll look at that.

    Cheers,

    JB

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Editing custom mailchimp form’ is closed to new replies.