Theming

Theming

Preface

Categories by BTP was developed with theming in mind, and should automatically look great in any theme it's installed in. That being said, there are a few CSS classes that we apply to the snippets by default that you can use to customize the look and feel of the various elements to your liking.

The Tree

.category-tree-wrapper

This is the container for the category tree. You can modify the background, padding, font, etc of the entire tree by overriding this class.


.category-tree-wrapper { background: beige; }

.category-tree-wrapper { background: powderblue; }





.category-tree-wrapper ul li

This is the line item for each category. You can modify the background, padding, font, etc of the entire tree by overriding this class.

.category-tree-wrapper ul li label

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

.category-tree-wrapper .node--title

You can modify the styling of the category title with this class.

The Breadcrumbs

#btp-categories-breadcrumb

This is the container for the breadcrumbs. You can use this to change the amount of margin, padding, or the colors of the breadcrumbs as a whole.

.breadcrumb__sep

This is the separator for the breadcrumbs. You can change the amount of margin or padding between the different breadcrumb entries or the color. You can also use this to change the separator symbol to something entirely different.

#btp-categories-breadcrumb *

By default, all of the breadcrumbs are left aligned with 5px of space between each element. You can modify the spacing of the elements by modifying this selector.
  1. #btp-categories-breadcrumb * { margin-right: 5px }