[Resolved] I want to add author box like this

Home Forums Support [Resolved] I want to add author box like this

Home Forums Support I want to add author box like this

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1560756
    Amol Chavan

    Hello Team, I appreciate all the Generatepress support team for providing excellent support. I would like to customize the Author box as shown as per the attachments. Here are the screenshots: 1. Desktop View: https://ibb.co/jM7PpDJ 2. Mobile View: https://ibb.co/BGhPsLP The main importance here is that the Author box left and right side should touch to the blog post page layout, as shown in the desktop & mobile. Here is the URL of my blog. Refer to any of blog post: ttps://www.growthfunda.com/blog

    Thanks

    #1561664
    Leo
    Staff
    Customer Support

    Hi there,

    How are you adding the author box currently?

    The style is currently all added as inline-style with no specific class to target so we cannot overwrite unfortunately:
    https://www.screencast.com/t/zBoEMyQs9

    #1561748
    Amol Chavan

    Currently I have added author box by pasting code in Elements > Hooks. For code what I did is: click on new post > add image in the post with text > align image to left. After that I went into post HTML area tab to grab HTML code and then I pasted that code into the Elements > Hook. I have provided code into below private area for ref. Feel free to share fresh code.

    #1562359
    Leo
    Staff
    Customer Support

    Try this for your content first:

    <div class="custom-author-box">
       content here
    </div>
    #1562742
    Amol Chavan

    Added this? What to do next?

    #1562847
    Elvin
    Staff
    Customer Support

    Hi,

    You can try this code on your Hook element and set the display rule to blog, archive and search pages. Make sure “Execute PHP” is checked.

    <?php $author_id = get_the_author_meta( 'ID' ); ?>
    <div class="custom-author-box">
    	<div class="author-image"> <?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?> </div>
    	<div class="author-details">
    		<h3 class="author-name"> <?php echo get_the_author_meta( 'display_name', $author_id ); ?></h3>
      	<p class="author-desc"> <?php echo get_the_author_meta( 'description', $author_id ); ?></p>
    	</div>
    </div>

    Then add this CSS:

    .custom-author-box{
    	display:flex;
    }
    .custom-author-box .author-image{
    	padding:0 10px;
    	width:auto;
    	
    }
    
    .custom-author-box .author-image img{
    	border-radius:50%;
    }
    
    .custom-author-box .author-details .author-name{
    	font-weight:bold;
    }
    
    .custom-author-box .author-details .author-name, .custom-author-box .author-details .author-desc{
    	margin-bottom: auto;
    }

    You can also add in <a title="www.facebook.com" href="https://www.facebook.com/groups/growthfunda/" rel="noopener nofollow"><span style="color: #ff6600">FREE Facebook Community</span></a> on the bottom if you require.

    But you’ll have to create a custom field for the dynamic social link because get_the_author_meta() doesn’t have a field for that by default.

    A wise man once said:
    "Have you cleared your cache?"

    #1563144
    Amol Chavan

    Added this but it looks very different not as I expected as mentioned above, i.e.1. Desktop View: https://ibb.co/jM7PpDJ 2. Mobile View: https://ibb.co/BGhPsLP

    1. The author’s image is too small now.2 Image is not vertically centered. It showing an image at the left top. 3. Also on mobile, it’s not showing as expected above. 4. Background color of the Author box is missing. For your ref. sharing the link of a blog post like which I am expecting.

    #1563628
    David
    Staff
    Customer Support

    Can you share a link to a post where we can see the author box.

    #1565310
    Amol Chavan

    Here is the link to my blog page: https://www.growthfunda.com/blog/ You can check any of the blog posts for the Author. And I’m expecting the author box like this: 1. Desktop View: https://ibb.co/jM7PpDJ 2. Mobile View: https://ibb.co/BGhPsLP Sharing the Link of this blog in the below private area.

    #1566461
    Tom
    Lead Developer
    Lead Developer

    From what I’m seeing you have the same layout as your examples – what’s left to do, exactly? While we’re happy to help with custom code, we can typically only give nudges in the right direction vs fully designing things.

    Let me know 🙂

    #1566623
    Amol Chavan

    These things are missing:
    1. The author’s image is too small now.2 Image is not vertically centered. It is showing an image at the left top. 3. Also on mobile, it’s not showing as expected above. 4. Background color of the Author box is missing.

    #1567678
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .custom-author-box .author-image {
        width: 200px;
        margin-right: 10px;
    }
    
    .custom-author-box {
        display: flex;
        align-items: center;
        background: #000;
        color: #fff;
        padding: 20px;
    }
    
    .custom-author-box a,
    .custom-author-box h3 {
        color: #fff;
    }
    
    @media (max-width: 768px) {
        .custom-author-box {
            display: block;
        }
    
        .custom-author-box .author-image {
            float: left;
            width: auto;
        }
    }
    #1571711
    Amol Chavan

    It’s very better than the previous one, and we are close to as expected. Here is how it looks after your code: https://bit.ly/2VTF0yo Just two things needed: 1. Reduce the space between Author name Title and Description 2. Remove the Author box padding. It should touch to the page layout like this: https://ibb.co/jM7PpDJ

    #1571881
    Leo
    Staff
    Customer Support

    Try this:

    .custom-author-box {
        margin-left: -30px;
        margin-right: -30px;
    }
    .custom-author-box .author-name {
        margin-bottom: 0;
    }

    Please keep in mind that the purpose of this forum is to help with any theme related question and not to provide complete custom HTML and CSS solution like this topic.

    Thanks for your understanding.

    #1572270
    Amol Chavan

    Thank you. Its working as expected.

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