iThemes Builder makes it easy to build page layouts without knowing code. But, if you know a little CSS, you can easily apply styles to specific Builder modules by targeting their classes or IDs in your CSS.
In this post, we’ll show you a few tips for targeting specific modules in relation to other modules in your iThemes Builder page layouts. This method will save you time when applying the same styles to multiple modules across all of your layouts.
Targeting Modules by ID
Targeting an ID will usually be the simplest method of targeting specific modules on your page. As we’ve discussed in previous Builder tutorials, there’s a trick you can use to easily find the ID of a specific module.
When you’re logged in as an administrator, you can right click and choose “View Page Source” to view the source code of your page. Within this page, you’ll find a large comment block that will display the IDs of all Builder modules, as they appear on the page. This is the easiest, most direct way of targeting a specific Builder module for styling.
However, let’s say you have multiple modules you want to target, perhaps even of different types, across different pages, or in different scenarios? Well, that’s where some of Builder’s more contextual classes come in.
Contextual Builder CSS Classes
As an example, lets say you had created an HTML module underneath your Navigation module that you were using for a type of notification on your site. This module appears across every page of your site, and you have other HTML modules on the page as well. So what’s the best way to target it? Well, for this we’re going to use one of the contextual Builder CSS classes. Specifically, we’re going to target HTML modules that appear directly after Navigation modules on the page.
You may be wondering how that’s possible. Well, when Builder creates your page, it applies many contextual classes to each module to help with styling. When you view the source code of your page using Inspect Element, you’ll see these classes that have been added to each element within Builder.
Builder uses a lot of classes, so you may find it may help you to copy the whole tag, bring it into a text editor, and separate each class onto its own individual line to better tell what’s doing what.
As you can see, there are many different classes affecting a single module. However, the one we’re interested in here is a class called “builder-module-after-navigation”. This class is applied only to modules that appear directly after a Navigation module. To further specify the module you’re wanting to style, you can also add the “builder-module-html” class to your selector, to make sure that the styling only affects HTML modules that appear directly after a Navigation module.
More Builder CSS Classes
In addition to those mentioned above, there are tons of classes that Builder uses that can make selecting the specific module you want even easier. Just using the previous example again, you could use “builder-module-html-1” if the notification HTML module is also the first HTML module that appears on the page. You could use “builder-module-before-content” if the module was directly before a Content module, similarly to how it is directly after a Navigation module. You could even use “builder-module-3” if it is the third module on the page.
There are tons of classes that Builder creates and uses, far more than we can cover here, unfortunately. To best utilize these classes, you should do a bit of digging into your code, check them out, and learn what each one does.
Builder Developer Resources
For more information on Builder CSS, check out these pages from the Builder Codex: