Skip to main content

How can I remove the background form an endorsement block?

Example here - Looking to remove that slightly transparent white box background behind the form. I have experimented with the theme, layout, endorsement, and form template, along with the specific page.

Official response from

Hey Joseph, it looks like you're trying to change the white background color of each individual input field within the endorsement form. I would recommend making inline HTML changes to each field within the page-level template in order to remove the white background color on each field.

Page-level template (default):

<div class="span6">
<label for="endorsement_first_name">First Name</label>{% text_field "first_name", class:"text" %}

Page-level template (with form background color made transparent):

<div class="span6">
<label for="endorsement_first_name">First Name</label><input class="text" id="endorsement_first_name" name="endorsement[first_name]" type="text" style="background-color: transparent;">

Notice the liquid tag was replaced with the outerHTML of each field? This is done so that you can insert the style tag, which lets you add styles to change the field color in particular. You might ask, how did we make the liquid tag into outerHTML? Basically, all we did was view the input-field using the inspect element tool. Then, we copied the outerHTML of the field and added the style tag. You would then use the CSS elements necessary to change the styles that you want, in this case it was background-color.

You may want to repeat this process for each input field in the page. Further, this outerHTML workflow is useful for making page specific style changes in general. Therefore, if you are looking to make page-specific style changes, this is a good workflow to use. However, if you are looking to make theme wide specific changes to styles, then its often useful to simply consider updating the _forms.scss theme file, or whatever .scss file controls the overall style.

Complete and current information on how to use NationBuilder is available in the documentation section.

Share this post

Showing 2 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.