Lists are an integral part of your site’s content. Whether you want to display the services you offer or step-by-step instructions, lists make your content look visually appealing and easier to read. HTML allows developers to choose from one of two lists which are defined by the <ul> (for un-ordered lists) and <ol> (for ordered lists) tags.

However, sometimes the default list styles just don’t cut it. For times when you need something more than the default disc bullet points or the 1. 2. 3. numbering, you can use CSS to take things up a notch.

With this in mind, we’ve put together this code snippet generator tool that’s designed to help both developers and first-time theme developers experiment with and add different kinds of list styles to their WordPress themes. In this article, we’ll walk you through the process of identifying a CSS selector and show you how you can get started with this code snippet generator.

How Do I Identify a CSS Selector?

The first thing you’ll need to do is determine which part of your theme you’d like to alter. Once you’ve selected a page element, you’ll need to identify its class (.class-name) or ID (#id) using Chrome’s Inspect tool. Here’s how:

1. Right-click the page element you wish to inspect. In this example, we’ve chosen to inspect the text in the Preview Window.
2. Click the Inspect menu item (in case of the Chrome browser).
3. The CSS styles for each element are shown in a separate preview pane on the right side of the browser window.
4. The most dominant selector (.class or #id) will be shown first in the list.

If you’re still unable to find the .class or #id, please visit the WordPress Codex for more information on how to identify a selector. Now that you know how to identify a CSS selector, let’s take a look at how you can use this custom CSS for list styles tool to generate a code snippet for your WordPress theme.

How Do I Use This Custom CSS for List Styles Snippet Generator Tool?

All you have to do to get started with using this custom code snippet generator is enter the selector of the page element you’re targeting and specify which list style type you’d like to have displayed on the web page. The outputted code applies to all lists and elements that are set to display: list-item.

The code generator will output a custom code for you that will integrate seamlessly with your WordPress themes and work smoothly on all major web browsers.

Let’s take a look at each individual field:

• Selector/s Tab

  • Selector: Enter the selector you want to target here. It should be in all lowercase letters and hyphens e.g. .class-name. We outlined how to find a CSS selector in your WordPress theme in the previous section.

• List Type Tab

  • Styles Type: Select one of the 24 list style type options to specify the type of list item marker (or bullet) by which to display the selected list. By default, the list style type is set to disc.

• Code Tab

  • Once you’ve entered all of the required fields, navigate to the Code tab. You’ll notice that the Your Custom CSS area is populated with a custom code snippet for adding custom list styles with CSS in your WordPress theme.

How Do I Add the Code Snippet to My Website?

The quickest way to add the generated code snippet to your site is by pasting it directly into your current theme’s style.css file. You can edit it directly by navigating to Appearance > Editor from the WordPress admin panel.

Alternatively, you can download the theme’s style.css file to your desktop via an FTP client. Next, open it up in a text editor and paste the generated custom code snippet at the bottom of the file. Hit the Save button and re-upload it to your theme’s directory when you’re done.

Conclusion

By using this code snippet generator tool, you’ll be able to choose from a wide range of list-item markers and bullet point styles to make your lists stand out. We hope that this tool allows you to experiment with all kinds of list styles and saves you some time and effort from having to hand-code customized list styles for your WordPress themes.

Do you have any questions about how to use the Custom CSS for List Styles code snippet generator tool? Let us know in the comments section below!