3 Replies Latest reply on Oct 9, 2014 7:08 AM by Igor Khripunov

    Change Bullet Type/Spacing

      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?
        • Re: Change Bullet Type/Spacing
          Dory Viscogliosi
          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 
          • Re: Change Bullet Type/Spacing
            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>
            • Re: Change Bullet Type/Spacing
              Igor Khripunov
              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;   </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;   </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;   </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