Styling the Filterable Portfolio Module Tabs

|

Divi includes a filterable portfolio module which lets you display your projects along with "tab" buttons that let your users select particular categories of project to view. Here's some tips for styling the filterable portfolio module tabs.

First, though, here's how the tabs normally appear:

Style the Text of the Filterable Portfolio Tabs

The filterable portfolio module settings include options for styling the text of the tabs, which are referred to as "Filter Criteria" in the settings. You'll find the options at:

Filterable Portfolio Settings > Design > Filter Criteria Text

Like so:

Style the Active Filterable Portfolio Tab

If you want to apply some styles to just the active tab in the filterable portfolio, you can do so using the Custom CSS setting at:

Filterable Portfolio Settings > Advanced > Custom CSS > Active Portfolio Filter

For example:

Style the Individual Filterable Portfolio Tabs

While the module settings let you style the text of individual tabs, there isn't an option to style other aspects of the individual tabs, such as their background color. For this, you can use some custom CSS added into the page or global-level custom CSS. For example:

Note that "!important" has been added to make the "background-color" override the existing background color set on the active tab. The "color" property, on the other hand does not include "!important" and as a result does not override the existing text color of the active tab.

For easy copy-and-pasting, here's the CSS from the example above:

.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
	border: 1px solid black;
	background-color: green !important;
	color: white;
}

Style the Filterable Portfolio Tab Area

If you want to apply styles to the entire portfolio tab area, you can do so using the Custom CSS setting at:

Filterable Portfolio Settings > Advanced > Custom CSS > Portfolio Filters

For example:

It's worth noting that the tab area extends the full width of the filterable portfolio module and that while some settings (such as the font-weight, shown above) are inherited by the tabs, some (such as the background color) aren't.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published.