[Support request] How to center align post headline (title) above post and sidebar

Home Forums Support [Support request] How to center align post headline (title) above post and sidebar

Home Forums Support How to center align post headline (title) above post and sidebar

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #945187
    Swadhin

    Hi there,

    I was looking to center align my post title and meta data above the post and sidebar area. How do I do it?

    Basically, I am looking for something like this and here is a screenshot with some explaination if you like.

    Thank you.

    #945367
    David
    Staff
    Customer Support

    Hi there,

    you would need a Header Element to do this easily.
    This example provides the shortcode for displaying the gravatar. And would be good base to start from ( minus the merged site header )

    https://docs.generatepress.com/article/page-hero-examples/#example-2

    #945732
    Swadhin

    Hi David,

    That worked. Thank you! 🙂

    However, the PHP and CSS given in the page you linked above, returned a huge gravater, and most importantly showed my published date instead of last updated date.

    I have had issues with last updated dates in GeneratePress and Tom had given me the below PHP code that works just perfect. With showing and Google picking up the correct updated date in SERPs.

    Here is the code…

    add_filter( 'generate_post_author', '__return_false' );
    add_filter( 'generate_show_comments', '__return_false' );
    add_filter( 'generate_post_date_output', 'tu_fancy_byline' );
    function tu_fancy_byline( $date ) {
    	printf( ' <span class="byline">%1$s</span>',
    		sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></span>',
    			esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
    			esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
    			esc_html( get_the_author() ),
    			get_avatar( get_the_author_meta( 'ID' ) )
    		)
    	);
    
    	if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
    		echo '<span class="comments-link">';
    			comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
    		echo '</span>';
    	}
    
    	$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
    	
    	if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
    		$time_string = '<time class="updated" datetime="%3$s" itemprop="dateModified">%4$s</time>';
    	}
    	
    	$time_string = sprintf( $time_string,
    		esc_attr( get_the_date( 'c' ) ),
    		esc_html( get_the_date() ),
    		esc_attr( get_the_modified_date( 'c' ) ),
    		esc_html( get_the_modified_date() )
    	);
    
    	return sprintf( '<span class="posted-on">%s</span>', // WPCS: XSS ok, sanitization ok.
    		$time_string
    	);
    }

    The above code is used by my current post meta data or entry data (the segment that displays author gravatar author name and date of updation).

    Now…

    How can I move my current meta data to the place under the post title? Is there any shortcode for it?

    Please check this screenshot to understand better.

    Thank you

    #945957
    David
    Staff
    Customer Support
    #945980
    Swadhin

    Hi David,

    Thank you so much. I am so sorry if this sounds dumb, but can you please elaborate (I respect your time and sorry for asking this) what you mean to say?

    Should I add Tom’s filter and

        keep my snippet (given above) as well? or
        Add Tom’s snippet but remove mine?

      Does Tom’s Filer use any of the settings from the snippet I gave you above?

      And more importantly, would Tom’s filter (that you provided) and mess with Tom’s solution (that I provided) when I use both?

      Best,
      -Swadhin

    #945994
    David
    Staff
    Customer Support

    You would use both – they won’t interfere with each other as the second code simply filters the output of the datetime in the header element.

    #946001
    Swadhin

    Hi David,

    I did it. But the date doesn’t display:

    Here is what I have done so far:

    1. I added both CSS and PHP from this section

    2. I added Tom’s Filter.

    Now the gravater shows up but not the date whatsover.

    Side Question:

    Here is the CSS code I used to previously style entry meta (when I wasn’t using a page hero). It is also currently active. Should I keep it as is or delete it or delete some parts of it?

    .byline img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: relative;
        vertical-align: middle;
        margin: 0 10px 0 0;
    }
    
    .byline,
    .comments-link,
    .posted-on {
    	display: inline-block;
    }
    
    .comments-link,
    .posted-on {
    	border-left: 1px solid #ddd;
    	padding-left: 10px;
    	margin-left: 10px;
    }
    
    .comments-link:before {
    	display: none;
    }
    .posted-on .updated:before {
        content: "Last Updated ";
    }
    .entry-content {
        margin-top: 0.5em;
    }
    #946008
    David
    Staff
    Customer Support

    Just a little more CSS as the updated is hidden by default:

    .page-hero time.updated {
        display: inline-block !important;
    }
    #946166
    Swadhin

    Hi David,

    It worked. Just a little bit issue.

    My Old one looked a bit different see screenshot. How do I add a

        A by before my name
        “last updated” before the date
        And a separator line to divide both

    P.S. Should I also keep the CSS snippet I gave you here:https://generatepress.com/forums/topic/how-to-center-align-post-headline-title-above-post-and-sidebar/#post-946001

    #946170
    David
    Staff
    Customer Support

    The header element supports HTML so you can just add that content between the {{template_tags}} and [shortcodes].

    If you’re only adding the meta to the Header Element then that CSS should not be necessary.

    #946176
    Swadhin

    I also add meta to the blog page.

    #946179
    David
    Staff
    Customer Support

    In that case it will be needed as that CSS isn’t specific to the single post.

    #946188
    Swadhin

    Thank you David. This helped me so much. Learned a few things and created a good design with your help. Thanks for being generous and kind that you and the whole GP team are.

    Best regards,
    -Swadhin

    #946190
    David
    Staff
    Customer Support

    You’re really welcome – happy to be of help.

    #946200
    Swadhin

    Hi David,
    I ran into an issue again.

    The post meta (when I addded the HTML) each displayed in a separate line. Please see screenshot. How do I solve this?

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