Help Needed: Footer Font Size Override Not Applying in Child Theme

Developer Support CMS Development
1

Hello all,

I’m new to Hubspot CMS and I need some help.

I want to reduce the font size of the footer copyright section in the Infinity theme.

In the child theme, under layouts > base.html, I changed the require_css to:

{% set overwrite_child_css_path = ‘../../child.css’ %}

On child.css, I added the following:

/* Override for footer text on desktop */
@media only screen and (min-width: 768px) {
.in-footer p,
.in-footer li,
.in-footer blockquote,
.in-footer a:not(.menu__link) {
font-size: 12px !important;
line-height: 18px !important;
}
}

After publishing and opening the browser in incognito mode, I don’t see any changes being made.

I think I might be missing something here.

I would truly appreciate it if you could point me in the right direction.
Thank you!

2

@DWorks did you have the child theme configured before you built the website pages?

If you create a child theme after using the marketplace theme, all of your pages would have to be rebuilt using the child theme for any overwrites to apply. Just want to eliminate this before checking for other possibilities.

3

This makes a lot of sense for me now. Can you point me to the guide or tutorial on how to rebuild pages using the child theme?

4

@DWorks your original post says you have a free account - if this is correct, the only way to rebuild is to create new pages using the child theme for each page (one at a time), update the current/live URL to a temp URL, add the previous URL to your new child theme page, publish the new page, and unpublish the old page.

If you have Content or Marketing Hub Pro, you have access to Content Staging which makes the whole thing a lot easier. I can share details if this applies to you.

There is another way, but you have to be careful and understand the pitfalls.

In the page settings, you can change the theme from the marketplace theme to the child theme. When you do this, the template should update to your base.html from the child theme and you should see your footer changes live.

Caution - the module IDs will still be tied to the marketplace theme, not the child theme. What does this mean? If you clone a module from the marketplace to your child theme and modify it, those changes wouldn’t be reflected on any pages you already built with that module from the marketplace.

To avoid confusion in the future with updates made to the child theme, once you change the template for each page from the marketplace theme to the child theme you could drag a new version of the module onto the page and rebuild it.

The modules in the sidebar will be from the child theme (even if you haven’t cloned any, again the ID will be different in the background). Once you rebuild your content you can delete the original module and move to the next, and so on.

You shouldn’t have to replace the header/footer on any page UNLESS you made changes to the header/footer files in the child theme (not really recommended).

Happy to talk through specific questions about getting everything converted if this is unclear.

Another option would be to reach out to SpaceRockX, they wrote a script that will swap the marketplace ID with the child ID behind the scenes so you don’t have to manually udpate everything. I’m not sure if there are limitations based on your subscription to do this, but they can help answer your questions if there are.

5

It’s very informative. You’re really awesome. Thank you!

6

You’re welcome @DWorks, happy to help!

7

Hi @DWorks,

In you child theme in layouts > base.html

Instead of:

{% set overwrite_child_css_path = '../../child.css' %}

Try using:

{{ require_css(get_public_template_url("../../child.css")) }}

8

@evaldas the set overwrite option forces the child.css to take 1 priority. require_css is the default and requires that the child css is included, but it doesn’t prioritize it above all other theme CSS files. Both work to serve the same purpose, indicating that the child.css is included in the cascading style sheets, the order of priority is just different.

Using set overwrite instead removes the need for !important in 99% of cases.

There’s something else happening here that’s causing the code not to be recognized, such as the page with the footer isn’t built with the child theme or there is a different footer module used.

9

Good to know - thanks for the explanation @Jnix284!

10

you’re welcome @evaldas, appreciate you jumping in to try to find a fix for this, there are so many possibilities when it comes to child theme configurations - it’s always good to have an extra set of eyes on it!