CSS with "mailchimp for wordpress" plugin Shortcode

[Lisa]

1. http://thoseunderdogs.de/category/updates
2. Firefox

Hey guys,

does anyone know how to communicate with the mailchimp short code html inbox elements? I'm trying to change the design since 2 days now and I'm lost.

I changed the raw code and gave IDs to each box so I can change the look of each of them in CSS but I can't get the placeholder text and the grey outlines to change.
Everything I'm doing with CSS seems to be additional and not changing the current design. Also I'm able to change the width but not the height of each box.
And what I can't change at all, is the SUBSCRIBE button.

EXAMPLE HTML

<div id="input">
<p id="feld1">
<input type="email" name="EMAIL" placeholder="ENTER YOUR EMAIL" required="">
</p>
<p id="feld2">
<input type="text" name="FNAME" placeholder="FIRST NAME">
</p>
<p id="feld3">
<input type="text" name="LNAME" placeholder="LAST NAME">
</p>
<p id="feld4">
<input type="text" name="MMERGE6" placeholder="COMPANY">
</p>
</div>

<p id="feld5">
<input type="submit" value="SUBSCRIBE">
</p>

EXAMPLE CSS**

.mc4wp-form-fields {
position: fixed;
top: 500px;
z-index: 1;
left: 60px;
width: 12%;
height:3px;
}

#feld1 {
border: 1px solid;
border-color: #00ff00;
margin: 5px;
border-radius: 3px;
}

#feld2 {
border: 1px solid;
border-color: #00ff00;
margin: 5px;
border-radius: 3px;
}

#feld3 {
border: 1px solid;
border-color: #00ff00;
margin: 5px;
border-radius: 3px;
}

#feld4 {
border: 1px solid;
border-color: #00ff00;
margin: 5px;
border-radius: 3px;
}

#feld5 {
margin: 5px;
background-color:#00ff00;
}

Is this because of the short code? Is there anything integrated behind it, so I just can't change the design, so I have to buy the pro version?!
Or am I just missing something?

I hope anyone is experienced with this already.

Thanks,
Lisa
x

[mariusjopen]

Dear @Lisa
because I don't see the code it is difficult to say what is wrong.

But you can use the !important feature to overwrite the normal settings from Mailchimp.

https://stackoverflow.com/questions/9245353/what-does-important-mean-in-css

Let mw know if that worked.

Best!

Marius

[Lisa]

Hey @mariusjopen ,

that's not working.
The problem is, that I'm obviously not "talking" to the right elements.
But you can see the code now. Maybe you know whats wrong then.

Thank you
x

[mariusjopen]

Dear @Lisa

but if you add this to your CUSTOM CSS code it works. At least for me:

input[type="text"] {
    width: 200px !important;
    padding: 10px !important;
    border: 2px solid red !important;
    background: yellow !important;
}

Did I misunderstand your question?

Best!

Marius

[Lisa]

@mariusjopen Thanks Marius. Part of it works.
What I still can't do, is reduce the height.
It's still not reacting and it doesn't matter where I include "height".
Also the integrated CSS from mailchimp for the submit button, is marked with !important. So I cant overwrite that one. I'd love to change the background color and get rid of the dark border-color. Any other ideas?

thanks
x

[Lisa]

@mariusjopen okay, got it. I had to code line-height, min-height and max-height. :)

[Lisa]

@mariusjopen the only thing is now still the background color of the submit button. Since the important tag is in the main CSS code already and I can'T figure out how to overwrite it. I'm happy if you could help me with that as well.

many thanks
x

[mariusjopen]

Dear @Lisa
again the website is blank :-)

But you just need to really, really search. I would do the same. Somewhere is a piece of CSS which you can overwrite.
Also google for change background colour for submit button

Best!

Marius