Just a side note, if using jQuery you can change this dynamically. jQuery(".observations li .green_circle").css("background-color", "#000");
Best, Karl DeSaulniers Design Drumm http://designdrumm.com <http://designdrumm.com/> > On May 12, 2021, at 2:05 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > If a green circle is all you want, there is no need for an image. > > <!doctype html> > <html> > <head> > <meta charset="UTF-8"> > <title>Green Bullet List</title> > </head> > <body> > <style type="text/css"> > .observations { > list-style-type: none; > padding: 0; > padding-left: 30px; > position:relative; > } > .observations li .green_circle { > background-color: rgb(0,204,0); > font-size: 1.5rem; > width: 0.7rem; > height: 0.7rem; > margin: 0.2rem 6px 0 -0.9rem; > padding: 0; > border-radius: 49.99%; > position: absolute; > } > </style> > <ul class="observations"> > <li><span class="green_circle"></span> Text in list > tiem</li> > </ul> > </body> > </html> > > Season to taste! > > HTH, > > Best, > Karl > > > >> On May 11, 2021, at 7:21 PM, Larry Martell <larry.mart...@gmail.com> wrote: >> >> I have this code and it works, displaying a green circle instead of >> the defaut li bullet: >> >> .observations li::before { >> content: >> url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSIxMiIgd2lkdGg9IjEyIiB5PSItMSIgeD0iLTEiLz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBzdHJva2U9Im51bGwiIGZpbGw9IiMxYWFmNTQiIGlkPSJzdmdfMSIgZD0ibTAuMjAyMzEsNC45NzYxNjljMCwtMi42NTUzNTkgMi4xMzg2NTQsLTQuODA0MDQyIDQuNzgxNjIsLTQuODA0MDQyYzIuNjQxODA3LDAgNC43ODE2MiwyLjE0ODY4MyA0Ljc4MTYyLDQuODA0MDQycy0yLjEzOTgxMiw0LjgwNDA0MiAtNC43ODE2Miw0LjgwNDA0MmMtMi42NDI5NDcsMCAtNC43ODE2MiwtMi4xNDg2ODMgLTQuNzgxNjIsLTQuODA0MDQyeiIvPgogPC9nPgo8L3N2Zz4="); >> margin-right: 6px; >> } >> >> <ul class="observations" style="padding-left: 20px; list-style-type:none;"> >> <::before></::before> >> <li style="line-height: 1.25;"><span style="color: black;">Current >> version: Agile vGold Required version: Agile Silver</span></li> >> </ul> >> >> But now I need to change the color of the circle programmatically. I >> ran that base64 through a decoder and it came out with this: >> >> <path stroke="null" fill="#1aaf54" id="svg_1" >> d="m0.20231,4.976169c0,-2.655359 2.138654,-4.804042 >> 4.78162,-4.804042c2.641807,0 4.78162,2.148683 >> 4.78162,4.804042s-2.139812,4.804042 -4.78162,4.804042c-2.642947,0 >> -4.78162,-2.148683 -4.78162,-4.804042z"/> >> >> And I am trying to use that in my li::before (hoping I can then set >> the fill color): >> >> .observations li::before { >> background-image:url("data:image/svg+xml;utf8,<svg >> xmlns='http://www.w3.org/2000/svg' stroke='null' fill='#1aaf54' <path >> d='m0.20231,4.976169c0,-2.655359 2.138654,-4.804042 >> 4.78162,-4.804042c2.641807,0 4.78162,2.148683 >> 4.78162,4.804042s-2.139812,4.804042 -4.78162,4.804042c-2.642947,0 >> -4.78162,-2.148683 -4.78162,-4.804042z' /> </svg>"); >> } >> >> But no image is displayed. Can anyone see what I am doing wrong, or >> tell me another way I can change the color of the circle. >> >> Thanks! >> ______________________________________________________________________ >> css-discuss [css-d@css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > ______________________________________________________________________ > css-discuss [css-d@css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [css-d@css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/