CMS Development

Loes
Member

Change background form

SOLVE

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

2 Accepted solutions
ndwilliams3
Solution
Key Advisor

Change background form

SOLVE

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

View solution in original post

0 Upvotes
ndwilliams3
Solution
Key Advisor

Change background form

SOLVE

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);

View solution in original post

0 Upvotes
5 Replies 5
ndwilliams3
Key Advisor

Change background form

SOLVE

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

 

0 Upvotes
Loes
Member

Change background form

SOLVE
0 Upvotes
ndwilliams3
Solution
Key Advisor

Change background form

SOLVE

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

0 Upvotes
Loes
Member

Change background form

SOLVE

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!

0 Upvotes
ndwilliams3
Solution
Key Advisor

Change background form

SOLVE

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);
0 Upvotes