Need help? Check out our Support site, then


Changing header image on just one page, origin theme

  1. I'd like to have a different header image on just one of the pages (blog vs static pages). I've made my logo the header on other pages using

    #site-title {
    background: url('img url');

    I've found thescaredpath's instructions to specify page id in the css to overwrite it but for the life of me I can't find page id in the source code... If anyone can help I'd greatly appreciate it! The page in question is http://kelihopter.wordpress.com/blog/

    Thanks so much!

    The blog I need help with is kelihopter.wordpress.com.

  2. Hi there!

    I've found thescaredpath's instructions to specify page id in the css to overwrite it but for the life of me I can't find page id in the source code

    Don't worry, I couldn't find it either :) The body tag's class doesn't include a page's id when it is used as a blog page.

    You can use this instead:

    body.blog #site-title {
        background: url('img url');
    }

    Usually the body class will include a page's id as well, but when a page is used as a blog page, the id is replaced with the "blog" keyword. So we use that instead.

  3. Thanks so much, hafizr! That makes perfect sense. However, I just realized that site-title make not be the way to go as the image I want to have in the header on the blog is 960px and I don't think "site title" can accommodate that (if you can have a look at the page now you'll see what I mean). So I think I would need to set "display: none" for site-title on this page and insert header. Will this mess where my navigation sits (it seems to be pushed down now)? Thanks so much in advance!

  4. thesacredpath
    Staff

    Hi, replace @hafizr's code with the following. It puts the image into #branding instead and floats it to the right. Make sure and narrow down your browser window to see how things look on narrower screens.

    body.blog #branding {
        background: url("http://kelihopter.files.wordpress.com/2014/05/interior-designer-toronto-blog-masthead.jpg") no-repeat scroll right top rgba(0, 0, 0, 0);
        height: 226px;
        width: 100%;
    }
  5. Thanks so much, thesacredpath, it worked like a charm!
    I have three, hopefully final issues that I'm struggling with. I hope I'm not abusing your kindness and patience asking for further guidance!

    1.) How do I reduce the vertical space between the header area and the main content area. I have margins set to 0 for site-title, menu and content but clearly I'm missing something.

    2.) How do I align the image gallery on the home page with site-title (logo; looking for left alignment)

    3.) Is there a way to bring the navigation above the header image in the blog http://kelihopter.wordpress.com/blog/

    Thanks so much in advance. You are an absolutely amazing support team, I am so impressed with the quality and speed of your replies!

  6. thesacredpath
    Staff

    1.) How do I reduce the vertical space between the header area and the main content area. I have margins set to 0 for site-title, menu and content but clearly I'm missing something.

    Add display: none to #site-description in your custom CSS and then also add the following as the above gets it too close.

    #main {
    top: 20px;
    }

    2.) How do I align the image gallery on the home page with site-title (logo; looking for left alignment)

    Add the following which limits the adjustment to 768px and wider screens/browser windows

    @media screen and (min-width: 768px) {
    .site-title {
    margin-left: 18px;
    }
    }

    3.) Is there a way to bring the navigation above the header image in the blog

    Because of the way the menu stacks on the left at 767px and narrower, it ends up overlaying the left end of the header image on the blog. We can move it up above the header image and limit it to 768px and wider screens by adding some stuff to the above. Try this instead of #2 and see what you think.

    @media screen and (min-width: 768px) {
    .site-title {
    margin-left: 18px;
    }
    body.blog #branding {
    margin-top: 60px;
    }
    body.blog #menu-primary {
    position: absolute;
    margin-top: 20px;
    }
    }
  7. thesacredpath
    Staff

    Oh, and you are welcome, and thanks for the compliment.

  8. Thanks again @thesacredpath! #1 worked beautifully, #3 is almost there - am I able to right align the nav?

    Nothing seems to happen when I do #2... Also, this issue is limited to the home page that has an image gallery on it and occurs at all resolutions (on other pages content is nicely aligned with the logo). My apologies for not being clear and thanks again!

  9. I'm seeing it right aligned now at 768px and wider. If you want to float it to the right at 767px and narrower, add the following:

    @media screen and (max-width: 767px) {
    #menu-primary .menu {
        float: right;
        margin-right: 5px
    }
    }

    The only thing I'm having an issue with is getting the text to align right when it is to the right.

  10. Wait, use this instead which also moves the menu up to where it is in top alignment with your logo image.

    @media screen and (max-width: 767px) {
    #menu-primary .menu {
        float: right;
        margin-right: 5px
    }
        #menu-primary {
            width: 200px;
            float: right;
            position: relative;
            top: -70px
        }
    }
  11. Thanks very much @thesacredpath! Life got busy and I havent had a chance to try your most recent suggestions but will this weekend.

    On another note, is there a way to move the comments box ("Leave a comment") from underneath the post title to after the post? (I've had people tell me they can't locate it!)

    Thanks so much,

    Ines

  12. Actually, never mind. I checked again and the form is down there... Not sure what's going on for some people... perhaps one too many beers on a Thursday night ;-)

  13. I think I know what the issue is. I display posts in their entirety in the excerpt (which is the way I like it), which is where people are most likely to read them (vs the actual post page). "Comments" is displayed right under the post title in this view (along with category, date etc.), which people seem to overlook. Is there a way to bring it down to under the post, the way many other blog designs handle it?

    Thanks so much in advance!

  14. To move the comments link down below the content, add the following. I included some font styling to make it a little more apparent and targeted it at the "blog" page only.

    .blog .hentry {
        position: relative;
        padding-bottom: 25px;
    }
    .blog .comments-link {
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 120%;
        font-weight: bold;
    }

    If you also want the comment link below the content on archives, categories and tags pages, then use the following.

    .blog .hentry, .archive .hentry {
        position: relative;
        padding-bottom: 25px;
    }
    .blog .comments-link, .archive .comments-link {
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 120%;
        font-weight: bold;
    }
  15. Thank you very much @thesacredpath. As always, it worked.

  16. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic