Close

Layers Help & Support

Layers 2.0.10 Update

Layers 2.0.10 Update

Removing the Envato Marketplace listings.

  • Fixed Image Ratio button in the Post widget
  • Removed redundant Envato Market listings

UPDATE LAYERS View on GitHub

Layers Widgets: How to Customize List Bullets

How To  Tutorials  Last Updated: Time to Read: 1 minute

You can add bulleted lists to any Layers Widget content area using the Rich Text Editor toolbar.

  1. Add a list of text in the content area by typing your first item, then hitting enter and so on
  2. Highlight the items and click the List icon in the editor toolbar
  3. Additional list items are created automatically when you hit enter at the end of a list item. Hit enter twice to break out of the list and start a new paragraph

By default your list will appear with standard bullets:

list-bullets

You can customize these bullets by adding a Custom Class in the Advanced option of the design bar, and setting a custom icon with the list-style-image property.

  1. Click on Advanced in your widget’s Design Bar
  2. Add a unique name to the Custom Class field. In this example, we use made-w-layers . For details on using custom classes. see the Advanced Option tutorial
  3. In the CSS field, start with your custom class, then select the list items, ie ul li . If you want to select the list items in a specific column, you must give that column a unique class name using the column’s Advanced option, then add it to the order like this: .made-w-layers .your-column-name ul li
  4. Click on the column’s Featured Image option and click Select Image to access the media library. Upload or locate your icon and copy the File Url from the right side under the image details. Cancel or X out of the media library.
  5. Return to the Advanced panel and set the URL in the list-style-image property to your image.

list-bullets-custom

Example:

For alternative ways to customize bullets without using custom icons, see list-type

Did you know?

Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.

Jetpack