Child theme css changes not reflecting.

[MMainali]

I don't use Design Manager very often and currently I am facing this issues with the child theme css. I cloned the css from parent theme which has same directory structure. I added the new Twitter X logo and I can see the changes with new logo in page edit mode but it is not rendered in published pages.

What am I missing here? I think the previous css files is not being replaced. Its been more than 24 hours and it is not working yet. 

[MMainali]

Hi @Jnix284 & @Kevin-C ,

I cloned the css file from parent theme to child theme. Only changes on the file is:

.fa-x-twitter:before {
content: "\e61b"
}

On and edit mode, you can see both the logo.

On the preview/live mode, the X logo is not showing.

Preview link

[Jnix284]

Hi @MMainali unfortunately the link you shared requires access to your HubSpot account to view. Do you have a public URL you can share?

[MMainali]

I am sorry for late resoponse as I was out of office.

Here is the public preview link: https://www.amlrightsource.com/contact-test-20230210?hs_preview=TNJeKFzV-109066915431

[Jnix284]

@MMainali no worries, thanks for the link!

The icon is there - it's just not visible:

Where have you added the definition for this class:

fa-x-twitter

I don't see it in the child.css, but it looks like you've overwritten other CSS files. 

It also looks like the theme is using FA v5, which doesn't include the Twitter X icon - which is free, but requires v6.4.2 (more on this limitation here).

The only thing I can't quite figure out is why it's showing in the editor at all, if the above is the reason, it wouldn't show in editor or preview.

Since you're using Clean theme, perhaps @HelpfulHero can provide further guidance.

[MMainali]

In child theme, I have updated the fontawesome css file and added new fontawesome icon files too. It is showing perfect in preview mode. Just not showing in live site. I have attached the screenshots.

[Kevin-C]

Hey @MMainali 

Have you made sure to add or update the reference to the new CSS files in your template? The little things can easily get lost when facing troubles!

But as @Jnix284 said we will need a live URL to debug accurately.

Best

[Jnix284]

@MMainali happy to help - can you check the URL with these parameters at the end:

?hsDebug=true&hsCacheBuster=4878

If you still don't see the change reflected, there are a few things we can check in the child theme configuration.

[AussieBob]

I was pulling my hair out when not seeing changes reflected after publishing theme changes. I was certain it was a cache issue but could not find any reference to it easily. It took me a while to find this post with '?hsDebug=true&hsCacheBuster=4878'..... Surely this information should be easier to find?

[Jnix284]

Hi @AussieBob Here's the developer documentation for Debugging - it has the ?hsDebug info and this is the unofficial HubSpot Developer Chrome Extension built by members of the dev community that includes the debug and cache buster parameters to make it easy to generate for any of your pages.

[MMainali]

@Jnix284 thank you so much for your reply.

I added provided parameters and I am still not able see the changes.

Although I can see the changes on edit mode.

[Jnix284]

Hi @MMainali it would be helpful if you can share the link with us, that would allow us to check the source code and determine why your CSS isn't apply.

Can you also share a screenshot of your CSS changes - or use the code block to paste it here?