[Resolved] CSS customization of Ordered List

[Author]

Posts

[deepS]

I am trying to change the color of the ordered list. Somehow I achieved this but not able to do the things I am expecting. See the screenshot_1. The numbers are still in black color and even font sizes cannot be changed. Please let me know how to achieve this.

I have used this code for views:

<div class="post-name">Post: [types field="post-name"][/types]</div>
<ul>
<li><strong>No. of Vacancies:</strong> [types field="no-of-vacancies"][/types]</li>
<li><strong>Uppre Age Limit:</strong> [types field="upper-age-limit"][/types] years.</li>
<li><strong>Educational Qualification:</strong> [types field="educational-qualification" output='raw'][/types]</li>
<li><strong>Work Experience:</strong> [wpv-conditional if="( $(wpcf-work-experience) ne '' )"] [types field="work-experience" output='raw'][/types][/wpv-conditional][wpv-conditional if="( $(wpcf-work-experience) eq '' )"]Freshers may apply[/wpv-conditional]</li>
<li><strong>Salary:</strong> [types field="salary"][/types]</li>
</ul>

And used the following CSS codes:

.post-name {
  font-size: 1.3em;
  margin-bottom: 5px;
  color: #ee7823;
}

[Christian Cox]

Hello, I'm not able to see the code for the ordered list items (numbers) here. I'm only able to see the code for the unordered list items (bullets). Regardless, you can find examples for styling ordered lists here: https://www.w3.org/Style/Examples/007/color-bullets.en.html

The simplest solution is to style the entire list item to match the desired style of the number. Then add spans or additional internal markup to style individual elements within that list item.

If you want additional guidance, I need to see this in a browser. A screenshot is helpful, but I must see an actual live site to offer more assistance with the styles.

[deepS]

I have created the view in loop editor option for generating views of the repeatable group fields. See the screenshot_3 for understanding.
See the url here: hidden link

[Christian Cox]

Add this CSS to style the bullet (and everything else in the list item):

.wpv-loop > li {
  color: #ee7823;
}

Then if you want to change the text color for the nested list, you must override the text color to be dark gray again for those elements:

.wpv-loop > li ul {
  color: #3a3a3a;
}

[deepS]

My issue is resolved now. Thank you!