Theme conflict

Hey Mallorykite2014!

Thanks for getting a hold of us. I totally understand wanting to avoid any potential CSS conflicts between your site and the plugin, and we’re happy to help.

Those CSS classes mentioned above should do the trick when it comes to customizing the CSS for the plugin. We’ll just want to apply them within your theme’s style.css file. To reach that from your WordPress dashboard, click Appearance>Editor, locate “Styles,” and select the style.css file.

We’d also be happy to check-out the plugin, to see how it’s interacting with your site. If you could reactive it, or let us know the URL of the page where it would be located, we’d be happy to take a look! That should give us a better idea of how it’s interacting with your site’s CSS.

-Elliot

Hey Mallory!
It’s good to hear from you again 🙂

We would indeed want to apply those changes directly to your theme’s style.css file. That little CSS Cheatsheet should provide a list of the Classes we could directly change for the plugin, so entering them there (along with the associated declaration) should allow for some pretty fun customization.

So, for example, if we wanted to narrow the width of the main container for the plugin, we could use the following:

.mc_form_inside {width:75%;}

Applying that line of code would then lead to the content in that plugin being represented at 75% the default width. We can make several similarly helpful changes to the plugin through the use of some other rules.

All that said, let us know if you’d have any questions, and we’ll be very happy to help.
-Elliot

Hey Mallory!

It’s good to hear from you again.

-To change that button color, we’ll want to use the #mc_signup_submit id from our cheat sheet. So, for example, if we want to set the color of the button to red, we could use the following rule: #mc_signup_submit {background:red;}
As for the input fields, those will actually come from the .mc_input class. To get that changed to blue, we write .mc_input {background: blue;}
-With this, we’ll actually want to go ahead and try to override the theme’s existing CSS, since it would appear to be conflicting with the plugin. A good way to do that will be through the use of the style override technique. Just apply the rule you’d like to use, and place !important after the value, but before the semicolon. So, for example, using .mc_input {background: blue !important;} will override your themes existing CSS to ensure the background is blue.
-That’s something we can actually change by setting the visibility of that text to hidden, like with the following rule: #mc-indicates-required {visibility:hidden;}
-We can restyle that little message with the .mc_success_msg selector. If we wanted to change it to green, we could write .mc_success_msg {color:green;}

Let us know if there are any other questions! 🙂

-Elliot

Hi Mallory,

Thanks for writing back. The text that appears in input elements is called the placeholder. Those placeholders are brought in from the default merge tag value for the field. This guide from the MailChimp knowledge base can help with adding in a default merge value for fields:

Set Default Merge Values for a List: http://eepurl.com/hcDC

Once the default merge value is updated, update the fields by clicking the ‘update list’ button in the plugin settings.

The height and border of all input elements can be styled by targeting the .mc_input class. For example, if you wanted the height to be 40px and a black border this css would be added.

#mc_signup .mc_input {
    height: 50px;
    border: 2px solid black;
}

Here are a couple great resources that can help with styling input elements:

http://techstream.org/Web-Design/CSS-for-Form-Elements
http://www.webstuffshare.com/2010/04/stylize-input-element-using-css3/

To give some background, setting visibility: hidden; on the #mc-indicates-required id would make it invisible, but it would still affect the layout. Setting it to display: none; would completely remove it from the layout. So editing your css to #mc-indicates-required {display: none;} would remove most of that space. The submit button would still have some top margin which can be modified by targeting the #mc_signup_submit id.

#mc_signup #mc_signup_submit {
margin-top: 0;
}

Let us know if you have any other questions.

-mc_d

Hey Mallory!

We appreciate the kind words. And you rock!!

Have an awesome weekend, and feel free to drop in whenever you have questions 🙂

-Elliot