[Resolved] Add style to category box

Home Forums Support [Resolved] Add style to category box

Home Forums Support Add style to category box

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1603072
    Jerry

    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!

    http://jeroenc2.sg-host.com/blog/

    #1603197
    Ying
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #1603243
    Jerry

    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 ๐Ÿ™‚

    #1603307
    Ying
    Staff
    Customer Support

    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;
    }
    #1603541
    Jerry

    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)

    https://tinyurl.com/y8semple

    Thank you again Ying!

    #1603585
    David
    Staff
    Customer Support

    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.

    #1603915
    Jerry

    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!

    #1603918
    David
    Staff
    Customer Support

    You’re welcome glad we could be of help

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