WordPress.org

Ready to get started?Download WordPress

Forums

Gravatar in heading (3 posts)

  1. janvanarkel
    Member
    Posted 4 years ago #

    Hi all,
    A question from a newbee...
    - I added a gravatar to the heading of a posting
    - it works ok, but I'm not pleased with how it looks

    The code in index.php is:

    <div class="indent">
    <div class="title">
    <div class="bgr-left"><div class="bgr-right"><div class="bgr-bot">
    <div class="corner-left-top"><div class="corner-right-top"><div class="corner-left-bot"><div class="corner-right-bot">
    
    <h2>
    <a href="<?php the_permalink() ?>"
           rel="bookmark" title="Permanent Link to
           <?php the_title_attribute(); ?>">
           <?php the_title(); ?></a>
           <?php echo get_avatar( get_the_author_email(), '50' ); ?>
    </h2>
    <small>
           Gepubliceerd op <?php the_time('j F Y') ?>
           door <?php the_author_link() ?>
           in categorie <?php the_category(', ') ?>
    </small>

    Now the gravatar is placed right after the text of the title.
    I would like to have the gravatar completely to the right (on a fixed place).

    I think that somehow I should do this in 'style.css'. Right?
    For the comments I can see the following tag:

    .commentlist li .avatar {
    		float: right;
    		border: 1px solid #eee;
    		padding: 2px;
    		background: #fff; /*margin:0px 20px 15px 0px;*/
    		}

    So I suspect I should do something similar for a avatar in the heading.
    But how...?

    Any help is appreciated.
    Jan van Arkel

  2. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    you are on the right track:
    just change your code from:

    <h2>
    <a href="<?php the_permalink() ?>"
           rel="bookmark" title="Permanent Link to
           <?php the_title_attribute(); ?>">
           <?php the_title(); ?></a>
           <?php echo get_avatar( get_the_author_email(), '50' ); ?>
    </h2>

    to: (move the gravatar out of the h2 tags, and surround it with a new div, class .gravatar)

    <div class="gravatar"><?php echo get_avatar( get_the_author_email(), '50' ); ?></div>
    <h2>
    <a href="<?php the_permalink() ?>"
           rel="bookmark" title="Permanent Link to
           <?php the_title_attribute(); ?>">
           <?php the_title(); ?></a>
    </h2>

    and in style.css add whatever styling you want:
    .gravatar { float:right; margin: 10px 10px 10px 10px; background-color: #eee; }

  3. janvanarkel
    Member
    Posted 4 years ago #

    Great!

    Thanks for helping out.

    Jan

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.