topic Re: Theme Module Edits in CMS Development

Theme Module Edits

HBarden — Tue, 24 Jan 2023 09:36:43 GMT

Hi all,

I'm currently using the Spark theme by Lynton to build a website.

I have a few errors/changes that I'd like to make within the CMS code files if someone could help me...

1) First one is in the theme settings, I've set it so the child menu pop outs are blue, but they still appear to be transparent and I'm unsure how I can change this as there is no setting?

2) On this module, I'm trying to make the titles a bigger font size. I have looked into the module code and the CSS and changed font size but it hasn't changed anything?

Any help would be appreciated!

Re: Theme Module Edits

alyssamwilie — Tue, 24 Jan 2023 13:50:44 GMT

Hi, I'm the developer of Spark! : )

Do you have a link I could view to check out the dropdown issue? I've tested the functionality in our demo and it's working as it should (Dropdown Background Color field changes the background color of the menu dropdowns) so being able to view your page would help me to debug what's going on on your end.

You've certainly edited the correct place for the tab navigation font size so strange that it's not updating for you. I know HubSpot can sometimes be slow updating CSS - have you tried clearing your cache? Also, is the page you're previewing using a template from the child theme you've set up (I'm assuming you've set one up as I think that's the only way you'd be able to edit the code) and not the parent theme?

Re: Theme Module Edits

HBarden — Tue, 24 Jan 2023 13:55:01 GMT

Hi,

Thank you for getting back to me! The link to previewing the page is here: https://ame-3d.co.uk/-temporary-slug-e9235baf-fa5c-4c83-840a-60d6a04c5677?hs_preview=KSaKLZiD-99566516860

In terms of the tabs module, I haven't cleared my cache but I did attempt to change it multiple times and didn't seem to have much change. Yes, it is a child theme I've made so we can edit the coding if needed. Thanks.

Re: Theme Module Edits

alyssamwilie — Tue, 24 Jan 2023 14:13:54 GMT

For the dropdowns I'm seeing this extra code that's been added that's removing backgrounds from .hs-menu-children-wrapper; this is why your menu dropdowns are transparent. From the comment it seems to have been added to customize the footer in some way. If it's still needed I would change it to .site-footer .hs-menu-children-wrapper so that it only effects the footer.

Looking in the console the font-size hasn't been updated on the front-end for the tab navigation. Maybe a dumb question, but I'm not sure why else the changes wouldn't be live, in the module did you click the Publish changes button after making your edit (and the Nice! Your module was published. popup appear)?

Re: Theme Module Edits

HBarden — Tue, 24 Jan 2023 14:19:13 GMT

Are you able to reference which design file that piece of code for the drop downs is located? I'm unable to find it currently.

I'm pretty sure I did publish it but I will double check shortly.

Re: Theme Module Edits

alyssamwilie — Tue, 24 Jan 2023 14:24:57 GMT

It's not in any design file, it looks to be added directly to the page. Maybe it's something that was added to the Site header/Site footer HTML under Settings (from HubSpot portal menu) > Website > Pages > Templates?

Re: Theme Module Edits

HBarden — Tue, 24 Jan 2023 15:05:05 GMT

Perfect, I've managed to fix it. Thank you!

In terms of the tab module text, I checked my design files and it is set to 1em when you took that screenshot. Seems the file hasn't translated to the live site even though it has been published.

Also, do you think it would be possible to change the website header background from a colour to an image as we would quite like to implement the blue patterned background onto the header instead of the static colour.

Thanks.

Re: Theme Module Edits

alyssamwilie — Tue, 24 Jan 2023 15:11:09 GMT

You could add the following to your child theme stylesheet to use a background image for the header:

.site-header { background-image: url(https://ame-3d.co.uk/hubfs/2023%20Blue%20Pattern%20Background-01.png); background-size: cover; background-repeat: no-repeat; }

Super strange about the tab navigation. Really not sure why it wouldn't be making the changes live. Maybe try adding a style to your child theme stylesheet to change the font size instead of editing the module?

Re: Theme Module Edits

HBarden — Wed, 25 Jan 2023 09:43:21 GMT

This has worked perfectly, thank you.

On the Hero background module, is there a way to change the image for a video with the text still overlayed? Thanks.

Re: Theme Module Edits

alyssamwilie — Wed, 25 Jan 2023 12:58:00 GMT

Our free version of Spark doesn't come with a video background, but you could build it yourself if you'd like. Here's a tutorial from HubSpot on video backgrounds: https://blog.hubspot.com/website/video-background-css