Twenty Eleven
Home page (4 posts)

  1. mattzarr
    Posted 4 years ago #

    I would like to have the home page an entire image and for it to take up all the white space. Could anyone suggest something I could do to make the picture larger and indent the navigation bar over to the right. The links below should help show what I am looking to do...

    Thanks in advance !!! :)


    What I want to do to my site:


    and what it looks like now

  2. granville
    Posted 4 years ago #

    Hi Matt Zarr
    It doesn't need many changes. I don't know how you've structured your site, but the best thing you can do is to put an id on your home page <body> tag so any styling you do on the home page doesn't change for the rest of the site.

    So in your header.php file find the <body> tag and replace it with

    <body <?php if (is_home()) { echo " id=\"home\""; } ?> >

    Now we need to make everything in the white space fill the screen, which we do with using a width of 100%.

    So you need to add the following to your stylesheet:
    #home #container, #home #content, {width: 100% !important; margin: 0 !important; padding: 0 !important}

    Now we need to make the image fit the space by adding:
    #home img {width: 100% !important; height: 100% !important; }

    However, the width to height ratio of your image means that it's now huge...so I'd suggest changing this in photoshop so it doesn't take up so much space.

    Lastly, you should take the text off the image and actually write that text in HTML. These means search engines will find it, it will be more accessible, and it will look better.

    Hope this helps.


  3. esmi
    Forum Moderator
    Posted 4 years ago #

    Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. Create a child theme for your changes.

  4. granville
    Posted 4 years ago #

    Good point Esmi - sorry didn't think about the fact that we were editing the core theme.
    Follow Esmi's guide and then use the style changes above.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic