I am using the theme Liebling and I have noticed I cannot change the H1 header in the hero area. That said, I was trying to use JavaScript to target the header but I cannot seem to get it to work.
I have tried adding the script below to the “code injection” but it doesn’t seem to work.
The ID tag doesn’t seem to be getting added to the H1 element (HTML class “m-hero-title”) in the header, which I believe is needed to use “document.getElementById().innerHTML” and edit the HTML content.
My questions are:
Does anyone have any thoughts on why it isn’t working?
Is there an easier way (whether javascript or not) to change the H1 text in the hero area? (I only have an HTML class to work from, no ID)
In response to your first comment, the theme I am using inputs the site title as the H1 header. However, I want the site title to stay the same and alter the H1 header.
That said, I gave your suggestion a go but for some reason, it still doesn’t seem to be working. If you have 2secs, I have attached a screenshot and I am curious if you notice what the issue is?
The left side shows the inspected title and the H1 element and the class “.m-hero-title”
The right side shows my code injection with the newly added JavaScript at the top (circled in red)
I may be tired today, but I’m not seeing the problem. Can you check your console log to see if there’s an error message? (In Chrome, press F12, then click the Console tab.)
For debugging purposes, consider adding
console.log(h1)
between the two existing lines. That’ll tell you if the querySelector is actually finding it.
@sebbunney, It’s probably going to flicker. (Will depend on browser speed.) I’m a little surprised it’s hard-coded, but it might be. (Check in the Ghost admin pages, under site settings - it might be there, the same place you can change your theme color.) If you need it changed in a way that doesn’t flicker (because it’s right to start), hit me up. Five minute job. [Assumes you’re not on the Ghost Pro starter plan. If you’re on the starter plan, then the code injection above is the best option.]
Change your site title (General → Title) to what you want to have in the H1. Then, update Meta title to what you want the site to be called. This will be used in search engine results and the browser tab.
This approach might not work, in which case you have the other one, but I thought I’d throw it out there.
I just realized an issue! The HTML class “.m-hero-title” is not unique to the home page. Every page uses the same HTML class. That said, do you know of a way to specifically target the home page H1 “.m-hero-title”?
Can you specify a URL to target in JavaScript or have a boolean to check whether you’re on the homepage?
That solution works! Nice. I’ll throw one more out there.
If developers use it, Ghost outputs a specific class for different contexts. For the home page, it outputs the home-template class. That means you can use it to target elements on the home page.
[Assumes you’re not on the Ghost Pro starter plan. If you’re on the starter plan, then the code injection above is the best option.]