Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save oneblackcrayon/4974117 to your computer and use it in GitHub Desktop.
Save oneblackcrayon/4974117 to your computer and use it in GitHub Desktop.
MailChimp Advanced Opt-In Designer Styles Here are all of the styles that I could find for MailChimp Opt-In forms. Your usage may vary.
/*
Here are all of the styles that I could find for MailChimp Opt-In forms.
Your usage may vary.
*/
a:hover, a:active {color:#bb2e02;text-decoration:none}
a:link {color:#9c2703;text-decoration:underline}
a:link, a:active, a:visited, a {color:#18f}
a:visited {color:#791d01;text-decoration:underline}
body {-webkit-text-size-adjust:none;background:#FFF;border-top:10px solid #000;color:#000;font:12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:100%;margin:0;min-width:600px;padding:75px 0 0;text-align:center}
body, #bodyTable, #templateContainer, #templateBody {background-color:#222}
fieldset {background-color:#ddd;border:1px solid #ccc;padding:10px}
h1 {border-bottom:1px solid #000;font-size:28px;margin-bottom:15px;margin-top:0;padding:0}
h2 {color:#666;float:left;font-size:22px;font-weight:400;line-height:28px;margin:0 0 10px}
h3 {margin:0 0 5px;padding:0}
input {-webkit-appearance:none}
input[type=checkbox] {-webkit-appearance:checkbox}
input[type=radio] {-webkit-appearance:radio}
label .asterisk {font-size:30px;position:absolute;right:10px;top:36px}
label {clear:both;color:#18f;display:block;float:none;font-family:Helvetica;font-size:14px;font-weight:700;line-height:150%;margin-top:8px;position:relative;text-align:left;width:auto}
p {line-height:18px;padding:0 0 10px}
select {margin:5px;width:300px}
span.or {display:inline-block;height:32px;line-height:32px;margin:5px 5px 0 0;padding:0 5px}
td {font-size:12px}
textarea {font:12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;}
ul.interestgroup_field {display:block;margin:0;padding:5px}
ul.interestgroup_field input {display:inline!important;width:auto!important}
ul.interestgroup_field label {display:inline;font-weight:400;padding:0 30px 0 3px}
ul.interestgroup_field li, .interestgroup_row {display:block;list-style:none;margin:0;padding:0}
ul.unsub-options {display:block}
ul.unsub-options li {display:block;padding-bottom:5px}
ul.unsub-options li label {display:inline;padding-left:5px}
ul.unsub-options li textarea {background:#fff;border:1px solid #ccc;display:block;height:100px;margin:5px 0;padding:5px;width:350px}
.addressfield .countryfield {display:block;height:45px;position:relative}
.addressfield .countryfield select {left:35%;margin:0;position:absolute;top:10px}
.addressfield .subfield {clear:left}
.addressfield input {float:right;margin:0 9% 0 0;padding:8px 0 2px;width:56%}
.addressfield label {float:left;font-weight:400;text-align:right;width:33%}
.addressfield span {display:block;height:34px}
.alert {background:#e4f3d4;border:2px solid #5ca000;color:#5ca000;font-size:14px;margin:10px 0;padding:10px}
.alert a {color:#5ca000;text-decoration:underline}
.asterisk {color:#ff1818}
.bodyContent {color:#f9f9f9;font-family:Helvetica;font-size:12px;line-height:150%;padding:0}
.button span {border:none;cursor:pointer;display:inline;font-family:Helvetica, Arial, sans-serif;font-size:15px;font-style:normal;font-weight:700;line-height:32px;text-decoration:none}
.button-small {display:inline-block;float:none;font-size:11px!important;height:auto;line-height:18px!important;padding:2px 15px!important}
.button, .button-small {-moz-border-radius:4px;-webkit-border-radius:4px;border:0;border-radius:4px;cursor:pointer;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:15px;font-style:normal;font-weight:700;height:32px;line-height:32px;margin:5px 5px 0 0;padding:0 22px;text-align:center;text-decoration:none;vertical-align:top;white-space:nowrap;width:auto}
.button:hover, .button-small:hover {background-color:#1818ff;color:#fff}
.button:link, .button:active, .button:visited, .button, .button span, .button-small:link, .button-small:active, .button-small:visited, .button-small {background-color:#18F;color:#fff}
.captcha {float:left;height:170px;width:340px}
.clear {clear:both}
.container {-moz-box-shadow:2px 2px 4px rgba(0,0,0,0.1);-webkit-box-shadow:2px 2px 4px rgba(0,0,0,0.1);background-color:#fff;border:1px solid #999;border-color:transparent!important;border-width:0!important;box-shadow:2px 2px 4px rgba(0,0,0,0.1);margin:0;padding:5px 5px 15px;position:relative;text-align:left;width:400px}
.datefield .monthfield input, .datefield .dayfield input {width:30px}
.datefield input, .phonefield-us input {display:inline;letter-spacing:1px;margin:0 2px;padding:5px 0 2px;text-align:center;width:60px}
.datefield input, .phonefield-us input, .addressfield input {border-bottom-style:solid;border-bottom-width:1px;border-color:#222}
.datefield, .phonefield-us {padding:5px}
.error {color:red;font-size:11px;font-weight:700}
.error, .errorText {background-color:#f4bfbf;color:#6b0505;font-size:12px;margin:5px 0 0;padding:5px 10px}
.field-group .feedback br, .datefield label, .phonefield-us label {display:none}
.field-group .feedback div {margin:0!important;padding:0!important}
.field-group {-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#3fffffff')";background:0 rgba(255,255,255,.25));background-color:#F9F9F9;background-image:0 color-stop(1, rgba(255,255,255,.25)));border-color:#222;border-style:solid;border-width:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#3fffffff');float:none;margin:3px 0 15px;padding:5px}
.field-group input {background:none;border:0;display:block;margin:0;padding:5px;width:98%}
.field-group input, .field-group textarea {color:#444;font-family:Helvetica;font-size:16px}
.field-group label {clear:none}
.field-group textarea {background:none;border:none;height:150px;margin:0;overflow:auto;width:525px}
.field-help .help {min-height:16px;text-decoration:none}
.field-help {-moz-border-radius:0;-webkit-border-radius:0;background-color:#dcdcdc;border-radius:0;clear:both;color:#000;display:none;float:none;font-size:12px;font-weight:400;line-height:16px;margin:5px -5px -5px;padding:8px 10px;position:static;width:auto}
.formLabel, .formlabel {font-size:13px}
.formstatus {margin-bottom:10px}
.headerBar {background:none;border:none;padding:0}
.indicates-required {text-align:right}
.indicates-required span {font-size:150%;font-weight:700}
.pagetitle {background-color:#ddd;color:#000;font-size:16px;font-weight:700;padding:8px;text-align:left}
.pageTitle {background-color:#DDD;color:#000;font-size:16px;font-weight:700;padding:8px;text-align:left}
.pagetitlealert {background-color:red;color:#fff;font-size:16px;font-weight:700;padding:8px;text-align:left}
.pageTitleAlert {background-color:red;color:#FFF;font-size:16px;font-weight:700;padding:8px;text-align:left}
.pagetitlesuccess {background-color:#3c0;color:#fff;font-size:16px;font-weight:700;padding:8px;text-align:left}
.pageTitleSuccess {background-color:#3C0;color:#FFF;font-size:16px;font-weight:700;padding:8px;text-align:left}
.phonefield-us .phonearea input, .phonefield-us .phonedetail1 input {width:40px}
.poweredBy {display:block;text-align:left}
.poweredWrapper {margin:0 auto;padding:20px 0;width:560px}
.profile-list {border-top:1px solid #eee;display:block;list-style:none;margin:15px 20px;padding:0}
.profile-list li {border-bottom:1px solid #eee;display:block;margin:0;padding:5px 0}
.radiogroup input, .phonearea input, .addressfield input, .datefield input, .groups input {width:auto}
.rounded6 {-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px}
.small, .datefield .small-meta {font-size:11px}
.tpl-image-content {padding-left:0}
.wrapper {margin:0 auto 10px;text-align:left;width:600px}
#archive-content {background:#FFF;border:1px solid #000;color:#000;font-family:"Helvetica Neue", Helvetica, sans-serif}
#archive-header {background:#FFF;color:#000;margin:0;padding:1em 2em}
#archive-list {border-top:1px solid #eee;display:block;line-height:1.6em;list-style:square;margin:15px 0;padding:0}
#archive-list li {border-bottom:1px solid #eee;display:block;list-style:none;margin:0;padding:6px 10px}
#copyright {color:#999;font-size:.9em}
#footer {border-top:1px solid #000;margin:0 3%;padding:1em 0;text-align:center}
#subscribe-link {margin-top:.3em;text-align:right}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment