- This topic has 7 replies, 3 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
January 2, 2021 at 2:31 pm #1603072Jerry
Hi guys, I used code provided by David here https://generatepress.com/forums/topic/i-want-to-move-the-category-display-above-the-title/ which makes it appear where I want it.
However, I would like to add the same CSS style he provided for the Original Poster, nonetheless, I just want to be able to apply it to where the category is right now.
// Open Post Image Wrap to contain image and category links add_action( 'generate_before_content','db_open_image_wrap',1); function db_open_image_wrap() { if ( is_home() || is_archive() ) { echo '<div class="post-image-wrap">'; } } // Remove categories from default position add_filter( 'generate_category_list_output','tu_remove_categories' ); function tu_remove_categories( $categories ) { if ( is_home() || is_archive() ) { return ''; } return $categories; } // Add category link within Post Image Wrap add_action( 'generate_before_content','tu_cats_above_title', 15 ); function tu_cats_above_title() { if ( is_home() || is_archive() ) { $categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) ); if ( $categories_list ) { printf( '<span class="entry-meta cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span></div>', _x( 'Categories', 'Used before category names.', 'generatepress' ), $categories_list ); } } }
So basically I want to place that text in a colored box as he did with this BUT NOT in the image (just in that same location).
.post-image-above-header .inside-article .post-image { margin-bottom: 0.5em !important; } .post-image-wrap { position: relative; } .post-image-wrap .entry-meta { position: absolute; bottom: 15px; left: 10px; font-size: 12px; padding: 4px 8px; background-color: #fff; border-radius: 2px; } .post-image-wrap .entry-meta:before { display: none; }
What updated CSS do I need to achieve that?
Thank You!
January 2, 2021 at 5:48 pm #1603197YingStaffCustomer SupportHi Jerry,
I’m not sure I fully understand your request.
Are you wanting the category in a colored box?
Or do you want to move it to specific position as well?A screenshot with some direction maybe help!
Let me know ๐
January 2, 2021 at 6:27 pm #1603243JerryHi Ying,
Basically I want to place the category in a box on the archive page like this:
https://www.awesomescreenshot.com/image/5871695/037ec3c7c9a1dc35275dc632cde0ca51The only CSS I could find was this:
.post-image-wrap .entry-meta { position: absolute; bottom: 15px; left: 10px; font-size: 12px; padding: 4px 8px; background-color: #f4f; border-radius: 2px; } .post-image-wrap .entry-meta:before { display: none; }
However, this is the effect I want, but it pushes the box/category link into the image. I just want to leave it in the same place as in the first photo (above the title and below the featured image) BUT in a colored box like this. https://www.awesomescreenshot.com/image/5871698/b4396c336c95358d7fed49362d4a2880
Hope this makes sense ๐
January 2, 2021 at 8:11 pm #1603307YingStaffCustomer SupportAh ok I got it.
Try to replace your CSS with this:
.blog .entry-meta.cat-links a, .archive .entry-meta.cat-links a { font-size: 12px; padding: 4px 8px; background-color: #f4f; border-radius: 2px; }
January 3, 2021 at 4:47 am #1603541JerryThank you!
How can I control the space above and below? I tried using margin but can only move it left or right etc…
I’m clueless to CSS (for now but you guys have inspired me to sign up for a course and learn hehe)
Thank you again Ying!
January 3, 2021 at 6:16 am #1603585DavidStaffCustomer SupportHi there,
try this CSS:
/* reduce space between featured image and post terms */ .post-image-above-header .inside-article .post-image { margin-bottom: 1em; } /* Increase space between post image wrap and title */ .post-image-wrap { margin-bottom: 1em; }
For info – there are two main types of Block display ( there are others … ) one is Block and the other is Inline – see more info here:
https://www.w3schools.com/html/html_blocks.asp
Any element can be set to display as a block or inline element. What you may have been attempting is to add top/bottom margin to an inline element, this will not work on inline elements, only block level elements.
January 3, 2021 at 8:51 am #1603915JerryThank you, David! These past few days it has been a joyful experience figuring all this out, especially with the help from you guys! A+ Customer Service!!!
Going to do a course and learn about all this CSS and understand the mechanics behind it,
Thanks again!
January 3, 2021 at 8:53 am #1603918DavidStaffCustomer SupportYou’re welcome glad we could be of help
-
AuthorPosts
- You must be logged in to reply to this topic.