CMS Development

AzharBondi
Contributor

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

SOLVE

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 !

AzharBondi_0-1696338624336.png


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"
}
}

]

AzharBondi_1-1696338846264.png

 


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 


 

2 Accepted solutions
Jnix284
Solution
Hall of Famer | Elite Partner
Hall of Famer | Elite Partner

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

SOLVE

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!

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

View solution in original post

Anton
Solution
Thought Leader

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

SOLVE

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

Anton Bujanowski Signature

View solution in original post

10 Replies 10
Anton
Solution
Thought Leader

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

SOLVE

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

Anton Bujanowski Signature
AzharBondi
Contributor

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

SOLVE

Thank you @Anton ! I really appreciate the help !

danmoyle
Most Valuable Member | Elite Partner
Most Valuable Member | Elite Partner

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

SOLVE

@Anton coming in hot with some great knowledge! 

 

Did my answer help? Please "mark as a solution" to help others find answers. Plus I really appreciate it!


Dan Moyle

HubSpot Advisor

LearningOps | Impulse Creative

emailAddress
dan@impulsecreative.com
website
https://impulsecreative.com/
romerocam
Member

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

SOLVE

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

AzharBondi
Contributor

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

SOLVE

Thank you @romerocam ! I really appreciate the help !

0 Upvotes
danmoyle
Most Valuable Member | Elite Partner
Most Valuable Member | Elite Partner

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

SOLVE

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? 

 

 

 

Did my answer help? Please "mark as a solution" to help others find answers. Plus I really appreciate it!


Dan Moyle

HubSpot Advisor

LearningOps | Impulse Creative

emailAddress
dan@impulsecreative.com
website
https://impulsecreative.com/
AzharBondi
Contributor

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

SOLVE

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

0 Upvotes
Jnix284
Solution
Hall of Famer | Elite Partner
Hall of Famer | Elite Partner

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

SOLVE

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!

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

AzharBondi
Contributor

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

SOLVE

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 

AzharBondi_0-1696409297405.png


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

AzharBondi_1-1696409385215.png

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

AzharBondi_2-1696409453870.png


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






Jnix284
Hall of Famer | Elite Partner
Hall of Famer | Elite Partner

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

SOLVE

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.

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin