CSS

Create post term buttons

G Gabi Maftei · 319 views · Updated 1 year ago

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);}

CSS · 15 lines

Discussion

Ask a question or share how you used this.

No comments yet — be the first.