Pique theme: how to NOT make feature image the header for individual blog posts

  • Unknown's avatar
    whitfrancene · Member ·

    When I upload a featured image to a blog post, it makes it the background for the panel on the blog page, which I like. However, this then turns the feature image into the header on the individual blog post’s page, which I do not want. But when I delete the featured image, it makes the panel blank on the blog page.

    https://cloudup.com/cYTv5H7hJXd

    How do I keep the feature image for the panels on the blog page, without it become the header for individual blog posts? I really like the header on the blog page (succulents with my logo on top), and I would like to keep that my header on individual blog post pages as well. How do I achieve this?

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

  • Unknown's avatar
    timethief · Member ·

    This is the Support Forum not the CSS Forum.

    See here for details on purchasing an annually renewable upgrade https://wordpress.com/pricing/ that contains a custom design upgrade required for CSS editing.

    Custom design – Frequently Asked Questions such as: I’m not sure if Customize is right for me. Can I try before I buy?
    http://en.support.wordpress.com/custom-design/#frequently-asked-questions
    http://en.support.wordpress.com/custom-design/
    http://en.support.wordpress.com/custom-design/editing-css/
    http://en.support.wordpress.com/custom-design/custom-fonts/

    Note 1: Once you have the required upgrade you can use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can create a thread that will appear in the CSS Forum where you will get the help you need with CSS editing.

    Note 2: You can also post there prior to purchasing an upgrade to get an answer to whether or not what you want to do can be accomplished via CSS editing.

  • Unknown's avatar
    timethief · Member ·

    Oops! I said Support Forum above but meant to type Themes Forum. You need to create your custom design threads into the CSS Forum.

  • Unknown's avatar
    whitfrancene · Member ·

    I was told by a staff member / happiness engineer to put it under themes.

  • staff-loquaciousloon · Staff ·

    Hi @thecranecollective!

    Not to worry – we check both the theme and the CSS channel, so you’re in a good spot :)

    Is your goal to have the site’s header image appear at the top of your posts? Or no header image at all?

  • Unknown's avatar
    whitfrancene · Member ·

    I don’t want the feature image I upload for my posts to turn into the header image on the individual post page. BUT I want to be able to upload a feature image still because I like that it becomes the background on my panels on my blog page.

    Does that make sense? I feel like I’m speaking in circles haha

  • Unknown's avatar
    whitfrancene · Member ·

    A happiness engineer gave me this code which takes away the header entirely on my individual posts page. but keeps the feature image as the background for my panels. However, it makes the header on my individual posts look funny (my logo is hidden under the menu bar).

    http://local-cloudup.com:3000/czQrXEx9I0S

    .single .pique-header {
    display: none;
    }

  • staff-loquaciousloon · Staff ·

    From what you’ve described it sounds like you do not want any header image on your individual posts – not the featured image or the site header image.

    Just the logo. :)

    In addition to the CSS you’ve just shared, try adding the following:

    .single .site {
	padding-top: 100px	
}

.single #masthead {
	background: none;
}

.single .site-navigation-wrapper {
	position: fixed;
}

    That should do the trick, but if it gives you any trouble, let me know!

  • Unknown's avatar
    whitfrancene · Member ·

    That gets rid of the header but overlaps the menu and the logo. See picture below.
    https://cloudup.com/c2vZlfkHzK3

    How do I move the menu down so that it is below my logo?

  • staff-loquaciousloon · Staff ·

    Oh no! Typo in my third CSS style. I used a dot instead of a pound!

    Here’s the corrected style (it’s already saved on your site) with an added improvement as well:

    .single #site-navigation-wrapper {
	position: fixed;
	top: 0;
}

    Let me know how it looks!

  • Unknown's avatar
    whitfrancene · Member ·

    That looks great, thank you!

    Is there a way to add a line above the blog post so as to separate the logo / “header” of the page from the content below? See example
    https://cloudup.com/cCBGQ8nfDTU

    I’d want the line to be the same color as the other lines on the page. I don’t care if it’s a line connected to the first sidebar line so that it makes one long line like in the picture example. Or, if it’s a separate line above the blog post section (same width as blog post section) on the same level as the first sidebar line.

  • Unknown's avatar
    whitfrancene · Member ·

    Also, this doesn’t translate 100% to mobile… I don’t know how to do a screenshot of what it looks like on mobile but the logo is super low / close to the post & content that it looks funny.. :/

    I love how it looks on desktop though! Especially when I can have the line, it’ll look great. Just want it to translate to mobile / tablet too.

  • staff-loquaciousloon · Staff ·

    Yep, I see what you mean. The fixed-position header interacts a little differently on mobile.

    I also added some CSS to account for the WordPress.com Admin Bar, so you’ll still see your navigation on various screen sizes when you’re signed in (it was disappearing behind the admin bar on mobile before.

    Try adding this (got a little more complex this time around, as we’re juggling more conditions with screen sizes and log in states)

    @media screen and ( max-width: 767px) {
    .single .site {
        padding-top: 70px
    }
    .single.admin-bar #site-navigation-wrapper {
        top: 43px
    }
    .single.admin-bar .site {
        padding-top: 83px;
    }
}
@media screen and ( max-width: 1023px) {
    .single .site-content {
        padding-top: 40px;
    }
}
@media screen and ( max-width: 481px) {
    .single.admin-bar #site-navigation-wrapper {
        position: absolute;
        top: -83px
    }
}
  • Unknown's avatar
    whitfrancene · Member ·

    Yes that works great and looks great on mobile now! Thanks :)

    Is there a way to add a line above the blog post so as to separate the logo / “header” of the page from the content below? See example
    https://cloudup.com/cCBGQ8nfDTU

    I’d want the line to be the same color as the other lines on the page. I don’t care if it’s a line connected to the first sidebar line so that it makes one long line like in the picture example. Or, if it’s a separate line above the blog post section (same width as blog post section) on the same level as the first sidebar line.

  • staff-loquaciousloon · Staff ·

    This should work by targeting single posts and also pages that don’t use the panel layout. If you notice it adding the line in the wrong spots it can be tweaked :)

    .single #primary,
.page:not(.home) #primary {
	border-top: 2px solid #866327;
    padding-top: 20px;
}

    I’ve just realized we’ve wandered a bit far from the original thread topic – if you have new questions, can you open a new thread to keep them organized? :)

    https://en.forums.wordpress.com/forum/themes#postform

  • The topic ‘Pique theme: how to NOT make feature image the header for individual blog posts’ is closed to new replies.