Changing location of Post Author

  • Unknown's avatar
    miriamnewman · Member ·

    I’m using the Sandbox theme with custom CSS for our blog, blog.leeandlow.comand would like to move the post author to the top of the post. Adding an author photo would be a bonus. I’m afraid that changing to a theme that has a top-of-post author listing will mess up the rest of the appearance—the blog needs to visually match our main site, leeandlow.com and Sandbox has allowed me to do that without fighting a theme’s looks—but I can’t seem to make the change using the CSS. I’ve tried adding relative and absolute positioning to that element, but nothing happens.

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    To move the author to the top right use this code:

    .post {position:relative;}
.post .entry-author {position:absolute; top:0; right:0;}

    To add an icon you’ll need to upload a small image for each author and add a line like the one following, changing the author name in the post class, the sizes and the URL each time:

    .post.author-miriamnewman .entry-author {background:url("URL") no-repeat 0 0; padding-left:40px; height:40px;}

  • Unknown's avatar
    hallluke · Member ·

    Something I just noticed! You might want to alter the top position in that first block of code for when you have a really long post title. Bringing it a bit lower should help.

  • Unknown's avatar
    miriamnewman · Member ·

    Thanks, this is really helpful! I succeeded in moving the post author to the top (haven’t saved it yet, so you won’t see a change on the blog) but moving it lower isn’t working. Any further ideas?

  • Unknown's avatar
    hallluke · Member ·

    Change the values for top and right to a different pixel value. You can also position in relative to the bottom and left edges too. Here’s an example:

    .post .entry-author {position:absolute; top:20px; right:5px;}

  • Unknown's avatar
    miriamnewman · Member ·

    Ha! That’s exactly what I was trying two days ago, and it wasn’t working… but mysteriously, today it worked. I’m confused, but not going to complain.

  • Unknown's avatar
    hallluke · Member ·

    Good to hear. If you don’t mind the title wrapping to two lines you could keep the author placed at the very top and restrict the width of the title with something like the code below. You have some non-breaking spaces in your titles so these may have an effect too.

    h2.entry-title {width:80%;}

    One more thing: just a suggestion but you might also want to set your header height to be a bit larger so if users increase the font size it doesn’t screw with the layout quite so much. I tried it with this code and I can increase the text size 3 times in FF (which makes your navigation take up two lines) and it still looks good:

    div#header {height:330px;}

  • The topic ‘Changing location of Post Author’ is closed to new replies.