Home › Forums › Pro Support › Color code categories
- This topic has 37 replies, 2 voices, and was last updated 2 years, 4 months ago by
elvin.
-
AuthorPosts
-
April 25, 2021 at 8:45 pm #29590
Liran
ParticipantHey,
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 #29631elvin
ModeratorHi 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 #30005Liran
ParticipantAny chance I can position the category like in the example URL?
May 8, 2021 at 12:31 pm #30007Liran
ParticipantOh, 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 #30033elvin
ModeratorAny 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 #30038May 9, 2021 at 7:19 pm #30047elvin
ModeratorI’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 #30081Liran
ParticipantThis 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 #30089elvin
ModeratorThis 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 #30093Liran
ParticipantOkay it’s enabled now 🙂
May 10, 2021 at 4:41 pm #30097elvin
ModeratorThanks.
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 #30099Liran
ParticipantNice! But the category name is a bit off. Any idea why?
May 10, 2021 at 5:03 pm #30102Liran
ParticipantAlso, it shows on top of the sticky header.
May 10, 2021 at 5:09 pm #30104Liran
ParticipantNever mind! I tweaked it a little and it worked.
May 10, 2021 at 5:17 pm #30108Liran
ParticipantOne last question, how do I set a fixed height for the author’s name?
-
AuthorPosts
- You must be logged in to reply to this topic.