Archived topic
Add style to category box
7 replies · Started by Jerry on January 2, 2021
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!
Hi 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 :)
Hi Ying,
Basically I want to place the category in a box on the archive page like this:
https://www.awesomescreenshot.com/image/5871695/037ec3c7c9a1dc35275dc632cde0ca51
The 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 :)
Ah 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;
}Thank 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!
Hi 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.
Thank 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!
You're welcome glad we could be of help
