This tutorial provides the steps to replace the default circular bullets with a green tick image for list items of an unordered list in Oxygen.

Step 1

Inside the Oxygen editor, add a Code Block element having this sample code in the PHP & HTML tab:

<ul class="green-tick">
  <li>Step-by-step tutorials</li>
  <li>Videos and screencasts where needed. Conveniently incentivize corporate leadership before open-source alignments.</li>
  <li>Members-only forum</li>

Replace the text with your own.

Step 2

Upload this image (mirror) or your desired image that you want to use as the list items' bullets to your WordPress Media Library and note the URL.

Step 3

In the CSS tab of the Code Block, paste: {
  list-style-type: none;
  margin: 0;
  padding: 0;
} li {
  background: url(https://oxygen.test/wp-content/uploads/2018/10/green-tick.png) no-repeat left top;
  background-size: 40px 40px;
  padding-left: 60px;
  margin-bottom: 20px;

Replace https://oxygen.test/wp-content/uploads/2018/10/green-tick.png with the URL of your image.

Adjust the background-size and other values as needed.

That's it!

Credit: By gmaxwell (Derived from Yes check.svg by Gregory Maxwell) [Public domain], via Wikimedia Commons

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: