We're merging with GenerateBlocks! Learn more here.

[Support request] Color code categories

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Color code categories

Viewing 15 posts - 1 through 15 (of 38 total)
  • Author
    Posts
  • #29590
    Liran
    Participant

    Hey,

    I was able to design something similar to this in WPSP, but I need help with the categories section.

    Any advice?

    #29631
    elvin
    Moderator

    Hi there,

    You should be able to do it with CSS.

    Example:

    #wpsp-169 .wp-show-posts-meta a[href~=food]{
    background-color: red;
    }

    Where food is the category slug.

    #30005
    Liran
    Participant

    Any chance I can position the category like in the example URL?

    #30007
    Liran
    Participant

    Oh, and by the way, I’m using this snippet:

    add_action( 'wpsp_inside_image_container', function( $settings ) {
        if ( 8875 === $settings['list_id'] ) {
            $wpsp_cat_list = get_the_category_list(); 
    		$wpsp_category = get_the_category();
    		if ($wpsp_category) {
    			foreach($wpsp_category as $wpsp_cat) {
    			$wpsp_cat_slug = $wpsp_cat->slug; 
    			}		
    		}
    		if($wpsp_cat_list){echo '<span class="cat_links"><span class="'.$wpsp_cat_slug.'">'.$wpsp_cat_list.'</span></span>';} 
    	}
    });
    #30033
    elvin
    Moderator

    Any chance I can position the category like in the example URL?

    Can you link me to the site you’re trying to apply this on? To inspect for the CSS writeup.

    #30038
    Liran
    Participant

    Hey elvin,

    I added the link in the private box here.

    #30047
    elvin
    Moderator

    I’m not sure your PHP snippet works. I’ve inspected the link and I didn’t see any <span class="cat_links"> elements inside the WPSP image container.

    Are you asking how to make it work as well?

    #30081
    Liran
    Participant

    This is because this snippet only works within the image container. I would like to move the category name to the middle of the card.

    #30089
    elvin
    Moderator

    This is because this snippet only works within the image container. I would like to move the category name to the middle of the card.

    Yeah but it should be rendering some <span class="cat_links"> elements within the page. I’ve checked and there’s none. Is it disabled?

    Can you enable it so I can inspect and do the CSS writeup? Thank you.

    #30093
    Liran
    Participant

    Okay it’s enabled now 🙂

    #30097
    elvin
    Moderator

    Thanks.

    Try replacing your current WPSP custom CSS for the categories with this:

    .wp-show-posts-image {
        overflow: visible;
        margin-bottom: 30px;
    }
    
    .wp-show-posts-image > span.cat_links {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        z-index: 10000;
        width: 100%;
        display: flex;
        align-content: center;
        justify-content: center;
    }
    
    .wp-show-posts-image > span.cat_links > span > ul > li{
        list-style: none;
        margin: 0;
    }
    
    .wp-show-posts-image > span.cat_links  > span a{
        color: white;
    }
    
    .wp-show-posts-image > span.cat_links  > span {
        display: flex;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 20%);
        width: 100px; 
        font-size: 11px;
        padding: 6px auto;
        text-transform: uppercase;
        align-content: center;
        justify-content: center;
    }
    
    .wp-show-posts-image > span.cat_links > span.health{
        background-color: red;
    }
    
    .wp-show-posts-image > span.cat_links > span.care{
        background-color: blue;
    }
    
    .wp-show-posts-image > span.cat_links > span.behavior{
        background-color: green;
    }

    Add more .wp-show-posts-image > span.cat_links > span.[category] for each category. Set the background color value to your preference.

    #30099
    Liran
    Participant

    Nice! But the category name is a bit off. Any idea why?

    #30102
    Liran
    Participant

    Also, it shows on top of the sticky header.

    #30104
    Liran
    Participant

    Never mind! I tweaked it a little and it worked.

    #30108
    Liran
    Participant

    One last question, how do I set a fixed height for the author’s name?

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