Hi i would like to style the signup mail chimp box on my website. Similar to the subscription box in the attached image, but with the colours different. How would i go about this ?
Hi @niallalice,
Thanks for writing in.
Would you mind sharing us your URL so we could know what CSS are we going to share to you so that you could achieve that styling.
Thanks.
Hi there,
That’s possible, let’s do this 
-
Please make sure the margin less option is turned off where the form is, else, the next step will not work.
-
Then add this CSS to your global custom CSS
@media ( min-width: 980px ) {
#x-subscribe-form-3511 {
width: 100% !important;
max-width: 980px !important;
margin: 0 auto;
display: block;
}
#x-subscribe-form-3511 label[for="x_subscribe_form_email"] {
display: none;
}
#x-subscribe-form-3511 fieldset {
width: 50%;
float: left;
}
#x-subscribe-form-3511 [name="x_subscribe_form[submit]"] {
margin-top: 0px;
padding: 0.414em 1.286em 0.652em;
}
}
Hope this helps.
Thank you for the reply.
How would i make sure the margin less option is turned off ?
I had added the script but it didn’t work unfortunately.
Hi There,
Turning Off the Marginless option
Please check your entire custom CSS here first (http://csslint.net) and resolve all found errors and then add the CSS code provided by Rad.
Cheers!
Thank you. Ive turned off the margin less column and tried that page your discussed but i’m not too overly knowledgeable on code, so i cant really work out whats going wrong here.
Hi there,
I have checked the CSS codes in the custom CSS panel and the codes previously suggested didn’t work because there are a lot of CSS syntax error in the current codes that are in there which are also messy.
It is recommended that you keep the codes added in the custom CSS clean to make sure that the codes will work as expected.
You can check this link for CSS reference.
As for the codes in the customizer, please copy the existing code you have as a backup and try to replace it with this:
.x-colophon.top .widget_x_email_form .x-section {
padding: 0;
}
.x-colophon.top .widget_x_email_form fieldset {
display: inline-block;
max-width: 50%;
float: left;
}
.x-colophon.top .widget_x_email_form .x-subscribe-form {
max-width: 100%;
}
.x-colophon.top .widget_x_email_form .x-subscribe-form label {
display: none;
}
.x-colophon.bottom .ubermenu-nav {
text-align: center;
}
.x-colophon.bottom .ubermenu .ubermenu-item {
float: none !important;
}
.x-colophon.bottom .ubermenu .ubermenu-target {
color: #00bef2 !important;
}
.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-social-global,
.x-colophon.bottom .x-nav {
margin: 10px 0;
}
.x-colophon.bottom .x-colophon-content p {
margin: 0
}
.x-navbar {
background-color: white;
}
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: inset 0 4px 0 0 rgb(15, 165, 219)
}
.x-navbar {
opacity: 0;
/* make things invisible upon start */
-webkit-animation: fadeIn ease-in 1;
/* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.x-pricing-column.featured h2 {
background: #BDEDFF;
}
.x-pricing-column.featured h2 {
border: solid 2px #000;
}
.x-price::first-letter {
font-size: 32px !important;
}
.x-text-type {
color: white;
}
.x-text-type .typed-cursor {
color: #43BFC79;
}
/* Footer text */
.x-colophon.bottom .x-colophon-content {
font-size: 11px;
color: blue;
}
.x-colophon.bottom .x-nav li a {
color: blue;
}
.x-logobar-inner {
background: url(url goes here);
background-size: cover;
}
/* for sidebar product categories */
.x-sidebar.right .widget .product-categories li {
display: inline-block;
border: 0;
box-shadow: none;
padding: 5px 10px;
background: #eee;
margin: 5px;
}
.x-sidebar.right .widget .product-categories {
border: 0;
box-shadow: none;
}
.x-sidebar.right .widget .product-categories li a {
border: 0;
font-size: 12px;
}
.woocommerce li.product .entry-header h3 a:hover,
.x-sidebar.right .widget .product-categories li a:hover {
color: #1CA6D9 !important;
}
.archive.woocommerce span.woocommerce-Price-amount.amount {
color: #1CA6D9;
}
.x-share-options .tooltip {
display: none !important;
}
.x-entry-share {
border: none;
padding-left: 2%;
padding-right: 2%;
}
.custom-entry-share i {
font-size: 1000px;
}
.custom-entry-share .x-share {
background: transparent !important;
}
.checkout_coupon {
display: block !important;
}
.showcoupon {
display: none;
}
.bg-image {
background-size: contain !important;
}
.bg-image {
background-size: cover !important;
}
.bg-image {
background-size: 100% 100% !important;
}
.x-colophon.top .x-subscribe-form h1 {
display: none;
}
@media only screen and (max-width: 400px) {
.rev_slider_wrapper a.button.small {
height: 17px !important;
}
}
@media only screen and (max-width: 200px) {
.rev_slider_wrapper a.button.small {
height: 14px !important;
}
}
@media ( min-width: 980px) {
#x-subscribe-form-3511 {
width: 100% !important;
max-width: 980px !important;
margin: 0 auto;
display: block;
}
#x-subscribe-form-3511 label[for="x_subscribe_form_email"] {
display: none;
}
#x-subscribe-form-3511 fieldset {
width: 50%;
float: left;
}
#x-subscribe-form-3511 [name="x_subscribe_form[submit]"] {
margin-top: 0px;
padding: 0.414em 1.286em 0.652em;
}
}
Perfect thank you for your help
You’re welcome.