[Resolved] I want to add author box like this

[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

[Leo]

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

[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.

[Leo]

Try this for your content first:

<div class="custom-author-box">
   content here
</div>

[Amol Chavan]

Added this? What to do next?

[Elvin]

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.

[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.

[David]

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

[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.

[Tom]

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 🙂

[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.

[Tom]

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;
    }
}

[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

[Leo]

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.

[Amol Chavan]

Thank you. Its working as expected.

[Author]

Posts