Editing or replacing default bullet mark

  • Resolved elipsett

    (@elipsett)


    5 years ago

    The page shows ul lists with a fancy circle symbol, which is not well vertically aligned. It looks too low. I want to either move it up a bit to align with the text, or get rid of it and just use a middle dot (?).

    I have been advised that this is covered in css as:

    .entry-content ul > li {
	background: url(resources/images/bullet.png) left 10px no-repeat;
	padding-left: 20px;
}

    but I cannot figure out how to either move that PNG up a few pixels, or (better) just replace it with a simple middle dot (?).

    I can follow instructions but do not know much about how WP works..

    Thanks very much for your time.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael

    (@alchymyth)

    https://www.w3schools.com/cssref/css3_pr_background.asp

    you could move the ‘bullet’s up, by reducing the 10px in this line to 7px or 6px (that is the vertical background position):

    background: url(resources/images/bullet.png) left 10px no-repeat;

    or maybe better, to remove the ‘bullet’s, change the line to:
    background: none;

    then, to add a new style to introduce new bullets, add for example:

    .entry-content ul > li::before {
    content: "?"; padding-right: 7px; margin-left: -12px; 
}

    i.e. in total, post the full CSS changes via ‘Additional CSS’ in ‘Appearance – Customize’…

    .entry-content ul > li {
	background: none;
}
.entry-content ul > li::before {
    content: "?"; padding-right: 7px; margin-left: -12px; 
}
    Thread Starter elipsett

    (@elipsett)

    Thank you, Michael.
    Keep in mind that while I can follow instructions, I do not know much about WP…

    Replacing the PNG with the dot is the best approach, because then I can change it later with minimal effort. I will try and see…

    • This reply was modified 5 years ago by elipsett.
    • This reply was modified 5 years ago by elipsett.
    Thread Starter elipsett

    (@elipsett)

    That worked fine, thank you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Editing or replacing default bullet mark’ is closed to new replies.