Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Twenty Twelve Change Header Logo Location and Border?

  1. scottfillmer
    Member

    I love the new update to the twenty twelve theme, but I'm trying to do a few customizations that I can't figure out. I have paid for the custom them options etc on WP.

    1. I want my header logo to be placed in the upper right corner of the theme, not below the menu, which seems like a very odd location. If it can't go in the upper right corner, upper left is fine with using no header text?

    2. I want to remove the border around the header logo only, not all the images. It looks great on the blog images, but looks terrible on the header logo.

    3. How in the world do I keep the box at the bottom of the page that pops up that says "custom twenty twelve theme by wordpress" once you scroll down. I paid for no ads on my site, and this obscures the bottom of the page.

    4. How do I use the custom boxes that show on your live demo at http://twentytwelvedemo.wordpress.com/2011/07/07/a-short-post/ and http://twentytwelvedemo.wordpress.com/2012/03/23/dont-stop-questioning/ which seem like custom blockquotes, but those don't appear on any menu in the text editor.

    5. On the about.me widget used on the homepage template, is there any way I can get the text to wrap around the image, which is a bit overpowering.

    THANKS for the answers to the above questions. I love the update to this classic theme, it's hard to find a great minimalist theme design that's highly functional, thanks. Scott

    The blog I need help with is scottfillmer.com.

  2. scottfillmer
    Member

    I was able to take care of #2 on my life using this code in case someone else is looking to do the same thing

    img.header-image {<br /> border-radius:0;<br /> box-shadow:0 0 0 rgba(0,0,0,0);<br /> }

    Still looking for the answers to the other items, less #5 which I was able to just code manually and skipping the precoded about.me page.

    If anyone has an idea about #1, #3, and #4 above I would be much appreciative. Scott

  3. timethief
    Member

    Hi there,
    This upgrade comes with Staff support. Please be patient while waiting.

  4. fauxionista
    Member

    Like Scott, I would like the to know answers to his questions 1 and 2 as I am trying to figure that out, too. I also have paid for the upgrade to gain access to my CSS sheet.

    Thanks!

    fauxionista.com

  5. scottfillmer
    Member

    @timethief thanks for the info...

    I will say at this point, #2 I was able to answer above with adding the code to custom css sheet, #3 seems to have disappeared after I changed the option to not infinitely scroll (though I kinda like that feature), and #5 I custom coded.

    #1 is still a mystery to me, but I know it's just a matter of adding the correct custom css in the stylesheet whatever that is, and #4 should be something simple, but still can't figure it out.

    Thanks WP, Scott

  6. fauxionista
    Member

    Thank you for your update, Scott. I was able to remove the borders on my header logo using the code that you shared. :)

    Now to wait to hear from the staff on question 1!

  7. zandyring
    Staff

    I'm not staff, but I think I can help.

    First we'll position the header image absolutely, so it "sticks" to specific place on the page. To do that, add this to your CSS stylesheet:

    img.header {
position: absolute;
top: 60px;
}

    This tells the image that it is going to be positioned in a specific spot, no matter what the other CSS says, and it's going to be 60px down from the top.

    Now, you have to budge your menu down so that there isn't an overlap. To do so, add this:

    .site-header {
padding-top: 5rem;
}

    This adds 5 relative ems of padding to the top of your menu bar, so that there's room for the image/header.

  8. scottfillmer
    Member

    @zandyring

    thanks for the info... that worked but I had to adjust a few things, just in case someone else is using this to do the same thing...

    img.header-image {
position: absolute;
top: 110px;
}
.site-header {
padding-top: 5rem;
}

    Part of that is just adjusting the margins, but the image header which was listed as

    img.header {

    should be shown as

    img.header-image {

    I know that's pretty obvious but I post that just in case someone else is looking at this code. THANKS so much for the help, that worked great! Scott

  9. scottfillmer
    Member

    ok, I take that back... it worked ok for Safari, but not for Firefox, I just can't get the margins to work for both, and there isn't a real good combination for both where both look ok, either one looks all borked up and the other one is ok or they both look moderately poor?

    Any suggestions?

  10. scottfillmer
    Member

    ok, well some micro moving around between browser to browser this is what seemed to work the best, but it will all depend on what size your header image is, mine is not very tall at 75px or so.

    img.header-image {
	border-radius:0;
	box-shadow:0 0 0 rgba(0,0,0,0);
	position:absolute;
	top:70px;
}
.site-header {
	padding-top:7rem;
}

  11. scottfillmer
    Member

    I've got everything on my list now except #4, would love to know the answer to that one. Wondering if this has something to do with the chosen "format", i.e. whether you choose standard, aside, image, link, quote, or status? Any thoughts?

    4. How do I use the custom boxes that show on your live demo at http://twentytwelvedemo.wordpress.com/2011/07/07/a-short-post/ and http://twentytwelvedemo.wordpress.com/2012/03/23/dont-stop-questioning/ which seem like custom blockquotes, but those don't appear on any menu in the text editor.

  12. timeimage
    Member

    I just wanted to say thanks for this information on this thread – it's been really helpful.

  13. designsimply
    Happiness Engineer

    For #4, those are using what is called post formats.

    This one is an "Aside" post format:
    http://twentytwelvedemo.wordpress.com/2011/07/07/a-short-post/

    This one is text inside a "blockquote" element (or an indented paragraph) in a "Quote" post format:
    http://twentytwelvedemo.wordpress.com/2012/03/23/dont-stop-questioning/

    The visual editor has an indent button, see row 2 number 10:
    http://en.support.wordpress.com/visual-editor/#row-2

    You can find out more about post types in general here:
    http://en.support.wordpress.com/themes/post-formats/

    Themes that support them have specified styles for various different formats.

  14. designsimply
    Happiness Engineer

    Nice work on the other pieces of the puzzle btw!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags