Join the Voxel Guide Community!
Get Involved
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);}
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;}
