Change 'Thank You' Message Background Colour

Jord2000
Member

I want to change the background colour of the thank you message here. I have tried:

 

Thank You Message Box.JPG

 

  • Going into the Theme of the template I'm working in and updating Form branding section (but nothing in here refers to 'Thank You' message branding)
  • Going into the specific Form and editing settings, I can change the text of the Thank You Message but can see nothing about the module background colour? 
  • Using the editing tab in the landing page I'm working on to edit the Thank You message, again nothing about the background colour of the module. 

I've seen one post about editing the source code, but this was for editing the thank you text colour - I'm not sure what the code would be for editing the background colour. 

 

Thanks in advance!

0 Upvotes
9 Replies 9
Alex_
Top Contributor

Do you mind pasting the preview link for the template here so I/we could take a look at the css?

0 Upvotes
0 Upvotes
Alex_
Top Contributor

So, it looks like there are two sections you'd need to update for that form area: the two columns section with the form and the spacer below it. Try adding these to your template:

 

.dnd_area_main_banner-row-1-padding {
background-color: #000 !important;
}
.dnd_area_main_banner-row-2-padding {
background-color: #000 !important;
}

 

Just replace the hex code with the color you want and you should be good. Let us know if these work.

Jord2000
Member

Hi Alex,

 

Forgive me for maybe asking a stupid question but where am I supposed to include that code? 

 

I've gone into the landing page template in Settings > Marketing > Themes and can't find anywhere to insert this code? I've also tried clicking 'Source Code' here and adding it in but when I previewed it, the code just came up as text in the thank you message? I'm not very experienced with coding (apart from a one week programme 2 years ago as part of my apprenticeship :?) so maybe I'm missing something! 

 

 

Coding Issue Forms.JPG

0 Upvotes
Alex_
Top Contributor

Ah, apologies for not directing you to the right area.

 

If you know the name of the template you're using for that landing page:

  • Navigate to the Design Tools section within the Files and Templates option under the Marketing tab
  • Click the template you're wanting to update
  • On the right column of the template, there should be a section named "Additional <head> markup" - click Expand
  • If there's no styling there (if it's blank), type <style>
  • Paste the code I sent you earlier, hit Enter so you're now on a new line and type </style>
  • Click Publish changes and you should be set
  • Refresh the page you're using that template on and you should see the new background color take effect

The Additional <head> markup option would look like this:

Screenshot 2020-09-28 095234.png

 

If you don't know the name of the template:

  • Within the landing page builder, click the Settings tab
  • Scroll down and click on Advanced options
  • Scroll down to the Templates section and click Edit this template
  • On the right column of the template, there should be a section named "Additional <head> markup" - click Expand
  • If there's no styling there (if it's blank), type <style>
  • Paste the code I sent you earlier, hit Enter so you're now on a new line and type </style>
  • Click Publish changes and you should be set
  • Refresh the page you're using that template on and you should see the new background color take effect

The code within the Additional <head> markup section should look like this:

 

<style>
.dnd_area_main_banner-row-1-padding {
background-color: #000 !important;
}
.dnd_area_main_banner-row-2-padding {
background-color: #000 !important;
}
</style>

 

Let me know if you have any questions.

0 Upvotes
Jord2000
Member

So I've gone into Design Tools and cloned the tab as I can't edit the actual template coding, but if I understand correctly making changes in the clone will still apply to the theme I'm editing? 

 

But I've tried to find the "Additional <head> markup" you're referring to, and have also used search Control+F to make sure I'm not missing anything and unfortunately I'm having no luck. 

 

Is the only way to change this through coding? I'm new to HubSpot and I'm just shocked at how some really simple things require such advanced editing.

 

If you've any other ideas I'd really appreciate it! 

 

0 Upvotes
Alex_
Top Contributor

Without seing what kind of template you're working with, I'm not sure what else can be done for changing the background.

 

If it's a modular template, you can try changing the background for the module that's holding the form in the area that says Inline styling (see example below).

 

Screenshot 2020-09-29 071912.png

 

Screenshot 2020-09-29 072105.png

 

But again, without seeing the template you're working with, it's a little difficult to further troubleshoot.

0 Upvotes
Jord2000
Member

I'm working in the HubSpot free theme 'Session' using their About Page template. I've looked for the 'Inline Styling' and can't find anything. I'm going through the design tools still to try and figure it out and no luck - just about feel like giving up!

 Form Capture.JPG

0 Upvotes
Alex_
Top Contributor

I just sent you a private message.

0 Upvotes