Change background form

SOLVE
New Contributor

Hi, 

 

I want to change the background of the form on the right. I want the background the same as the 'box' on the left. So a grey 'transparent' box with white letters. I tried to change it, but it did not work. Can you help me? Background form.JPG

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Highlighted
Regular Advisor

You can add i to the form with:

 

#offer-background-image .hs-form {
background: rgba(0, 0, 0, 0.2);
}

 

However I would suggest setting it up with the background on the column the wrapper:

Add this to your CSS:

#offer-background-image .page-center > .row-fluid-wrapper > .row-fluid > .widget-span { 
background: rgba(0, 0, 0, 0.2);
padding: 10px;
}

And remove the background set on the h1 and h3.

Find #offer-background-image h1 and remove background: rgba(0, 0, 0, 0.2);

Find #offer-background-image h3 and remove background: rgba(0, 0, 0, 0.2);

 Screen Shot 2017-04-11 at 3.37.58 PM.png

Reply
0 Upvotes
Highlighted
Regular Advisor

The CSS I gave would be added to the CSS file attached to the template. You can identify this by going to Edit > Edit Head. Look at the "Attach Stylesheets" section and see what stylesheet is being used. You would the locate that file in the "Coded files" section in design manager and edit that file, adding the CSS i provided.

 

However, you could add it under the module CSS. Add this to the Custom Inline styling section not the Custom CSS Class.

background: rgba(0, 0, 0, 0.2);
Reply
0 Upvotes
5 Replies 5
Highlighted
Regular Advisor

Can you post a link to a sample page to look at your CSS?

 

Reply
0 Upvotes
Highlighted
New Contributor
Reply
0 Upvotes
Highlighted
Regular Advisor

You can add i to the form with:

 

#offer-background-image .hs-form {
background: rgba(0, 0, 0, 0.2);
}

 

However I would suggest setting it up with the background on the column the wrapper:

Add this to your CSS:

#offer-background-image .page-center > .row-fluid-wrapper > .row-fluid > .widget-span { 
background: rgba(0, 0, 0, 0.2);
padding: 10px;
}

And remove the background set on the h1 and h3.

Find #offer-background-image h1 and remove background: rgba(0, 0, 0, 0.2);

Find #offer-background-image h3 and remove background: rgba(0, 0, 0, 0.2);

 Screen Shot 2017-04-11 at 3.37.58 PM.png

Reply
0 Upvotes
Highlighted
New Contributor

Hi @ndwilliams3

 

Thanks for the explanation. But I can't find where I have to remove the background set on the h1 and h3. Can you help me? 

 

I've added the code here:

 

Background form.JPG

Is that right? 

 

Thank you!

Reply
0 Upvotes
Highlighted
Regular Advisor

The CSS I gave would be added to the CSS file attached to the template. You can identify this by going to Edit > Edit Head. Look at the "Attach Stylesheets" section and see what stylesheet is being used. You would the locate that file in the "Coded files" section in design manager and edit that file, adding the CSS i provided.

 

However, you could add it under the module CSS. Add this to the Custom Inline styling section not the Custom CSS Class.

background: rgba(0, 0, 0, 0.2);
Reply
0 Upvotes