Join the Voxel Guide Community!
Get Involved
Voxel Theme Version: 1.5.4 | Elementor Plugin Version: 3.28.0
You are now eligible to list your profile publicly!
Get Involved
Display inline terms as buttons in the create post widget.
Add this css code snippet in Appearance > Customize > Additional CSS, child theme style.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.
Edit the css code as you need.
/* Give some top bottom space */
.customcats {margin:10px 0;}
/* Hide the checkboxes */
.customcats .ts-checkbox-container {display:none !important;}
/* Display terms list inline */ .customcats .ts-term-dropdown-list {display:flex;flex-direction:row;flex-wrap:wrap;}
/* Style single term list element */ .customcats .ts-term-dropdown-list li {flex-wrap:wrap;width:fit-content;justify-content:center;padding:0 10px 0 10px;min-width:fit-content;border:solid 1px #D4D6DD;margin-right:5px;margin-bottom:10px;border-radius:10px;}
/* Style single term list element on hover */
.customcats .ts-term-dropdown-list li:hover {border:solid 1px var(--e-global-color-accent);color: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 .ts-term-dropdown-list li .ts-term-icon {order:-1;display:inline-flex !important /* use display:none to hide the term icon */}
/* Style single term list element selected */
.customcats .ts-term-dropdown-list li.ts-selected {background:#F8F8F8;border:solid 1px var(--e-global-color-accent);color:var(--e-global-color-accent)}
.customcats .ts-term-dropdown-list li.ts-selected a span {color:var(--e-global-color-accent)}
.customcats .ts-term-dropdown-list li.ts-selected .ts-term-icon svg {fill:var(--e-global-color-accent);}
