- This topic has 8 replies, 2 voices, and was last updated 5 years ago by Tom.
-
AuthorPosts
-
April 13, 2019 at 8:42 am #868021Patrick
Hi :), I would like to achieve this Layout ->> http://prntscr.com/nbhbeh
That means:
– Author + Date Inline above the Title
– Category inbetween Title and Excerpt
– Read more + Comments Inline under the ExcerptThe CSS is no problem but I don’t know how to achieve this with PHP yet.
April 13, 2019 at 4:21 pm #868181TomLead DeveloperLead DeveloperHi there,
First, let’s move the author + date above the title:
add_action( 'after_setup_theme', function() { remove_action( 'generate_after_entry_title', 'generate_post_meta' ); add_action( 'generate_before_entry_title', 'generate_post_meta' ); } );
Next, we’ll move the categories after the title:
add_filter( 'generate_show_categories', '__return_false' ); add_action( 'generate_after_entry_title', function() { $categories_list = get_the_category_list( ', ' ); if ( $categories_list ) { printf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>', esc_html_x( 'Categories', 'Used before category names.', 'generatepress' ), $categories_list ); } } );
Lastly, the comments and read more should be at the bottom by default.
Let me know π
April 14, 2019 at 12:09 pm #868789PatrickThank you so much! Just one more thing:
Now the Comments are under Read More, is it possible to move them to the same height. So the comments are on the right side?
Currently the Comments are in the Footer Meta, so moving them into entry-summary I guess?I tried it with css and position absolute but I have problems getting it responsive
April 14, 2019 at 12:15 pm #868794PatrickOk one more problem. I have now Date and Author above and under the title so twice. I thought I can just deactivate one in the customizer, but it removes both. So how can I keep only the one above the title? π
April 14, 2019 at 2:23 pm #868851TomLead DeveloperLead DeveloperAny chance you can link me to your site so I can take a look?
I updated the function above which should fix the second issue.
Let me know π
April 14, 2019 at 2:29 pm #868857PatrickThanks first issue solved.
Im working local on my site but I made a screenshot for better understanding
http://prntscr.com/nbxxwhApril 14, 2019 at 8:25 pm #868987TomLead DeveloperLead DeveloperHard to know for sure without being able to inspect the code.
I think absolute positioning is your best bet.
Something like this:
.home footer.entry-meta, .archive footer.entry-meta { position: absolute; bottom: 40px; right: 40px; }
Then you can stack them using a media query if it stops working as a specific width:
@media (max-width: 800px) { .home footer.entry-meta, .archive footer.entry-meta { position: relative; bottom: auto; right: auto; } }
April 15, 2019 at 2:20 am #869203PatrickThanks for all the support, the code helped to figure it out π
.blog .inside-article{ position: relative; } .blog footer.entry-meta { position: absolute; right: 20px; bottom: 60px; } @media (max-width: 800px) { .blog footer.entry-meta { position: relative; bottom: auto; right: auto; } }
April 15, 2019 at 8:24 am #869671TomLead DeveloperLead DeveloperAwesome π
-
AuthorPosts
- You must be logged in to reply to this topic.