Hemingway Rewritten- show something different in "site title" field of each page

  • Unknown's avatar

    I’m in the early stages of building a website for my business using the Hemingway Rewritten theme and I’m very new to all this CSS stuff. Any help would be appreciated!

    I know I can change the header image on each page, and I like how the site title field looks where it is (fading away as you scroll, and all), but what I’d like to do is have the title of each page display where the site title is. The site title, as it is now, is great for the home page but I’d like it to be a little more clear to visitors of the site what page they’re on (so the “About” page would show “About” where the site title is now).

    Sorry if this is a silly question, I’ve really tried searching around over the last few days and I’ve been getting nowhere.

    Site: https://davidcoxpianostudio.com/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Hi, although there are some “hacky” ways of doing this, it would mean that you would need to create specific CSS rules for each and every page. This would be an example for you about page.

    .page-id-3 .site-title {
    	visibility: hidden;
    	padding-top: 0;
    
    }
    .page-id-3 .site-title:before {
    	content: "ABOUT THE PIANO TEACHER";
    	display: block;
    	visibility: visible;
    	color: #fff;
    	position: relative;
    	bottom: -40px
    
    }

    The page id CSS class I’ve used is found in the opening body html tag for the page. In this case, that body tag starts out like this.
    <body class="page-template-default page page-id-3...
    You use that unique page CSS class to specifically target an individual page.

  • Unknown's avatar

    Thank you SO much! This worked perfectly and was exactly what I needed.

  • Unknown's avatar

    Awesome, and you are welcome!

  • The topic ‘Hemingway Rewritten- show something different in "site title" field of each page’ is closed to new replies.