I’ve recently begun editing my company’s HubSpot blog (note: I did NOT set it up) and have had trouble getting the blog theme to affect various page elements because they are receiving custom styles that supersede the theme styles. I’ve been trying to hunt down these custom classes and remove them but I encountered this issue that I have not been able to solve-
As you can see in the attached screenshot, there is a class ‘blog-desc’ that is coming from ‘blog.’ I have read elsewhere that ‘blog’ simply means the style is coming from a compiled stylesheet. So I downloaded all our HubSpot assets into Visual Studio Code and searched for files containing ‘.blog-desc’. I found two and I modified the class rules in those files within the HubSpot design manager and I published the changes. BUT that did not make the class definition from ‘blog’ go away for some reason. I also tried writing a definition for the class within my main.css but as you can see, it was overrided by the ‘blog’ definition. Can anyone explain what’s happening here? What can I do to eliminate or change these styles coming from ‘blog’?
Hi @JMellish,
take a look in your theme.json. Is there something like “Boilerplate”, “Session” or something similar as a name? If there’s only the companys name - no worries. You can look in all of your css(most likely the theme-overrides.css) files - maybe you’ll find some information. Just asking because it could help find the right part.
To locate the file fire up the inspector/dev tools, scroll up to <head>, hit ctrl/cmd+f and search for “blog.css”. After some search it should give you a path where the file is located.
If you won’t find a path this could mean that the devs did some inline styling (“we need to be fast - deadline’s tomorrow - drop it inline, if the customer is satisfied, we gonna create a dedicated file”… done and forgotten) If so - take a look here:
- blog template (should be in a/your theme)
- blog module (if you have a custom blog layout and custom functionality)
- Website <head> settings (Hub settings/Website/Pages/Templates)
- Blog <head> settings (Hub settings/Website/Blog/Templates)
- maybe - just maybe - it’s in a/the JS file and get’s rendered via JS (would be the worst possible solution imo)
Also: if you won’t find anything, go the sledgehammer route and write in your blog.css which is/should be linked in your main.css file
.blog-desc{
color: #6d6e71 !important;
}
hope this helps
best,
Anton
Hi Anton, thanks so much for your help! I was able to find that the problematic classes were being defined in the Blog <head> settings (Hub settings/Website/Blog/Templates). How is that header compiled? Does it ever refresh or anything? Or do I need to manually go through it and edit it? What would happen if I deleted all of it? Our company has two HubSpot blogs on two separate accounts and I noticed that the blog on our other account (which has no issues like the ones I’ve encountered here) has the Header HTML section blank
Hi , great! The code from this part is getting pushed into
{{ standard_header_includes }}
in your layout template and is completly static. So no compiling/refreshing.
If your theme is based on the Boilerplate you’ll find it in theme/templates/layouts/base.html or - if the devs have written the blog layout seperatly in the blog-index.html HTML.
There are several ways you can go:
Change the loading order of the CSS files(can lead to unwanted changes)
To do so look modify the order of standard_header_include and your theme CSS files (most likely main.css and theme-overrides.css) from
<head>
...
{{ require_css(get_asset_url("../../css/main.css")) }}
...
{{ require_css(get_asset_url("../../css/theme-overrides.css")) }}
...
{{ standard_header_includes }}
...
</head>
to
<head>
...
{{ standard_header_includes }}
...
{{ require_css(get_asset_url("../../css/main.css")) }}
...
{{ require_css(get_asset_url("../../css/theme-overrides.css")) }}
...
</head>
If you do it like this everything from main.css will override the standard_header_include stuff and everything from theme-overrides.css will override main.css.
2. Write it better/maintainable
For this - don’t just delete the code becuase it might break (a lot of) stuff.
First - make sure that all your blogs have this part since you can set the <head> individually per blog.
The best/“safest” way to go would be:
- Create a new CSS in your theme CSS folder like “blog.css”
- paste the whole code from <head> into it
- Save/Publish the file
- Open your CSS file which contains all includes(most likely main.css)
- Include your new CSS into the the file (I would suggest as the last file but it’s up to you)
- save/publish the file
- Go to your blog settings and delete the code from the all <head>-tags
If you do so the code will be compiled into your main.css
Also - for future usage - you can create overrides with the theme fields.json and theme-overrides.css files to make changes without the need to go the dev/CSS route.
Could look like this
fields.json
...
{
"name": "blog",
"label": "Blog",
"required": false,
"locked": false,
"type": "group",
"inline_help_text": "",
"help_text": "",
"default": {},
"children": [
{
"name": "description_color",
"label": "Description color",
"required": false,
"locked": false,
"inline_help_text": "",
"help_text": "",
"type": "color",
"default": {
"color": "#6d6e71",
"opacity": 100 }
}]
}
...
theme-overrides.css
...
{# this part should be at the top of the file #}
{% set blog_desc_color = rgba({{theme.blog.description_color.color|convert_rgb}},{{theme.blog.description_color.opacity//100}}) %} {# set a declarative name for the variable #}
...
...
...
.blog_desc{
color: {{blog_desc_color}}; {# use just the variables name and not the variable by it self #}
}
or
...
.blog_desc{
color: rgba({{theme.blog.description_color.color|convert_rgb}},{{theme.blog.description_color.opacity//100}}); {# use the variable #}
}
it’s the same result - personallyI think the first one will make your life easier since your code get’s cleaner after the whole configuration part
Hope this helps,
best,
Anton
I’m currently in the process of executing the second approach you listed because for some reason the first approach did not have the desired effect. I saw that the theme was now overriding the main styles but the styles from ‘blog’ were still receiving the highest precedence. Any theories as to why that might be? Whoever set up all the hubspot stuff before me definitely didn’t know what they were doing so it makes it difficult for me to desconstruct the logic to their approach. Would there be something else that they wrote somewhere that would ensure the {{ standard_header_includes }} always gets top priority?
I noticed that within the header HTML settings there was a line that said {% include “Blog/blog-modules.css” %}. Is that standard or could that line be part of why the standard header rules are getting imported last (or artificially prioritized) despite my best efforts
Hi @JMellish,
great. The only reason is/could be that there are different bits everywhere and they’re getting loaded into {{standard_header_includes }} and - therefore override everything.
They’ve included the blog-modules.css directly into the head settings? Oh man, place the include part into your main.css - if it isn’t already there. Save it and delete it from the head settings. This is definitely no good approach.
best,
Anton