Support » Theme: Untitled » How to Remove the header from posts in Untitled Theme?

  • Resolved kelibzon

    (@kelibzon)


    Hi guys! I am a bit new on WordPress. I installed the untitled theme for my blog earnsmartonline.com and currently, the header appears on all posts, which makes it to overlap with the featured image.

    I would like the header to be on the home page only but not on the posts (blog page). Each post should have the featured image in place of the header just like on this site that uses the same theme: allthingsebonybrown.com. Any simple way to fix this issue? I really appreciate your feedback 🙂

    Kelibzon

Viewing 15 replies - 1 through 15 (of 18 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Hi Kelibzon, I’m not able to see your site as it says it’s down for maintenance. Is it possible to let me see it?

    Hi Kathryn. Sorry, I had forgotten to remove the offline mode because of some changes I’ve been doing. But right now, it’s online; please check it out and try to click on the posts.

    You’ll realize the header appears just after the featured image and I would rather only the featured image appeared as the header and then the main header moved to the home page. I really appreciate your help!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Thanks! This bit of CSS should hide the header on your single (individual) posts:

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

    An easy way to add this CSS without touching your theme is through Jetpack. Just activate the Custom CSS module if it’s not already active, and paste this CSS there. This way, your CSS won’t be overwritten when you update the theme.

    Let me know how it goes!

    Hi Kathryn. Thanks for your great feedback! Now, where exactly do i paste this code. Is it under editor > single post (single.php) or how do i know if the custom CSS is active or not? Sorry if this sounds like a no-brainer but i am not very familiar with coding but I can edit it under guidance. Thank you.

    I am trying to follow through the link you game me on custom css to fix this issue. I hope this will help out. I will keep you posted shortly.

    Hi Kathryn. I have come across the following in the CSS editing window:

    /*
    Welcome to Custom CSS!
    
    CSS (Cascading Style Sheets) is a kind of code that tells the browser how
    to render a web page. You may delete these comments and get started with
    your customizations.
    
    By default, your stylesheet will be loaded after the theme stylesheets,
    which means that your rules can take precedence and override the theme CSS
    rules. Just write here what you want to change, you don't need to copy all
    your theme's stylesheet content.
    */

    Now, do I simply paste the code you gave earlier below this message?

    Thanks
    Kelibzon

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Now, do I simply paste the code you gave earlier below this message?

    Yes, exactly. 🙂

    Whaat! It has worked out like crazy 🙂 I was a bit slow to effect the changes because CSS usually delicate and it messed me up a while ago.

    Now, one more thing: My header on the home page has some a black padding on the left side yet i uploaded an image, which should fit on the header window exactly (the image width is 1440px). I would like the header to cover that section from one end to the other end.

    Lastly, the post images (now appearing as individual post headers)seem a bit huge and a bit cut off at the top section. Is there a way of auto resizing this or how do i adjust that so that they appear as clear as those in allthingsebonybrown.com?

    Thank you!
    Kelibzon

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Hi Kelibzon, this code should stretch out your header image:

    .site-header img {
    	max-width: none;
    	width: 100%;
    	height: auto;
    }
    
    #masthead {
    	max-width: none !important;
    }
    
    #masthead #logo {
    	float: none !important;
    }
    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    If you also then want to re-align your menu, you can add this as well:

    .nav-wrap {
         float: none ! important;
         margin: 0px auto ! important;
         width: 1000px ! important;
    }
    
    .main-navigation {
         float: left !important;
    }

    Thanks a bunch for the info Kathryn! A quick question: where exactly in the editor should I post the codes you just sent?

    Thanks again!
    Kelibzon

    esmi

    (@esmi)

    Forum Moderator

    At the bottom of your Custom CSS file.

    Hi esmi. Thanks for your great input here:) I have pasted the code there and I can see a warning saying “Be careful when using important declaration”.

    Di ignore this warning and save the changes?

    esmi

    (@esmi)

    Forum Moderator

    Yes.

    Thanks a lot! This forum is extremely amazing with great experts. My issues are all solved. Did i mention all the codes Kathryn suggested worked out perfectly? My site is now looking awesome! In case of anything, I’ll be back 😀

    Cheers!
    Kelibzon

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘How to Remove the header from posts in Untitled Theme?’ is closed to new replies.