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/

Reply via email to