Docs

[Chris]

I am trying to format the MailChimp email form in the X-theme, but am having some issues.

1. I would like to control the font size of Title, Labels, and user-entered data independently. I can set the data field font size, but the Title and Label sizes then derive from this value. I would like all three to be 14.
2. With font size of 14, the labels do not have sufficient spacing to the data input fields.

Thank you.

[Prasant Rai]

Hello Chris,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[Chris]

This reply has been marked as private.

[Jade]

Hi Chris,

I tried to access the page you have linked but it goes to a 404 – Page not found.

Kindly double check if it is the correct link.

[Chris]

I fixed the issue. Please try again. Thanks.

[Rad]

Hi there,

You have this CSS but I don’t see any 14px applied.

.x-subscribe-form {
  position: relative;
}

.x-subscribe-form h1 {
  font-size: 1.75em;
  margin: 0 0 0.5em;
}

.x-subscribe-form label {
  margin: 0 0 0.375em;
  font-size: 0.85em;
  line-height: 1;
}

.x-subscribe-form label > span {
  position: relative;
}

.x-subscribe-form label .required {
  position: absolute;
  top: -0.1em;
  font-size: 1.5em;
}

.x-subscribe-form input[type="text"],
.x-subscribe-form input[type="email"] {
  width: 100%;
  margin-bottom: 1.25em;
  font-size: inherit;
}

.x-subscribe-form input[type="submit"] {
  display: inline-block;
  width: 100%;
  margin-top: 0.25em;
  font-size: inherit;
}

.x-subscribe-form input[type="submit"]:focus {
  outline: 0;
}

.x-subscribe-form .x-subscribe-form-alert-wrap {
  margin-top: 1.25em;
  font-size: inherit;
}.x-header-landmark {
  padding: 1.85em 0 0px 0;}

/*Background color*/
.x-container.main:before {
    background-color: #eee;}

/*Main menu hover color override*/
.x-topbar .p-info a:hover, .x-social-global a:hover, .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, .x-navbar .desktop .sub-menu a:hover, .x-navbar .desktop .sub-menu .x-active > a, .x-navbar .desktop .sub-menu .current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a, .x-widgetbar .widget a:hover, .x-colophon .widget a:hover, .x-colophon.bottom .x-colophon-content a:hover, .x-colophon.bottom .x-nav a:hover {color:#ffffff;}

/*Vertical container spacing override*/
.x-container>.offset {
    margin: 0px auto;
}

/*Mailchimp subscribe formatting*/
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    display: inline-block;
    height: 1.5em;
    margin: -6px 0px 5px;
    border: 1px solid rgba(0,0,0,0.5);
    padding: 0 0.45em;
    line-height: normal;
    color: #000;
    background-color: #fff;
}

/*Removes shadow from submitted buttons eg MailChimp subscribe*/
.x-btn, .button, [type="submit"] {
    box-shadow: none;
}

/*Not used*/
.x-alert-info, .buddypress #message.info, .bbp-template-notice.info {
    border-color: #660066;
    color: #660066;
}

Please change your CSs from this,

.x-subscribe-form {
  position: relative;
}

.x-subscribe-form h1 {
  font-size: 1.75em;
  margin: 0 0 0.5em;
}

.x-subscribe-form label {
  margin: 0 0 0.375em;
  font-size: 0.85em;
  line-height: 1;
}

.x-subscribe-form label > span {
  position: relative;
}

.x-subscribe-form label .required {
  position: absolute;
  top: -0.1em;
  font-size: 1.5em;
}

.x-subscribe-form input[type="text"],
.x-subscribe-form input[type="email"] {
  width: 100%;
  margin-bottom: 1.25em;
  font-size: inherit;
}

.x-subscribe-form input[type="submit"] {
  display: inline-block;
  width: 100%;
  margin-top: 0.25em;
  font-size: inherit;
}

.x-subscribe-form input[type="submit"]:focus {
  outline: 0;
}

.x-subscribe-form .x-subscribe-form-alert-wrap {
  margin-top: 1.25em;
  font-size: inherit;
}

to this

.x-subscribe-form h1 {
  font-size: 14px;
  margin: 0 0 0.5em;
}

.x-subscribe-form label {
  margin: 0 0 0.375em;
  font-size: 14px;
  line-height: 16px;
}

.x-subscribe-form label > span {
  position: relative;
}

.x-subscribe-form label .required {
  position: absolute;
  top: -0.1em;
  font-size: 14px;
}

.x-subscribe-form input[type="text"],
.x-subscribe-form input[type="email"] {
  width: 100%;
  margin-bottom: 1.25em;
  font-size: 14px;
}

.x-subscribe-form input[type="submit"] {
  display: inline-block;
  width: 100%;
  margin-top: 0.25em;
  font-size: 14px;
}

.x-subscribe-form input[type="submit"]:focus {
  outline: 0;
}

.x-subscribe-form .x-subscribe-form-alert-wrap {
  margin-top: 1.25em;
  font-size: 14px;
}

Hope this helps.

[Chris]

I tweaked it a bit was able to get the look I want. When placed in the widget footer 3, it is now too low. This can be seen from the homepage or any other page. It does not appear to have any padding or margin so not sure why it is there. Thx.

[Rue Nel]

Hello There,

Thanks for the updates! To resolve the issue and fix the problem when you place it in a footer widget, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.widget_x_email_form .x-section {
    margin: 0;
    padding: 0;
}

Please let us know if this works out for you.

[Author]

Posts