[Resolved] Customize author box

Home Forums Support [Resolved] Customize author box

Home Forums Support Customize author box

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1623384
    Sebastian

    Hi! I want to add to my page an author box like the one you can find in this web site.

    But, I want it to have padding, because the one of the example is to wide.

    Thank you for your help!

    #1623733
    David
    Staff
    Customer Support

    Hi there,

    does you site have an author box plugin installed ? If so send me a link so i can see the issue.

    #1623734
    Sebastian

    Hi, I don´t have a puglin installed, I thought it was possible to add the author box with coding.

    #1623862
    David
    Staff
    Customer Support

    This topic provides a code method:

    https://generatepress.com/forums/topic/custom-author-box-in-the-sidebar/#post-1538602

    Start there, and let us know how you get on.

    #1623970
    Sebastian

    I’ve already tried that method before I started this support topic and it is not the look I’m looking for, as you can see in the link I sent you. What I want is simpler just the picture on the center, the name of the author and the description; all this in a box with padding with a background color.

    I’m so sorry if it is something super simple to you, but I have not any knowledge of coding.

    #1623996
    Ying
    Staff
    Customer Support

    Hi Sebastian,

    If you are not familiar with coding, Block element with our plugin Generateblocks will make things easier.
    https://wordpress.org/plugins/generateblocks/
    https://docs.generatepress.com/article/block-element-overview/

    1. After installing the plugin, go to Appearence > Elements, add a Block element.

    2. Using Generateblcosk to create a structure like below screenshot. Set the whole container align center. You can play with the colors, typography, spacing to find the best fit for your site.
    https://www.screencast.com/t/vFfgv50Tc

    3. Choose Hook as block, choose generate_before_right_sidebar_content as block, choose location depends on which pages you want it to show.
    https://www.screencast.com/t/fiQgyV9eb

    Let me know how it works 🙂

    #1624861
    Sebastian

    Hi there Ying,

    I have two questions before i do this, 1. If i do what you told me, can I assign each post to an specific author? 2. If I can, how can I do it? Because we are multiple authors in the website.

    Thanks for your help

    Cheers

    #1625129
    David
    Staff
    Customer Support

    It is possible to assign different authors but currently that requires some code.
    It would be simpler to refine the HTML provided in the other article to this:

    <div class="author-box">
        <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
        <p class="author-title"><a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php printf( esc_attr( '%s', 'the author'), get_the_author_meta('display_name') );?></a></p>
        <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
    </div>

    That will display just the avatar, author name ( with link ) and their bio.

    Try that – and if you need the styling changing then share a link to the site and we can assist.

    #1626147
    Sebastian

    Thank you so much It worked pretty good.
    Please can you help me with the styling? What should I do to improve it?

    #1626515
    David
    Staff
    Customer Support

    Try this CSS:

    /* Add padding and background to box */
    .author-box {
        padding: 40px;
        text-align: center;
        background-color: #f6f6f6;
    }
    /* Avatar Border Radius */
    .author-box .avatar img {
        border-radius: 100%;
    }
    /* Style author title */
    .author-box .author-title {
        font-weight: 900;
        margin-bottom: 0.5em
    }
    /* Remove space below description */
    .author-box .author-description {
        margin-bottom: 0;
    }
    #1626782
    Sebastian

    Thank you David! It worked perfectly!

    #1627298
    David
    Staff
    Customer Support
    #1642906
    Sebastian

    Hi! Sorry to bother again, I’ve just realized that the author box is not looking good on mobile. To be specific, the author box isn’t showing the same styling on mobile. Please, is there something that I can do?

    #1643119
    David
    Staff
    Customer Support

    Can you share a link to where i can see the issue ?

    #1643146
    Sebastian

    Hi David, here you have the link.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.