topic Re: How to change header and footer background color using json file? in CMS Development

How to change header and footer background color using json file?

AzharBondi — Tue, 03 Oct 2023 15:11:17 GMT

Hi,

Note: This is a project made from scratch so I am not using the boilerplate (one of the requirements in the CMS Developer Practicum)

So with that said, I would love to be able to change the footer and header colors using the page editor !

and this is the json file code I am using !

[
{
"label": "Header and Footer Background Color",
"name": "header_and_footer_bg_color",
"type": "color",
"visibility": {
"hidden_subfields": {
"opacity": true
}
},
"default": {
"color": "#425b76"
}
}

]

How can I make sure that the color change in footer and header ? (now not working)

Should I add a specific tag into header.html and footer.html files or should I make a change in the json file so it knows I am targeting the footer and header ?

Thanks in advance,
Best regards!!
Azhar

Re: How to change header and footer background color using json file?

danmoyle — Tue, 03 Oct 2023 17:33:13 GMT

Hi @AzharBondi! I think your best bet is this documentation that helps with json and modules (and more). There's a section that includes some info on editing the footer.

@Jnix284 is this a questin you have a more specific solution for with your design experience?

Re: How to change header and footer background color using json file?

Jnix284 — Tue, 03 Oct 2023 18:19:02 GMT

Happy to jump in @danmoyle - to clarify @AzharBondi , when you configure your fields.json you're creating a list of variables that you're allowing the user to modify.

The fields.json allows you to set the default value and then provide the user to configure different values in the Theme Settings editor.

It doesn't define how these colors are used within the theme.

You could create a variables.CSS where you define variables that use the colors from the theme settings and then you would use those variables to code the module for the header/footer, etc.

For example, something like this:

--header_and_footer_bkgd_color: {{ theme.colors.header_and_footer_bkgd_color.color }};

My suggestion would be to create a naming convention that makes it easy to code these colors consistently throughout your theme.

Hope this helps!

Re: How to change header and footer background color using json file?

AzharBondi — Wed, 04 Oct 2023 08:46:25 GMT

Hi @danmoyle , thanks for the help ! I appreciate that !

Re: How to change header and footer background color using json file?

AzharBondi — Wed, 04 Oct 2023 08:54:34 GMT

Hi @Jnix284,
thank you for your quick response to @danmoyle tag !
So I tried to understand what you mentioned above and took these steps that I am going to share with you !

1/ in the layout.css file I added these lines of code

2/ went to header.html and footer.html and added the link to the layout.css

3/I added the variable name into the header.html and footer.html

I tried to troubleshoot why it is still not applying changes to the background color

of header and footer but I am a bit stuck ! Do you have an idea based on the code I provided why no changes are happening?

Thanks a ton!
Best regards,
Azhar

Re: How to change header and footer background color using json file?

romerocam — Wed, 04 Oct 2023 11:52:42 GMT

Hello Azhar! Ive replied to you in Slack channel! Hope it helps you!
Regards!

Re: How to change header and footer background color using json file?

Jnix284 — Wed, 04 Oct 2023 12:54:00 GMT

Hi @AzharBondi, you're definitely on the right track, but without diving into your code in more depth to understand how you have everything configured I'm not able to find an obvious answer from the screenshots.

For more help with code, I suggest joining the HubSpot Developer Slack where you'll be able to connect with other devs working on the practicum to get further guidance.

Re: How to change header and footer background color using json file?

Anton — Wed, 04 Oct 2023 21:56:27 GMT

Hi @AzharBondi,

great progression so far.

While you can put css into templates by using

{% require_css %} <style> /* YOUR CSS */ </style> {% end_require_css %}

(here's the documentation for this since this is extremly useful for custom modules, sections and such)

I wouldn't recommend this since it's gonna add the CSS only to this template and this is definitely not a best-practise.

If you're working with @Jnix284 approach of

:root{ --header_and_footer_bkgd_color: {{ theme.colors.header_and_footer_bkgd_color.color }}; }

you should put this into your theme-override.css and write it like this

:root{ --header_and_footer_bkgd_color: {{ theme.colors.header_and_footer_bkgd_color.color }}; } /* more variables, CSS */ header,footer{ background-color: var(--header_and_footer_bkgd_color); }

There are many ways how you can work with fields.json and the css files and as almost always: there is no right or wrong. It always depends on the client/project you're working on

In most cases I write my CSS files like this:

{%- set header_footer_bg = theme.colors.header_and_footer_bkgd_color.color -%} /* more variables, CSS */ header, footer{ background-color: {{ header_footer_bg }}; } /* you can also do things like header, footer{ background-color: rgba({{ header_footer_bg|convert_rgb }}, .3); } */

By doing so you have all variables on top of the file and you don't have to look for all interations of "theme.colors.header_and_footer_bkgd_color.css" in the file if you want to change something.

Again - there are countless ways to achieve your goal.

The most important thing is to get started and to understand if-statements, for-loops(repeater), filters and functions but once you've mastered them you can do quite a lot and modify the "CMS" part of HubSpot to your needs.

hope this helps

best,

Anton

Re: How to change header and footer background color using json file?

danmoyle — Thu, 05 Oct 2023 12:30:23 GMT

@Anton coming in hot with some great knowledge!

Re: How to change header and footer background color using json file?

AzharBondi — Fri, 06 Oct 2023 23:51:54 GMT

Thank you @Anton ! I really appreciate the help !

Re: How to change header and footer background color using json file?

AzharBondi — Fri, 06 Oct 2023 23:53:28 GMT

Thank you @romerocam ! I really appreciate the help !