• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Styling bullet lists - CSS entities or images as the bullet

New Here ,
Mar 02, 2022 Mar 02, 2022

Copy link to clipboard

Copied

Initially I was making pretty complex bullet-list-looking things using images next to text captions. 8 objects to make a 4-point bullet list. Absolute nightmare for responiveness and a pain to build.

 

I wanted my bullet lists to look like this, to match the designs I was provided:

 

andrewa300770_0-1646223618035.png

 

I devised a way to use CSS entities by injecting CSS into the head using an execute javascript action on the first slide of my projects, as such:

 

$('head').append('<style>
    [id*="_BLD"] ul li span.cp-liFirstLine::before {
        content: "\\\\\\\\2B2C"; 
        font-size: 0.8em; 
        color: #E84D0E; 
        display: inline-block; 
        width: 1.3em; 
        margin-left: -1.3em;
    } 
    [id*="_BLD"] ul li ul li span.cp-liFirstLine::before {
        content: "\\\\\\\\2B2D"; 
        font-size: 0.8em; 
        color: #E84D0E; 
        display: inline-block; 
        width: 1.3em; 
        margin-left: -1.3em;} 
    [id*="_BLD"]  span.cp-numbering {
        display: none !important;
    } 
    [id*="_BLD"] ul li span.cp-liFirstLine, 
    [id*="_BLD"] ul li ul li span.cp-liFirstLine {
        padding-left: 1.9em;
    }   
</style>');


You have to not have any line breaks in this, so here's the above without those:

 

$('head').append('<style>[id*="_BLD"] ul li span.cp-liFirstLine::before {content: "\\\\\\\\2B2C"; font-size: 0.8em; color: #E84D0E; display: inline-block; width: 1.3em; margin-left: -1.3em;} [id*="_BLD"] ul li ul li span.cp-liFirstLine::before {content: "\\\\\\\\2B2D"; font-size: 0.8em; color: #E84D0E; display: inline-block; width: 1.3em; margin-left: -1.3em;} [id*="_BLD"]  span.cp-numbering {display: none !important;} [id*="_BLD"] ul li span.cp-liFirstLine, [id*="_BLD"] ul li ul li span.cp-liFirstLine {padding-left: 1.9em;}</style>');

 

Then when adding a text caption or smart shape where you want any included bulleted list to pick up the above styles, simply add "_BLD" to its ID. The above will work with lists to 2 levels using a different CSS entity for each. I really love the 8 slashes in order to output a single slash in the code.

 

This should provide a start to being able to use any image you like as the bullet if there isn't a suitable entity. The outcome? Here's a bullet list using the above method, to 2 levels:

 

andrewa300770_1-1646223617959.png

 

 

Views

22

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation