[Resolved] How to add author box and notification bar

[Swadhin]

Hi there,

1) I was always wondering how to add author box on GP themes and now I saw this GP site using the author box.

How can I add it to my own site. Plus on my site (given below) the author link (that appears below post title along with date) is redirecting to the homepage and not my post archives. How to solve this?

2) I want to add a narrow notification bar on my blog. I am not able to that (the text doesn’t allign and other issues). How do I do that? To give you an idea, I want something like this (the narrow one with yellow background).

Thank you 🙂

[David]

Hi there,

1. code used for the Author box:

<div class="author-box">
	<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
		<h5 class="author-title"><?php printf( esc_attr__( 'About %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5>
		<div class="author-summary">
			<p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
			<div class="author-links">
				<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">...</a>
			</div>
		</div>
</div>

It is added to a Hook Element. Hook: after_content Exectute PGP checked and a priority of 20.

The CSS For it is:

.author-links a {
    font-size: 3em;
    line-height: 0.5em;
    float: right;
}

.author-box {
    padding: 4%;
    margin-top: 60px;
    font-size: 0.8em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.author-box .avatar {
    width: 30px;
    border-radius: 100%;
    margin-right: 20px;
}

h5.author-title {
    margin-bottom: 0.5em;
}

2. The redirect of author links sounds like a Yoast issue:

https://wordpress.org/support/topic/author-page-redirecting-to-homepage-due-to-yoast-2/

3. You can use another Hook Element – say after_header to add the content. If you want to add it to the site then i can look and see what the issue are

[Swadhin]

Hi David,

This worked nicely thanks. 🙂

1) Since I had no idea how an element is used, I first enabled the PHP for the entire site and got the author box displayed everywhere even multiple times in the blog page. Then I enabled it in the single pages only and thinking this is the correct placement. Please enlighten if this is the correct placement and or if it might cause an issue (somewhere where I have not seen on the site).

Secondly and most importantly, I hadn’t used elements feature till this time. Will enabling it delete or override or affect previous features that were there before elements (like hooks and headers)?

Thirdly, the gravatar isn’t displaying in the author box. And the read more (3 buttons) are way too close to the border. How to solve this?

2) Thanks for the Yoast one, I now know what causes it. 🙂

3) No, nothing like having on a specific page or even below the menu (that link was just to show the design of the bar). I just want to have a hello bar style notification bar I can place some notifications on (whole site, above menus (fully on the top), sticky (if possible)).

Is this something achievable with GP? I think yes but I cannot find how.

[David]

Awesome 🙂
1. For display rules you can just target the Post > All Posts.
Not an issue to use the Legacy Page Headers and Hooks with Elements although it is better to move them over.

https://docs.generatepress.com/article/moving-hooks-page-headers-to-elements/

1.1 The gravatar link is being embededed but for some reason it is pulling in a blank image?

1.2 This CSS should cure the space below the read-more link:

.author-links {
    padding-bottom: 10px;
}

2. 🙂

3. Simplest way for the notification bar above the navigation would be the top bar widget area which can be styled in the customiser and just use a HTML widget to set the content. Making it sticky is possible withs some CSS but not if you want the sticky nav to only display on scrolling up. Let me know.

[Swadhin]

Hi David,

Thanks for helping me out. 🙂

1.1 How do I get the gravatar then? Without the gravatar it won’t make the personal connection. Please help. The site I gave you (https://gpsites.co/volume) has the gravatar displayed so are we missing any code snippet?

3. Yes that would be good. I don’t want it to be sticky. I tried adding the html widget to the top bar it worked out but the text is aligning to the right irrespective of me trying to center align it. Not can I place buttons in it. Please help.

[Tom]

For the avatar, try replacing:

get_avatar( get_the_author_meta( $author_id ));

With:

get_avatar( get_the_author_meta( 'ID' ) );

[Swadhin]

Hi Tom,

Thanks for the help. The code brought back the author image/gravatar. But it appears on a new line above the name making the box take up extra space and not aligned too. How do I bring them to one line?

Best regards
-Swadhin

[David]

I edited the CSS here to align the avatar and name.

If you want to set up the top bar we can assist with the CSS for alignment.

[Swadhin]

Thank you David.

It worked great. 🙂

Thanks so much, you guys are the best _/\_

[David]

You’re welcome. Let us know if you need a hand with the Top Bar notification.

[Swadhin]

Hi David,

That’s so kind of you to ask again. I actually missed that line of yours in the happiness of getting a nice author box.

Yes, please help me with the alignment. 🙂

David while asking my friends to check out the author box I actually encountered another issue that might be from quite some time.

If you see in Chrome, I’ve set a fainted border for my article borders with the code

.separate-containers .inside-article {
    box-shadow: 0 -10 48px rgba(50,76,128,0.05);
}

This is visible in chrome but not visible (no borders) when viewed from Edge, internet explorer or Firefox. Why is this being caused? Are there other features (custom CSS) that might be behaving this way (and I have not discovered them)?.

Also, I’ve recently noticed the site being a little slower than it used to be. I’ve added all additional CSS I’ve used in the site via the customizer in the link for website section (above). Please see if I am using too much customization or I should use some tech (like minify etc) to make it lighter or if this is OKAY altogether (while I know this is the area of a site audit expert or hosting guys, I request you to look at least once and give me directions on who to ask for help).

Thanks so much David. 🙂

[David]

You’re welcome.

CSS for the top bar, which will center all widgets:

.inside-top-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

For the box shadow: 2 issues – you have this CSS that is conflicting, so remove this:

.single-post .inside-article {
    box-shadow: 0 0 1px rgba(0,0,0,.05);
}

And the above CSS needs a PX value added to it and another property to cover legacy browsers:

.separate-containers .inside-article {
    -webkit-box-shadow: 0 -10px 48px rgba(50,76,128,0.05);
    box-shadow: 0 -10px 48px rgba(50,76,128,0.05);
}

That amount of CSS isn’t concerning regarding Speed, but you may want to read here:

https://generatepress.com/fastest-wordpress-theme/

[Swadhin]

Hi David,

.separate-containers .inside-article {
    box-shadow: 0 -10 48px rgba(50,76,128,0.05);
}

The code above is used for giving a hover effect around articles in the archive pages. Please see the blog section to see when each listed article is hovered it gets a hover animation.

This one appears good in all browsers. I still tried adding your code ( with the px and the webkit codes in it and removing the old one which caused a permanent shadow effect instead of the hover shadow effect it previously had. (I am sorry I gave you the wrong code. But having said that please correct me if this is not the correct way to code (the -10 without px thing) because I just did it the trial and error way I do not know coding).

Now….

The correct code that displayed a faint line (border?) around articles when they are opened (single post view) is this one:

.single-post .inside-article {
    box-shadow: 0 0 1px rgba(0,0,0,.05);
}

This doesn’t show up in the legacy browsers.

To sum up:

1) The first code is working fine doing what it needs to (even in legacy browser) but has a wrong format (-10 instead of -10px). So please guide me here.

2) The second code works good in chrome to create a border but not in legacy browser. How to solve this? [Our original question]

3) You suggested both the codes are conflicting, how do we solve this? Can we have a new snippet that ads hover shadow effect to archives and border to single post layouts (without shadows).

P.S. I tried doing as you suggested (removing and adding new code you gave) and it added a loud shadow to single post view.

Best regards,
-Swadhin

[David]

Hi there,

so different browsers can render things slightly different to each other. Which looks to be the case for webkit browser trying to render a 1px blur on a box shadow. As an alternative you can try a border property instead:

border: 1px solid rgba(0,0,0,0.025);

Whenever declaring units in a CSS property you have to add its unit measurement e.g px
The only time you don’t is if the value is zero (0)

[Sabbir]

Hello,

Where to add this code

Thanks

[Author]

Posts