Override default hs-styles on blog

[nschurdell]

On pages in the COS the settings allow us to override the primary css file by setting it to disabled, but the blog feature only allows you to ADD stylesheets, and in three different browsers we've tested it has no impact on the page when it loads after the hs-default-custom-styles... any workarounds?

[MayPascaud]

Hi @nschurdell, so you are able to override the Primary Stylesheet (hs_default_custom_style.css) in the Header of your Blog template, same as you can for the COS pages. In the template, select Edit > Edit Head > Disable Primary CSS file, like so: 

However, the Primary stylesheet shouldn't have anything in it unless you added styling yourself. You might also be referring to to default blog markup, such as:

<div class="hs-featured-image-wrapper">
        <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
        <img src="{{ content.post_list_summary_featured_image }}" alt="{{ content.featured_image_alt_text }}" class="hs-featured-image">
        </a>
        </div>

If that's the case, the only way to override this styling would be to either target these classes/IDs directly in your stylesheet, or replace them with your own. Indeed, the default styling is added into every portal by default. You can read more about HubSpot's Blog Content Markup in this article. I hope this helps!

[nschurdell]

Thank you @MayPascaud, this issue still remains. If you use a custom code > blog > blog-template-page-name.html file as the 'template' for the blog posts, the editing the head on  template > blog > edit head will have no effect.

Then in the .html file - the {{ standard_header_includes }} cannot be overriden by the content settings > blog section here (it only allows you to add and not override the default styles and we cannot find a workaround.

Any other suggestions?

[AJLaPorte_diagr]

Hi nschurdell,

Are you trying to remove the Primary CSS file (hs_default_custom_style.css) or make changes to the file?

• If you want to remove it, you should be able to uncheck the checkbox in your content > content settings > blog: Then unchecking the "Include Primary CSS File"
• If you want to modify it, you can do so by going to design manager and clicking on the primary css file link (https://knowledge.hubspot.com/articles/kcs_article/cos-general/what-is-the-primary-css-file)

Hopefully this helps you. If I'm way off on what you are trying to accomplish, please let me know.

-AJ

[nschurdell]

Thank you AJLaPorte,

Option 1 - we do not see this anywhere in the content > content settings > blog page we see. Can you provide a screenshot of where it listed on the page for you? Again, I have attached a screenshot of what we see, we can add a style sheet but there is no option in that screen to disable the "Include Primary CSS File" as you mention.

We do not want to edit it so option 2 is out. We just want to overrride it, but when you use an custom html page as the 'blog template' there is no place to do this. Thanks in advance 🙂

[AJLaPorte_diagr]

Hi nschurdell,

That is my bad, I was looking at the regular content options (pages). The best option you have at the moment would be to create a secondary css file that overrides the items from the primary css file and attach that. This should do the trick. 

-AJ

[nschurdell]

AJ,

No worries, we actually have styles in our stylesheet that loads AFTER the HS default one, but it has to do with form fields and they are not overwriting the defaults. And we have no way to override this on blog templates that are hardcoded into hmtl files - ugh! Thanks for your insight and efforts.

[AJLaPorte_diagr]

Hey nschurdell,

You should be able to disable stylesheets for the blog template in:

Content > Design Manager

Find your current blog template then go to:

Edit > Edit Head

You should now be able to disable both the Primary and Domain Included CSS files while adding your own custom ones along with any additional HTML to the header you need. 

Hopefully this helps with what you are looking to do. 

-AJ