How to add Courses Filterable tabs from oneInstructor theme

Last updated on by

Objective : Build filterable course like below.

1. Add a new “Filterable posts” content in Full width column in the Page builder.

2. Refer the settings below for Filterable Posts block:

 

3. Click on “Advanced settings” as shown above and give the class name “dark” and css code as shown above in the screenshot.

Refer the css code:

.dark .filterable_columns{text-align:center;}
.dark .vibe_filterable{display:inline-block;float:none;}
.dark .vibe_filterable li{margin:0;}
.dark .vibe_filterable li a:hover, .dark .vibe_filterable li.active a{background:#222;color:#FFF;border-color:#222;}
.dark .vibe_filterable li a{border:2px solid #222;color:#222;background:#FFF;border-radius:0;border-right:none;}
.dark .vibe_filterable li:last-child a{border-right:2px solid #222;}