CMS Development

ErinKas
Top Contributor

Separate H2 Format for Blog posts

Is it possible for an H2 tag in a blog post to have different styling from the rest of the website?

 

https://www.omniresources.com/blog/5-signs-its-time-to-consider-a-nosql-database

 

for example if you look at the above link, the larger size font is what we would want to have the h2 look like for SEO purposes.

 

The h2 on the website is just too thick and DARK

 

Thanks in advance.

0 Upvotes
6 Replies 6
dennisedson
HubSpot Product Team
HubSpot Product Team

Separate H2 Format for Blog posts

@ErinKas, you can add classes to any of the templates that you have.  this blog already has a class of "blog"

you can write a style targeting h2's in a template with class blog 

.blog h2{

  whatever floats your boat here

}

 

It looks like you have some inline styles on the h2s.  you will need to remove those so you can get rid of the spans that are within them.  it will be obvious if you look at the code in your rich text editor 🙂

 

good luck out there,

d

0 Upvotes
ErinKas
Top Contributor

Separate H2 Format for Blog posts

Hey @dennisedson Are you saying to remove the blog stylings in the website css style sheet? Im still learning a bit about css and html. 🙂 I am not sure where the inline html stylings are on the h2s?  Thanks

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Separate H2 Format for Blog posts

@ErinKas,

no problem.  In the rich text editor, there is a dropdown at the top to show source.  you will see the coded version of your text in there.  your h2 will be like  this

<h2><span style="">i am the h2</span></h2>

remove the span and leave the text. 

Then you can add the correct style to your style sheet as i mentioned beforeDesign_Manager___HubSpot.png

0 Upvotes
ErinKas
Top Contributor

Separate H2 Format for Blog posts

So I will be adding this to the MAIN style sheet then?  @dennisedson

0 Upvotes
ErinKas
Top Contributor

Separate H2 Format for Blog posts

Ok, sorry @dennisedson I added this to the CSS Style sheet:

 

.blog h2{
font-size: 30px;
}

 

And it isnt updating the blog post here: https://www.omniresources.com/blog/5g-is-coming-heres-what-your-business-needs-to-know

 

Basically all the items that are in font size 30, need to be changed to H2s without changing the way they look currently.

 

Does that make sense?

 

When I added that code to the style sheet, the H2 is still black and bolded. 😞

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Separate H2 Format for Blog posts

hi @ErinKas,

Looks like you handle this.  I see that you have it at the blog post level an in the stylesheet.  Looks like you also removed that span that was added by the rich text editor!

 

You should be able to remove the style from the blog post head as it is redundant.  (it wont hurt if you leave it.) 

See the screen grab from your code. 

The inline style is in the page head and the advisors.css code is in..well..advisors.css 🙂

 

Developer_Tools_-_5G_is_Coming__Here_s_What_Your_Business_Needs_to_Know__-_https___www_omniresources_com_blog_5g-is-coming-heres-what-your-business-needs-to-know.png

0 Upvotes