Change Bullet Type/Spacing

[Anonymous]

Is there a way to change the type of bullets within Marketo to appear as a shape other than the circles? Or is the only option in import an image?

Also, is it possible to make the spacing between bullets and the text above bullets a single space instead of double spaced?

[Dory_Viscoglio]

Hi Michelle, sometimes I find it easiest to use bulleted lists in tables, so that you're easily able to adjust the spacing within the table. You can use any type of "icon" you'd like within the HTML as well. Here's an example of different arrows you can use by adding the &code into the HTML. http://character-code.com/arrows-html-codes.php 

[Anonymous]

It is just a matter of either changing the template CSS if this should be universal or the inline code of the email/landing page if this is just a one off thing.
Here is some sample code for the inline.
<ul>
<li style="list-style:square;"> Square shape</li>
<li style="list-style-image: sampleimage.jpg;">Bullet from custom image</li>
<li style="list-style:image@URL.com;"> Bullet from URL image</li>
</ul>
        
As far as controling the spacing if you add the style line-height into the list items with the list style you should be able to control it. ( <li style="line-height: 10px; list-style:square;"> sample line spacing </li>

[Igor_Khripunov · Accepted solution]

This is the best solution, that I know, because you can control all of styles: list-type, margin, text style....ALL

 <!-- Bullets starts -->

                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">

                                            <tr>

                                                <td valign="top" align="right" width="35" style="line-height: 18px;">

                                                    <span style="font: 11pt Arial, Sans-Serif; color: #444444;">&bull;&nbsp;&nbsp;&nbsp;</span>

                                                </td>

                                                <td valign="middle" style="line-height: 18px;">

                                                    <span style="font: 10pt Arial, Sans-Serif; color: #444444; line-height: 18px;">This is bullet №1</span>

                                                </td>

                                            </tr>

                                            <tr>

                                                <td height="5" colspan="2" style="border-collapse: collapse;">

                                                    <div style="margin: 0; padding: 0; line-height: 0;">

                                                        <img src="indent.gif" border="0" width="1" height="1"

                                                            style="display: block;" alt="" />

                                                    </div>

                                                </td>

                                            </tr>

                                            <tr>

                                                <td valign="top" align="right" style="line-height: 18px;">

                                                    <span style="font: 11pt Arial, Sans-Serif; color: #444444;">&bull;&nbsp;&nbsp;&nbsp;</span>

                                                </td>

                                                <td valign="middle" style="line-height: 18px;">

                                                    <span style="font: 10pt Arial, Sans-Serif; color: #444444; line-height: 18px;">This is bullet №2</span>

                                                </td>

                                            </tr>

                                            <tr>

                                                <td height="5" colspan="2" style="border-collapse: collapse;">

                                                    <div style="margin: 0; padding: 0; line-height: 0;">

                                                        <img src="indent.gif" border="0" width="1" height="1"

                                                            style="display: block;" alt="" />

                                                    </div>

                                                </td>

                                            </tr>

                                            <tr>

                                                <td valign="top" align="right" style="line-height: 18px;">

                                                    <span style="font: 11pt Arial, Sans-Serif; color: #444444;">&bull;&nbsp;&nbsp;&nbsp;</span>

                                                </td>

                                                <td valign="middle" style="line-height: 18px;">

                                                    <span style="font: 10pt Arial, Sans-Serif; color: #444444; line-height: 18px;">This is bullet №3</span>

                                                </td>

                                            </tr>

                                        </table>

                                        <!-- Bullets end -->
___

then indent.gif is GIF transparent images