I should have added the site on which the plug-in is installed:
http://jerilynmarler.com
Home page, right side
Thanks!
Hey there!
It looks like you’ll want to turn off the custom styling in the plugin’s settings:
Screenshot — http://cl.ly/3z0F1a2B1E1U3Q371h2z
That should disable the styling there and help avoid any conflicts!
Let us know if we can help with anything else. 🙂
Cheers
Thanks for the quick reply! I’ve turned off custom styling. That strips all formatting from the plug-in. The CSS code still has no effect. 🙁
Whoops!
Sorry about that. Looks like I missed a couple of syntax errors with the CSS.
For the submit button, it looks like it’s missing the hash/pound sign, “#”, before the color code:
#mc_signup_submit.button {
background-color: #fbe05e;
}
For the custom border, you’ll need to have a period before the class instead of the hash/pound sign:
.mc_custom_border_hdr {
background-color: #472E5E;
border-color: #FFFFFF;
border-style: solid;
border-width: 3px;
color: #472E5E;
font-size: 1.2em;
padding: 5px 10px;
width: 95%;
}
And then, for input fields, looks like you’ll need a space between the id and the class:
#mc_signup_form .mc_input {
width: 95%;
}
That got my form working well! You should also be able to turn back on the styling in the “Settings” menu.
Give us a shout if that is still giving you fits!
Cheers
If I could hug you right now, I would! It all works! Thank you, thank you for the really fast responses and detailed instructions.
You totally rock. 🙂
Whoops. I hugged too soon. (grin)
With the styling turned on, the text is not wrapping correctly in the custom_border_hdr field.
The right border is missing and the last letter in the word “click” is disappearing. This occurs on both Chrome and Firefox.
Nothing I do in CSS makes any difference, I assume because the styling settings take priority. But I can’t see a way to make that text behave.
There’s another hug in this for you if you can fix this one. 🙂
Thank you!!!
No worries. If we bail on the “width” attribute for the custom border, it looks like everything works. So, all you’ll need is this for the CSS:
.mc_custom_border_hdr {
background-color: #472E5E;
border-color: #FFFFFF;
border-style: solid;
border-width: 3px;
color: #472E5E;
font-size: 1.2em;
padding: 5px 10px;
}
Which should give you something like this:
Screenshot — http://cl.ly/380a0U2p0t391T3l2A2q
Fingers crossed!
Hmmm. I carefully copied your code block and pasted into styles.css. I also tried creating the code fresh. Nothing I do in the .css makes any difference on the website display.
Maybe I have to turn off the styling settings in the plug-in and control everything in css. In which case I’d like to know how to have the blue background for the portion that includes the typing fields.
Hey again!
It looks like that width attribute is still in the CSS for the site:
Screenshot — http://cl.ly/1e1x1U1E1P2r0z1K0a0y
Are there any other places where that CSS might be in the file? Just trying to rule out multiple instances of the same styling.
Alternatively, you could also try to set the width to “auto”:
.mc_custom_border_hdr {
background-color: #472E5E;
border-color: #FFFFFF;
border-style: solid;
border-width: 3px;
color: #472E5E;
font-size: 1.2em;
padding: 5px 10px;
width: auto;
}
And that should get it! 😉
Curiouser and curiouser, to quote Alice, because I feel like I’m in Wonderland where nothing makes sense….
The width parameter is not in the css file. This is the code:
/* =MailChimp Signup Form
————————————————————– */
#mc_signup_submit.button {
background-color: #fbe05e;
}
#mc_signup_form .mc_input {
width: 95%;
}
/* Doesn’t work as long as styling is turned on within the plugin
*/
.mc_custom_border_hdr {
background-color: #472E5E;
border-color: #472E5E;
border-style: solid;
border-width: 1px;
color: #444444;
font-size: 1.2em;
padding: 5px 10px;
}
I’ve searched the css for any other instances of #mc or .mc. None exist. The only other width values are specific to other elements of the theme.
Although the width parameter is NOT in the file (I’ve had my geek husband validate this because I’m starting to think I’m crazy), when I use FireBug, the width value is present. Nothing changes when I add width: auto;
Whatcha think?
More information. I scrolled down within the FireBug window and discovered a second instance of the code. MY version of the code is crossed through (it does not have a width value) and it is being overwritten by the default code from an external source:
.mc_custom_border_hdr ?mcsf_…r=3.3.2 (line 21)
{
background-color: #FFFFFF;
border-color: #E3E3E3;
border-style: solid;
border-width: 1px;
color: #472E5E;
font-size: 1.2em;
padding: 5px 10px;
width: 100%;
}
.mc_custom_border_hdr style.css (line 81)
{
background-color: #472E5E; <strikethrough>
border-color: #472E5E; <strikethrough>
border-style: solid; <strikethrough>
border-width: 1px; <strikethrough>
color: #444444; <strikethrough>
font-size: 1.2em; <strikethrough>
padding: 5px 10px; <strikethrough>
}
Ack! That’s embarrassing. I totally missed that in the Developer Tools.
That’s the custom styling by the plugin that’s overriding your “style.css” file. So, if you want to turn that off, you can use this CSS to re-add that blue border around the main part of your form:
#mc_signup_form {
padding: 5px;
border-width: 1px;
border-style: solid;
border-color: #C4D3EA;
color: #555;
background-color: #E8F7FA;
}
Apologies for the confusion, previously. But, just to recap:
– Disable the custom styling
– Add this CSS to get the blue body for the form
– You’re ready to rock
Yay!!! We have lift-off! I had to switch the foreground and background colors within your code for the border_hdr, but that was easy-peasy. Now it’s a thing of beauty and a joy to behold. I’m doing a happy dance! Thanks very, very much.
Haha! Glad to hear it!
Thanks for hanging with me when my brain went into CSS-shutdown mode… 😉
