Docs

[Tim]

Hi X,

I found this peace of code on the forum:

/* Removes white space caused by content band befor the form */
div#x-content-band-6 {
    margin: 0;
}

/* color of form heading */
div#x-content-band-7 h5 {
    margin: 0;
    color: #ffffff;
}

/* Background color of form content band */
div#x-content-band-7 {
    background-color: #333333!important;
}

/* make form inline */
form#x-subscribe-form-1362 fieldset{
    float: left;
    width:50%;
}

/* remove email field border */
.x-subscribe-form input[type="email"] {
    border: none!important;
}

/* colors of submit button, remove text shadow, no border, height adjustment, alignment */
.x-subscribe-form input[type="submit"] {
    background-color: #64C4FF!important;
    color: #ffffff;
    text-shadow: none !important;
    margin: 0;
    border: none;
    height: 37px;
}

And should create the effect as seen in the attached screenshot.

Now i want to replicate this on this site: http://nlbunk-mekenassa.savviihq.com/

It seems that the code is outdated. X does not work with ‘content-bands’ anymore? Could you help me to correct this code again? Not getting it together right now..

Thanks!

[Lely]

Hi There,

Yes, that code is outdated because we’re using sections now. For your form on this page:http://nlbunk-mekenassa.savviihq.com/ to make it inline, please use the following CSS instead:

form#x-subscribe-form-10268 fieldset {
    width: 50%;
    float: left;
}

Hope this helps.

[Tim]

Hi Lely,

I’m sorry but this code does not do the trick and certainly does not give it the styling as seen in the screenshot..

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-subscribe-form {
    max-width: 700px !important;
}
.x-subscribe-form fieldset {
    display: inline;
}
.x-subscribe-form input[type="submit"] {
    margin-top: -24px;
  border-radius: 0;
  height: 30px;
  
}
.x-subscribe-form input[type="text"], .x-subscribe-form input[type="email"] {
    height: 30px;
    border-radius: 0;

}
input#x_subscribe_form_email {
  margin-right: 0px;
}
fieldset {
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
}

Once you have applied that contact us for the final adjustments if necessary.

Thanks

Joao

[Author]

Posts