Categories
WordPress WordPress Tutorial

WordPress Quick Trick: Change color and bullet-style of a list

I n this tutorial we are going to see :
  • Use Additional Theme CSS
  • Use Block Advanced Aditional CSS Classes
  • Change bullet Style (square, round, etc)
  • Change bullet Color
  • Keep text to black
• Additional Theme CSS
  • If you want to know the HTML & CSS basics of lists before delving into WordPress styling. Click here to know it
  • WordPress allows you to add additional CSS from the Theme customize window.
  • Simply go to your side panel of the Dashboard -> Appearence->Customize->Additional CSS
  • You will see an empty space that allows you to write CSS styling as if you were on your style.css file. to refresh your mind about CSS file click here
ScreenShot 1
ScreenShot 2
ScreenShot 3
  • If you add in the Dashboard -> Appearence->Customize->Additional CSS general items as ol (ordered list) or p (paragraph) this styling will be the new default. You can see that moat of bullets in this tutorial is of the circle type “○” due to the style of “ul” we added in the additional CSS at the end of the ScreenShot 3 above.
  • The item added in Dashboard -> Appearence->Customize->Additional CSS like “.my_blue_color” with a dot at the beginning are classes. These classes can be used either in any WordPress Block as we are going to see in the coming section or in the inline styling
• Block Advanced Aditional CSS Classes
  • You will find the place to add the Advanced Additional CSS classes in any block right-side panel for settings
  • If you can’t find it just click the settings icon beside the word Publish or Schedule
Block Advanced css
• Change bullet Style (square, round, etc)
  1. Add a new class that changes the bullet style to square
    • Go to Dashboard -> Appearence->Customize->Additional CSS
    • Add the code to the right and click on publish
    • Publish here add this class to the style.css file
    • The class name is “square” but the dot ” . ” before it declares it as a class
  1. Now create a simple 2 item list :
    • Click on plus_signand select List
    • The list will be created using the default bullet which is disc “•”
  1. From the block side panel in the Advanced CSS classes add “square”

• Square Class to be added to Dashboard -> Appearence->Customize->Additional CSS

.square{
  list-style-type:square;
}
Yoga 2 Life coach Certification

• The simple 2 item list will initially look as below

  • Item 1
  • Item 2

• After adding the square class list will look as below

  • Item 1
  • Item 2
NOTE: You may not see the bullets as a square in the edit page but go to the preview and you will see it changed.

• Change bullet Style (square, round, etc) for the indented level in a list
  • You can’t change it by adding class in the block Advanced CSS classes in the right-side panel
  • You need to change it using HTML
  • As advised before, duplicate your block
  • Then from the 3 dots on the block top menu select duplicate
  • You find the HTML code as to the side->
  • Change the HTML code as in the Modified block to the side
  • Main List Item
    • Indented List Item 1
Original HTML for a multilevel list
<ul><li>Main List Item<ul><li>Indented list Item 1</li></ul></li></ul>
Modified HTML for a multilevel list as below
<ul><li>Main List Item<ul style="list-style-type:square;"><li>Indented list Item 1</li></ul></li></ul>
  • Main List Item
    • Indented list Item 1
• Change bullet Color
  1. Add a new class that changes the bullet style to square
    • Go to Dashboard -> Appearence->Customize->Additional CSS
    • Add the code to the right and click on publish
    • Publish here add this class to the style.css file
    • The class name is “square” but the dot ” . ” before it declares it as a class
  1. Now create a simple 2 item list :
    • Click on plus_signand select List
    • The list will be created using the default black color
  1. From the block side panel in the Advanced CSS classes add “red”

• Red Class to be added to Dashboard -> Appearence->Customize->Additional CSS

.red{
	color:red;
}
.black{
	color:black;
}

• The simple 2 item list will initially look as below

  • Item 1
  • Item 2

• After adding the red class list will look as below

  • Item 1
  • Item 2
NOTE: You may not see the list in red on the edit page but go to the preview and you will see it changed.

• Keep text to black
  • TO change the color of the text back to black, you can’t do this from the block Advanced css classes
  • Duplicate your block for safety as described before
  • You find its HTML as to the side
  • We shall add <span> Tag around the list items text
  • We shall add: class=”black” to the span element opening tag
The HTML code of the list with all bullets and text in red
<ul class="red"><li>Item 1</li><li>Item 2</li></ul>
The Modified code with span element tags and class black, result below
<ul class="red"><li><span class="black">Item 1</span></li><li><span class="black">Item 2</span></li></ul>
  • Item 1
  • Item 2

Free Coaching Class

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.