How to add custom classes and CSS?

This tutorial will let you know about the customization possibilities of Betheme and the Muffin Builder. Precisely on how to add custom classes, IDs and inline CSS to existing items and how to use the inspector tool to modify the existing styles.


Sections

Upon editing the section in the Muffin Builder, you will see all of the settings. At the bottom, you will find options to add custom classes and a custom ID. Custom ID is used mostly to create one page sites with anchor scrolling, more information about this feature here.
muffin builder section class and id

Wraps

Muffin Builder wraps also have the possibility to add custom classes.

muffin builder wrap classes

Columns

This item is used very often in Betheme to insert content. It also has the option to add custom classes, but besides that, it also lets you insert inline CSS to style the inner content quickly.

muffin builder wraps custom css

The rest of the items in the Muffin Builder

The rest of the items in the Muffin Builder also posses the ability to have custom classes which then can be targeted by custom CSS.


Custom CSS & JS

When you add a custom class to any of the Muffin Builder items, the next step is to write custom CSS or JS. In this case, it will be best to paste it all in:

GO TO WP Admin > Betheme > Theme options > Custom CSS & JS
theme options custom css and js

Want to change and existing class or ID?

If you do not want to add any custom classes or IDs, you can use the browser inspector tool and find out which class you should modify. Here is a quick video tutorial about how to use the inspector tool.

Try it now