Styling page title and post titles different

Resolved kitfreeman
(@kitfreeman)

2 years, 2 months ago

Hi. Is there a way to style page titles differently from post titles? For example, on the linked category page, ‘TRICKS OF THE MIND’ is the title of the page, and ‘WHAT DO WE HAVE ACCESS TO?’ is the title of a post from the category. I’d like to style them differently but can’t work out how to do it. I’d also like to apply the same page title styling to the titles of regular pages as well as category pages. Can anyone help, please?

The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)

Andrew Misplon
(@misplon)

2 years, 2 months ago

Hi Kit

Please, see https://siteorigin.com/unique-page-styling-custom-css-body-classes/.

#page-header .page-title will give you access to just the page title.

Thread Starter kitfreeman
(@kitfreeman)

2 years, 2 months ago

Thanks Andrew. I added this to my css

#page-header .page-title {
font-style: italic !important;
}

but it doesn’t seem to have had any effect.

Andrew Misplon
(@misplon)

2 years, 2 months ago

Thanks. Apologies, the selector should be: .page-header #page-title.
If you aren’t already, give the browser inspector tool a try.

Thread Starter kitfreeman
(@kitfreeman)

2 years, 2 months ago

Thanks! That works on the category page titles (now italicized), but not on the regular page titles, such as this https://www.keithfrankish.com/the-theseans/ Do they need a separate bit of css? (I’ve tried the browser inspector pane, but I don’t know how to find what I need in the mass of data there)

Andrew Misplon
(@misplon)

2 years, 2 months ago

Glad to hear you’re making progress. Have you perhaps tried the visual editor in SiteOrigin CSS for the second change?

Thread Starter kitfreeman
(@kitfreeman)

2 years, 2 months ago

I’m using the Vantage theme customizer, which shows a live preview of css changes but doesn’t indicate which css codes to use for page elements

Andrew Misplon
(@misplon)

2 years, 2 months ago

If you’re using the SiteOrigin CSS plugin, you can try going to Appearance > Custom CSS and clicking the eye icon at the top right of the Custom CSS field. Once in the visual editor, click the magnifying glass icon to close the bottom inspector panel. Use your website menu to navigate to the page you’d like to edit. Click the magnifying glass icon again to open the inspector and inspect the item you’d like to create a new CSS rule. A short video preview is available at https://siteorigin.com/css/.

Andrew Misplon
(@misplon)

2 years, 2 months ago

You could also give Kori’s tutorial a try: https://www.youtube.com/watch?v=nw9aDFjw0mQ.

Let us know how you get on. Thanks!

Thread Starter kitfreeman
(@kitfreeman)

2 years, 2 months ago

Ah great! I’ll try these. Many thanks for getting me going again!

Andrew Misplon
(@misplon)

2 years, 2 months ago

If you want to give it a quick try for the Page Title change I can standby?

Thread Starter kitfreeman
(@kitfreeman)

2 years, 2 months ago

Many thanks. I have to go now, but I’ll try it later and post an update here.

Andrew Misplon
(@misplon)

2 years, 2 months ago

Thanks; sounds like a plan. Chat then! Cheers.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Styling page title and post titles different’ is closed to new replies.

Tags