Change font size of Title on tag page

Using Ghost
1

How do I change font size of the Tag header or Title on it’s tag page.

I’m assuming its via code injection, as thats the option when editing Tag pages properties.

2

Can Anyone help me out? …I have googled and searched the forum already.

3

This is theme specific. Name the theme or better yet provide a working link.

4

I’m using the “Headline” theme…thanks !!

5

I’m going to walk you through it, so that you can make small changes like this on your own in the future. :) (It’s super powerful.)

These directions are Chrome and Windows, but should be generally applicable to other browsers/OSes. (No promises on phones!) If you’re using a Mac and Safari, you might need these directions for opening developer tools: How to Inspect Element on Mac using Safari ? | BrowserStack

So I opened headline.ghost.io (you’d open YOUR site here), and navigated to a tags page. I think you’re trying to target the highlighted part?

image
image1082×896 145 KB

I right clicked it and chose ‘Inspect’ from the menu. Developer tools opens up, and I see this:

image
image840×544 35.9 KB

That tells me that the word “Culture” on this page is wrapped in an h1 tag, and has the class “gh-pagehead-title”. I can also see that it has a CSS setting of font-size: 2.4rem. That’s the thing I want to change, to something bigger.

You can actually EDIT what you’re seeing there - just click where it says 2.4rem and it’ll let you edit it. Try 5rem. Too big? OK, try 3.5rem. Find a value that works. None of those changes are going back to your Ghost site, but that’s super helpful for figuring out what values you want.

Ok, so how do we save those changes?
I typically put code injection into the main code injection box, found at Settings > Code Injection. You /can/ put it in the tag’s specific code injection, but then it’ll only apply to that tag. Most of the time, you probably want to change everywhere an h1 has that class, so you’d put it in the main code injection, rather than changing one single tag. (It can go in head or foot.)

OK, so what goes in code injection?
CSS needs to be wrapped in <style> stuff here </style> tags to tell the browser this is a style, not regular HTML.
The format is selector { attribute: value ; secondattribute: secondvalue }
Tags go in the selector as the tag (i.e. h1). Classes start with a .. (if you had an id, that’d start with a #.)

So for this case, I would try:

<style>
.gh-pagehead-title { 
   font-size: 5rem;
}
</style>

There’s one more little wrinkle here, and that’s that we’re telling the browser two different things (one the original value, and one the new value). How will it know which to apply? If they’re the same, it’ll use the last one (which is an argument for putting CSS into the ghost foot). But if you’re having trouble getting a style to apply, add an !important, which can help get overrides to apply. So the line above becomes:

<style>
.gh-pagehead-title { 
   font-size: 5rem !important;
}
</style>
1 Like
6

wow…Cathy …thank you so much for the detailed response.

After some experimenting, I was able to nail it down to gh-cover-title, and fixed the issue.

Thank you for teaching me how to fish !!!

1 Like
7

Glad to help! Happy Fishing!