Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change blog post title from Header 2 to Header 1 (Java or CSS Preferred)


BitBloggist

Question

Hello!

I've recently changed my site template to Tudor (Skye Family), and noticed that most of my blog pages don't have an H1 associated with them.

For example, on this blog page:

https://bitbloggist.com/video-game-blog-collection/top-10-switch-games-so-far

The text "10 Best Switch Games Right Now" is automatically classified as an H2 instead of an H1. There's no way to change this in the style editor, so I believe I'll need some custom CSS to change this.

Also, this change only needs to apply to individual blog posts, as I don't want my home page to have multiple H1's listed.

Thanks in advance!

Edited by BitBloggist
Changed to Java as the preferred solution over CSS.
Link to comment
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 0

@tuanphan Would getting tricky with some CSS help though? My thought is maybe to hide the Blog Post Title/Item Title on the Blog Page, and then Manually Add the H1's at the top of the post. Would there be some way to still display the date and category tags?

Link to comment
  • 0

@BitBloggist As far as I know, to change a tag from h2> h1, you will need to use JavaScript or edit the Template, then type h1 instead of h2.

With CSS, you can hide / show any element on the web

Link to comment
  • 0

You definitely can update the template to change this to be a <h1> tag instead of an <h2>. You would need to turn your site on for developer mode, pull down the code, change one line of code (change line 14 or blog.item to be an <h1> instead of an <h2>), then commit that back to your site. 

If you are still trying to fix this reach out to me if you are running into any issues.

 

 

Link to comment
  • 0

Actually you could add a Code injection as well if you wanted to.

 

<script>
	window.onload = function () {
		var els = document.querySelectorAll('.entry-title--large');
 		for (var i = 0; i < els.length ; i++) {
            els[i].outerHTML = '<h1>' + els[i].innerHTML + '</h1>';
 		}
	}
</script>

if you want to change to something different just change the <h1> tags.

Link to comment
  • 0
On 11/14/2020 at 6:15 AM, TessPham said:

Hi, 

I tried your code injection which has been working well! There's only one problem is that when I used this code, I cannot change the blog post title. The code have to be removed to change the copy.

Can you please help me on this?

Thanks!

Hi. Do you still need help on this?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...