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.
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.
- #btp-categories-breadcrumb * { margin-right: 5px }