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>
</ul>

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:

ul.green-tick {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.green-tick 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?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Hi I am using this tutorial to add a check mark but it looks like the bottom layer gets cut off: https://i.imgur.com/g1Srbvk.jpg

    CSS
    “`ul.green-tick {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    }

    ul.green-tick li {
    background: url(http://popbowl.wpengine.com/wp-content/uploads/2018/11/CHECK-SMALL.png) no-repeat left top;
    background-size: 40px 40px;
    padding-left: 60px;
    margin-bottom: 20px;
    }“`

    HTML PHP


    Packaging today offers no room to properly toss your salad.
    Dressing will typically sink to the bottom of the bowl and not evenly coat your meal.
    Other salad storage methods are a one use system.

  • Actually i went through and added styling and my headers: and now the first check mark and last check are being cut off at the bottoms: https://imgur.com/a/NFJCZMi

    HTML

    <ul class="green-tick">
    <h1>Ingredient Overflow</h1>
    <li>Packaging today offers no room to properly toss your salad.</li>
    <h1>Spotty Dressing Distribution</h1>
    <li>Dressing will typically sink to the bottom of the bowl and not evenly coat your meal.</li>
    <h1>Environmentally Harmful</h1>
    <li>Other salad storage methods are a one use system.</li>
    </ul>

    CSS

    ul.green-tick {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    text-align: left;

    }

    ul.green-tick li {
    background: url(http://popbowl.wpengine.com/wp-content/uploads/2018/11/CHECK-SMALL.png) no-repeat left top;
    background-size: 40px 40px;
    padding-left: 60px;
    margin-bottom: 20px;
    }

    h1 {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 16pt;
    padding-left: 60px;
    margin-bottom: 5px;
    color: #1d6835;
    font-family: 'Roboto', sans-serif;

    Thank you for any tips you are able to give!

  • Yikes I am having a devil of a time making these code blocks responsive: please take a look at this & let me know if there is anything I can do to align it: http://popbowl.wpengine.com/?page_id=17

    I attempted to change the screen icon in the sidebar panel to smaller display sizes but it is not saving that progress, would this be a custom css fix?

  • Hi Sridhar – Thank you so much for being incredibly helpful – I am wanting the photo to match the height of the codeblocked text – It looks fine on smaller screens since i have the columns stacking vertically – but in the screenshot the size of the image & the text is so different – just curious if there was a way to remedy this.

    • There is no proper solution to this – be it Oxygen or otherwise.

      This may be the most feasible way:

      Instead of showing the image as an embedded <img> element, we could set it as a background for a div that has the same height as the right side code block and use background-size: cover for the background image so it stretches out and fills the div.

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: