Need help? Check out our Support site, then


Header size change in twenty eleven

  1. I want to change the header width to a bigger size and reduce the height. I have upgraded to custom design, could someone tell me how it can be done?

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

  2. Seems to me you'd need to adjust the width of the entire page, not just the header. This will make the page, and therefore the header, in Twenty Eleven wider:

    #page {
      max-width: 1200px;
    }

    To adjust the height, you may have to swap out the header and set one manually. What height were you looking for?

  3. designsimply,
    I did that. still it won't work
    wanted to use a header of 1200x200

    page width is set to 1200, however, when I upload a header of 1200x200, it is cropping or stretching it out of proportions.. just going crazy!

  4. The built in header uploader has a set specific height and width that comes from the theme. To get around that, you should create an image the size you would like to use on your computer, upload it into your media library, copy down the image URL, and then use CSS to swap out the built in header with your custom one.

    Here is some CSS you can use if your image is 1200 x 200 pixels. If you create an image that's a different size, adjust the numbers accordingly.

    #branding img {
        display: none;
    }
    #branding > a {
        display: block;
        width: 1200px;
        height: 200px;
        background: url(YOUR_IMAGE_URL) no-repeat;
    }

    Replace YOUR_IMAGE_URL with an image URL after you upload a custom image into your media library. Note that if you make an image smaller than 1200px, then you can adjust the #page max-width value to match.

    Also try taking out the "no-repeat" part of that block and using the image you currently have set as the header image so you can see how it would look as an alternative to uploading a separate image:

    #branding img {
      display: none;
    }
    
    #branding > a {
      display: block;
      width: 1200px;
      height: 200px;
      background: url(http://justhomemade.files.wordpress.com/2011/12/cropped-untitled-export3.jpg);
    }
  5. designsimply,
    You r the best! Wow! it worked..
    Couldn't find the right #branding position at the first go, as wordpress strips all the coments off of CSS code..

    BTW, I have a similar image issue with widget background. Using this code and the image is not visible: Could you please help..

    .widget {
    clear:both;
    background-image:url('image_url');
    background-position:50% 100%;
    background-repeat:no-repeat;
    margin:0 0 1em;
    padding:0 0 4em;
    }

  6. Are you trying to change the background of every widget? Can you post the real image link instead of "image_url" so I can see how big it is?

  7. designsimply,

    I just want to have an image as the sidebar divider, it is not too big.

    http://justhomemade.files.wordpress.com/2012/02/sidebardiv.png

    I have done that for the post divider as well in a similar way and it works fine. Have a look.

  8. Find this CSS block in your custom CSS:

    .featured-post .feature-text:after,.featured-post .feature-image.small:after {
    content:' ';
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0);
    background:linear-gradient(top,rgba(255,255,255,0) 0 100%;
    width:100%;
    height:45px;
    position:absolute;
    top:230px;
    }

    Remove this line:

    background:linear-gradient(top,rgba(255,255,255,0) 0 100%;

    Add this:

    .widget {
    clear:both;
    background-image:url('http://justhomemade.files.wordpress.com/2012/02/sidebardiv.png');
    background-position:50% 100%;
    background-repeat:no-repeat;
    margin:0 0 1em;
    padding:0 0 4em;
    }

    Does that fix it for you?

  9. designsimply,

    Spot on! worked like magic.. Thanks a ton!

  10. Yay! That was a tough one.

  11. Thanks a bunch Designsimply..

    Had posted few more questions to Support, never got a reply.
    Anyways, could you please help me with this:

    1) Author name is not visible in the comments meta section for any of the author's (my) comments.
    I've checked all the author sections in css, but couldn't figure out how to..

    2) Is there a way to put content of links widget into the custom menu somehow?

  12. I am trying to remove the main page menu border, the gradient when the menu page is highlighted and the rectangle surrounding the sub menu pages when the main menu item is highlighted.
    OR just change all of these options to white so so that they are camouflaged into the background. I managed to change the menu bar to white on my own, but for some reason I'm struggling with the rest.
    Any advice would be greatly appreciated!
    My site is under major construction, please excuse the current mess ;)
    complimentsfromsarah.com

  13. 1) Author name is not visible in the comments meta section for any of the author's (my) comments.

    I searched for the latest comment by you, and I found this one: "That’s a neat one Vaishali! Will keep it in mind for the next used wedge of lemon.." at http://justhomemade.net/tiny-tiptionary/#comment-1648

    Your iradpress account display name is set to "Radhika @ Just Home Made" and I can see that display name listed just fine in the latest comment by iradpress.

    If it's still not working for you, can you provide a link and the comment text where you expected to see a name but the name isn't working?

  14. 2) Is there a way to put content of links widget into the custom menu somehow?

    Possibly, yes. However, I would recommend adding the links to the custom menu directly. You can do it with a custom menu item: http://en.support.wordpress.com/menus/

  15. For complimentsfromsarah:

    I am trying to remove the main page menu border, the gradient when the menu page is highlighted and the rectangle surrounding the sub menu pages when the main menu item is highlighted.

    http://complimentsfromsarah.com/ is using the Twenty Eleven theme. I don't see a border on the menu or the highlighting for menu items when they are hovered over or selected. It looks like you were able to sort this out on your own, and if you'd be willing to post back with the CSS you used, it would be great to have it listed with your question here in the forums.

  16. I did end up figuring it out on my own... this is all of the CSS I used on the menu bar

    #access {
    background:white;
    -webkit-box-shadow:rgba(0,0,0,0) 0 0 0;
    -moz-box-shadow:rgba(0,0,0,0) 0 0 0;
    box-shadow:rgba(0,0,0,0) 0 0 0;
    }

    #access a {
    color:#515151;
    font-size:14px;
    display:block;
    line-height:3.333em;
    text-decoration:none;
    padding:0 1.2125em;
    }

    #access a:focus {
    background:white;
    }

    #access li:hover > a,#access ul ul :hover > a,#access a:focus {
    background:white;
    }

    #access ul ul a {
    background:white;
    border-bottom:0;
    color:#515151;
    font-size:14px;
    font-weight:normal;
    height:auto;
    line-height:1.4em;
    width:168px;
    padding:5px 15px;
    }

  17. Cool. Thanks so much for posting this!

  18. I have not figured out if there is a way to modify the sub-header to drop down and list horizontally instead of a vertical list... any clue if that is possible?

  19. This depends quite a lot on the theme, but it's probably possible. To make sure I understand, are you trying to change the entire top navigation menu in the Twenty Eleven theme from horizontal to vertical? Or just the submenus that appear below the menu when you hover?

    If you are trying to change the whole menu, I would recommend creating a custom menu that is not set as primary and adding it to the sidebar through Appearance → Widgets.

    If you want to make the dropdown submenus in Twenty Eleven horizontal instead of vertical, that might take a bit of work and it wouldn't be flexible because you would need to set the widths of some of the elements exactly in order to make it work. Try this CSS as an example starting point:

    #access ul ul {
    width: 300px;
    }
    #access ul ul li, #access ul ul a {
    width: 100px;
    min-width: 100px;
    float: left;
    }
  20. designsimply,

    Before I could come back and post, I saw your reply. I figured it out (author name part) myself and fixed it..

    This was the culprit, it was set to display: none earlier

    .commentlist .children li.comment .fn {
    display:inline;
    }

    Thanks a bunch!

  21. Also, I was trying all I could to change the color of the comment content by author. Couldn't find which one will hit the spot.. None of these work:

    .commentlist > li.bypostauthor {
    background:#fff;
    color:#6D8A24;
    }

    .commentlist .children > li.bypostauthor {
    background:#fff;
    color:#6D8A24;
    }

    can you please tell me what will?

  22. You are on the right track, the reason those examples didn't work is because, in this case, there is some more specific CSS which sets the paragraph color and it is overriding the CSS you tried. To make your rule more specific, try the following:

    .commentlist .children > li.bypostauthor .comment-content p {
    color: #6D8A24;
    }

    Note that this will change any *paragraphs* in comment content by the post author. If you would also like to change the comment author text and links*, you would want to do something like this instead:

    .commentlist .children > li.bypostauthor .comment-content p, .commentlist .children > li.bypostauthor .comment-author, .commentlist .children > li.bypostauthor .comment-author a {
    color: #6D8A24;
    }

    * You might not want to change the comment author links, in which case you would want to remove the ", .commentlist .children > li.bypostauthor .comment-author a " part of the rule above.

  23. Designsimply,

    SPOT ON! You're the best! Thanks a million...

  24. Cheers :)

  25. Thanks designsimply, I figured it out a bit on my own, and I'm not exactly sure how. I plugged in your code and it actually did the same thing!
    I am still trying to remove the sub-menu's border along the bottom and I'm stumped. Any advice on how to remove it?
    Thanks!
    http://complimentsfromsarah.com/

  26. Figured out the mystery box shadow as well...

    #access ul ul {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    }
  27. Nice work!

Topic Closed

This topic has been closed to new replies.

About this Topic