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)
1 2 3
  • Author
    Posts
  • April 25, 2021 at 8:45 pm #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?

    April 26, 2021 at 6:23 pm #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.

    May 8, 2021 at 5:45 am #30005
    Liran
    Participant

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

    May 8, 2021 at 12:31 pm #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>';} 
	}
});
    May 9, 2021 at 6:03 pm #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.

    May 9, 2021 at 6:24 pm #30038
    Liran
    Participant

    Hey elvin,

    I added the link in the private box here.

    May 9, 2021 at 7:19 pm #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?

    May 10, 2021 at 5:30 am #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.

    May 10, 2021 at 4:02 pm #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.

    May 10, 2021 at 4:10 pm #30093
    Liran
    Participant

    Okay it’s enabled now 🙂

    May 10, 2021 at 4:41 pm #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.

    May 10, 2021 at 4:56 pm #30099
    Liran
    Participant

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

    May 10, 2021 at 5:03 pm #30102
    Liran
    Participant

    Also, it shows on top of the sticky header.

    May 10, 2021 at 5:09 pm #30104
    Liran
    Participant

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

    May 10, 2021 at 5:17 pm #30108
    Liran
    Participant

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

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