Home › Forums › Support › Move category in the image above title and center it with relative positioning
- This topic has 3 replies, 2 voices, and was last updated 3 years, 7 months ago by David.
-
AuthorPosts
-
August 17, 2020 at 4:17 pm #1406932Antoine
Hi guys,
I found this topic already, which was of great help, but does not fit entirely my needs :
https://generatepress.com/forums/topic/i-want-to-move-the-category-display-above-the-titleThe solution above is almost perfect, but I would like the categories to be always centered whatever the width of the archive container (or image within it).
What would be the CSS for it please ?
Also, what if I want to do the same thing with tags ? What would be the php function and CSS please ?
Thanks a lot for your help,
August 18, 2020 at 2:12 am #1407342DavidStaffCustomer SupportTo add tags below categories and to center both:
1. the last snippet becomes this:
// Add category link within Post Image Wrap add_action( 'generate_before_content','tu_cats_above_title', 15 ); function tu_cats_above_title() { $meta_string = ''; if ( is_home() || is_archive() ) { $categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) ); $tags_list = get_the_tag_list('',', ',''); if ( $categories_list ) { $meta_string = '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>'; } if ( $tags_list ) { $meta_string .= '<span class="tag-links"><span class="screen-reader-text">%3$s </span>%4$s</span>'; } printf( '<span class="entry-meta">' .$meta_string . '</span></div>', _x( 'Categories', 'Used before category names.', 'generatepress' ), $categories_list, _x( 'Tags', 'Used before category names.', 'generatepress' ), $tags_list ); } }
And replace all of the CSS with this:
.post-image-above-header .inside-article .post-image { margin-bottom: 0.5em !important; } .post-image-wrap { position: relative; } .post-image-wrap .entry-meta { display: flex; flex-direction: column; align-items: center; position: absolute; bottom: 15px; left: 50%; transform: translatex(-50%); font-size: 12px; text-align: center; } .post-image-wrap .entry-meta span { padding: 4px 8px; background-color: #fff; border-radius: 2px; margin: 2px 0; } .post-image-wrap span:before { display: none; }
August 18, 2020 at 8:59 am #1408019AntoineIt works great 🙂
Fast and efficient support, wow !
Thanks a lotAugust 19, 2020 at 1:40 am #1409004DavidStaffCustomer SupportGlad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.