Theming

Categories by BTP was developed with Theming in mind, and should automatically look great in any theme its installed in.
That being said, there are a few css classes that are easily modified so that you may customize the look and feel to your liking. 

The Tree

Examples:

See the Pen Sivana Spirit Categories by ARRON MCCRORY (@arron21) on CodePen.

 

 

.category-tree-wrapper
.category-tree-wrapper

This is the container for the category tree. 

You can modify the background, padding, font, etc.

How To Customize the Wrapper
.category-tree-wrapper { background: beige; }
.category-tree-wrapper { background: powderblue; }
 

 

.category-tree-wrapper ul li
.category-tree-wrapper ul li

This is the line item for each category

You can modify the background, padding, font, etc.

 

.category-tree-wrapper ul li label
.category-tree-wrapper ul li label

You can modify the text of the clickable dropdown with this class.

 

.category-tree-wrapper .node--title
.category-tree-wrapper .node--title

You can modify the text of the category with this class.

 

 

The Breadcrumbs

#btp-categories-breadcrumb
#btp-categories-breadcrumb { background: transparent }

This is the container for the breadcrumbs. you change change the amount or margin or padding or color.

 

.breadcrumb__sep
.breadcrumb__sep { color: grey }

This is the separator for the breadcrumbs. you change change the amount or margin or padding or color. You could even put your own symbol for the separator.

 

Spacing
#btp-categories-breadcrumb * { margin-right: 5px }

By default all the breadcrumbs are left aligned with 5px of space in between elements. You can modify the spacing of the elements by modifying this selector.