CSS

Create post term cards

G Gabi Maftei · 514 views · Updated 1 year ago

Display inline terms as cards in the create post widget.
Add this css code snippet in Appearance > Customize > Additional CSS or in an Elementor html widget within create post page. Be sure that you set the taxonomy to inline mode and use the customcats css class.

This is the code to use only for taxonomies with parent terms (no child terms). Edit the code as you need.Replace customcats class with your own if needed.

/* Give some top bottom space */
.customcats {margin:10px 0;}
/* Add number of columns based on your widget width */
.customcats .ts-term-dropdown-list {grid-template-columns: repeat(3, 1fr);}
/* Add number of columns based on mobile layout */
@media (min-width: 320px) and (max-width: 480px) {.customcats .ts-term-dropdown-list {grid-template-columns: repeat(2, 1fr);}}
/* Hide the checkboxes */
.customcats .ts-checkbox-container {display:none !important;}
/* Style the cards */
.customcats .ts-term-dropdown-list li {margin:5px;border:solid 1px #e4e4e4;border-radius:5px;}
.customcats .ts-term-dropdown-list li a {flex-direction:column-reverse;width:fit-content;width:100%;margin-left:auto;margin-right:auto;height:100%;padding:20px 5px;}
.customcats .ts-term-dropdown-list li a span {width:100%;width:fit-content;margin:0 auto;}
.customcats .ts-term-dropdown-list li:hover{border:solid 1px var(--e-global-color-accent);cursor:pointer;}
.customcats .ts-term-dropdown-list li:hover a span {color:var(--e-global-color-accent);}
.customcats .ts-term-dropdown-list li:hover .ts-term-icon svg {fill:var(--e-global-color-accent);}
.customcats li.ts-selected {background:#F2F2F2;border:solid 1px var(--e-global-color-accent);}
.customcats li.ts-selected a span {color:var(--e-global-color-accent);font-weight:bolder;}
.customcats li.ts-selected .ts-term-icon svg {fill:var(--e-global-color-accent);}
.customcats li.ts-selected .ts-term-icon i {color:var(--e-global-color-accent);}

CSS · 19 lines

This is the code to use for taxonomies with child terms (it works well if every child term has icon set and a short name). Edit the code as you need.Replace customcats class with your own if needed.

/* Give some top bottom space */
.customcats {margin:10px 0;}
/* Add number of columns based on your widget width */
.customcats .ts-term-dropdown-list {grid-template-columns: repeat(3, 1fr);}
/* Add number of columns based on mobile layout */
@media (min-width: 320px) and (max-width: 480px) {.customcats .ts-term-dropdown-list {grid-template-columns: repeat(2, 1fr);}}
/* Hide the checkboxes */
.customcats .ts-checkbox-container {display:none !important;}
/* Style the cards */
.customcats .ts-term-dropdown-list li {margin:5px;border:solid 1px #e4e4e4;border-radius:5px;min-height:80px;word-wrap: break-word;}
.customcats .ts-term-dropdown-list li a {flex-direction:column-reverse;width:fit-content;width:100%;margin-left:auto;margin-right:auto;height:auto;padding:20px 10px 0px 10px;}
.customcats .ts-term-dropdown-list li a span {width:100%;width:fit-content;margin:0 auto;word-wrap:break-word;white-space:normal;text-align:center;}
.customcats .ts-term-dropdown-list li:hover{border:solid 1px var(--e-global-color-accent);cursor:pointer;}
.customcats .ts-term-dropdown-list li:hover a span {color:var(--e-global-color-accent);}
.customcats .ts-term-dropdown-list li:hover .ts-term-icon svg {fill:var(--e-global-color-accent);}
.customcats li.ts-selected {background:#F2F2F2;border:solid 1px var(--e-global-color-accent);}
.customcats li.ts-selected a span {color:var(--e-global-color-accent);font-weight:bolder;}
.customcats li.ts-selected .ts-term-icon svg {fill:var(--e-global-color-accent);}
.customcats li.ts-selected .ts-term-icon i {color:var(--e-global-color-accent);}
/* Position of child select icons, adjust it here */
.customcats .ts-term-dropdown-list li .ts-right-icon {order:-1;position:relative;right:10px;top:-35px;}
.customcats .ts-term-dropdown-list li .ts-left-icon {order:2;}

CSS · 22 lines

Discussion 4

Ask a question or share how you used this.

workerdaddy 1 year ago

I'm creating paid ads post type. I created a field "Ad Style" that has three options (Style-1, Style-2, Style-3), for each style there is an image to express the design of this style. I want to let the user choose Ad style. Is it doable to set an image as a background for each card, so the user can click the image directly to choose the style not adding UI image then select field?

Josi Schneider 1 year ago

Hi Gabi, I noticed that I need to click on the label of the item, but when clicking outside of the label but still inside the item, it doesn't selects the term. Select & Multiselect is working on desktop and mobile now only if the user clicks directly on the term label and not around it. especially in mobile when they click around the name the items gets the colored border as active state but does not yet gets selected. would you have a solution to this? Thanks for your help :)

Gabi Maftei 1 year ago

Hi Josi, yes I was aware about this, I've modified the codes, please try it now.

workerdaddy 1 year ago

Does this code need to be updated after Voxel Updates? Because it didn't work for me.

Gabi Maftei 1 year ago

It works, please check if you set the taxonomy mode to inline.

Sylvain 2 years ago

Thanks, I love the layout, but it doesn't display very well if there are child categories like "Shopping" for example.

Gabi Maftei 2 years ago

Sorry, this is not intended for child categories, I'll look to find a solution that works.

Sylvain 1 year ago

Thank you :D

Sylvain 1 year ago

Hello, Have you managed to find a solution for displaying sub-categories?

Gabi Maftei 1 year ago

I've updated the code with a version for child taxonomy, it works well if each child term has icon set and a short name.