WordPress Blogging themes How to use “Custom CSS” section of Power Builder modules

This tutorial is going to show you how to use “Custom CSS” section of Power Builder modules.

Custom CSS helps users customize certain elements of the template on the fly. You don’t need to modify css files. Just add css class to your modules settings.

Every Power builder module has a Custom css section. To access it, please, do the following:

1. Open the page you wish to edit under the Pages > All Pages section in your site admin panel.

2. Click on Module Settings button to do the changes.

3. You will see the Custom css tab in popup window. Click it to do css changes.

   This section has several options available:

   • CSS ID. The selector points to the HTML element you want to style. This section allows you to add section, row or module css ID that can be used for adding additional css code. To add some extra css code:

     • Open the Appearance > Customize page in your site backend.

     • Click on the Additional css tab to add additional css code.

     • Paste your css code here:

   • CSS Class. The .class selector selects elements with a specific class attribute.

   • Before field allows to specify custom css code for the ::before pseudo-element.

   • Main Element section is used for adding main custom css code.

     Note! Make sure you add properties and values without brackets.

   • Afteris used for ::after pseudo-element.

   • Also, modules could have several additional fields: Slide Description, Slide Title, Slide Button, Slide Controllers, Slide Active Controller, Slide Image, Slide Arrows, Blurb Image, Blurb Title, Promo Description, Promo Button. It depends on the module you try to edit. You can read about all modules available in our Power Builder overview.

Feel free to check the detailed video tutorial below:

And don’t forget to browse our brand new WordPress Bloging Templates that extend the functionality of your website.