Written by on

iThemes Builder 101: Styling Widgets with CSS

Builder gives you the ability to create layouts with tons of widgets just the way you want. But what if you want to give your widgets some very specific style customizations of your own? How can you edit exactly which ones you want? What if you want to target widgets across multiple pages? It may seem complicated, but it’s actually a lot easier than you may think it is.

Understanding the Structure of Builder

Within Builder, you can create limitless combinations of custom content for your site. So how does it keep track of what’s what? Well, Builder applies CSS classes on multiple levels within its layouts to style content. This styling is applied to Builder in general, as well as to individual layouts, modules, and widgets. Classes are good for styling things on the whole, but what about when you want to get really specific. If you made two modules that were exactly alike, how would Builder know the difference? That’s where IDs come into play.

builder_widgets_ids

IDs are similar to classes, but much more specific, and can only be used once each on a page. When you create a new module in Builder, a unique ID is automatically created for it. A module’s ID will always remain the same, unless the module is deleted. If you delete a module and create an identical one, even in the exact same place, the ID generated for it will be different. This makes selecting an individual module easy, as you know it will be the only area on your site with that specific ID. So now that we know what IDs are, how can we find them?

Viewing the Source Code

If you are logged into an administrator account and viewing your site, you can right click anywhere on the page and click “View Page Source”. This launches a new tab in which you can view the actual source code that makes up your site. Between the head and body tags of the page you will see a large comment block that displays the IDs of each individual module, in the order that they appear on the page. Any modules that you add in the future will be inserted into the list as well.

builder_widgets_view_source

Using Inspect Element

You can also right click on the page and hit Inspect Element to view both your HTML source code and the CSS that styles it at the same time. Viewing this code can be a little intimidating, due to the number of classes that Builder uses to style content on the page. Don’t let this discourage you, though; If you’re having trouble reading, try copy and pasting it into a separate document, so you can separate each class out onto its own line.

Module Classes

Getting to know these classes can be very helpful, as they will show you at which level that specific styling is coming from. For example, the class “builder-module-background-wrapper” affects all Builder modules across your site, while “builder-module-widget-bar-background-wrapper” would affect all widget bars. There are also specific classes for when multiple types of the same modules exist on the page, such as “builder-module-3-background-wrapper”. This class, for example, would target all modules that are the 3rd from the top of the page. A class of “builder-module-widget-bar-2-background-wrapper” would target the second widget bar module of every page using the layout.

builder_widgets_module_class

As you can see, Builder classes provide an extremely powerful and versatile way of styling content across your site. The are also a great way to cut down on the size of your code and style several occurrences of similar modules without needing to get each one’s specific ID.

Widget Classes

Just like the modules that contain them, widgets themselves also have specific classes that style them. In addition to those similar to the modules that contain them, widgets also feature a few other classes of their own that you should definitely be familiar with.

Left and Right

As the name suggests, these classes pull widgets to either the left or the right within their parent module. When there are two or more widgets inside a module, the furthest widgets to the left or the right will utilize these classes.

builder_widgets_left

Middle

Similarly to left and right, this is a class specifically for widgets that reside in the middle of their module. If there are multiple widgets in between ones with a left and a right class, they will all contain the middle class.

builder_widgets_middle

Column Numbers

In case you were wondering how you would select a specific widget in a group of more than three, that’s where column number classes come in. If you wanted to select the third widget of a set of five, you can just use the appropriate class with column-3.

builder_widgets_columns

In Summary

Targeting widgets is a lot easier than it appears to be. All you need to know is the class or ID of the specific module(s) you wish to target, and then the class of the widget you’re targeting within that. There are tons of ways to select various modules and widgets across any number of pages, so dig into your site and give it a try for yourself!

Further Reading

If you’re looking for more info about using custom CSS with Builder, here are some other resources to help get you going.

Watch the Webinar: Styling Widgets with CSS in iThemes Builder

Comments

Respond

×

Sale Ends Today! Save 35% OFF BackupBuddy with coupon code BACKUPWP35