Using images as bullets with correct alignment

Here’s a solution that Amy Wood, Success Coach, and I implemented with CSS styling. I’d never used CSS, so If I can do it, so can anyone else. Following is an excerpt from one of Amy’s emails with my annotations regarding further questions I asked and the clarifications that Amy provided. This solution really works and you can even use different size/color/image bullets on the same page as I discovered, simply by using a different CSS script for each text box - if needed, as I required, you can manage mobile pages separately from desktop as well by managing each text box with a different script:

What does this solution do?

It simply replaces the tiny automatic bullets that UnBounce creates in bulleted text with any bullet you choose. Here’s how:

Amy:
"Amy here from Unbounce. Great chatting with you just a few moments ago 🙂

I understand you’d like to use images as your bullet points–you can absolutely do this! I’ve included the how-to below:

Change the size of the image.  I noticed the actual size of the bullet is a tad larger than what you would like. You’ll need to re-size the image outside of Unbounce (in Photoshop) and re-save it with the correct dimensions.

Gerry: The image I found online was a round circle 16 pixels (png). I reduced it to 10 px on Mac using Preview, no access to photoshop needed; I think Pixler, a free online app similar to Photoshop would also have worked, but Preview is much easier for just resizing. I saved the image to my desktop.

Host the image.  If you have somewhere you can host your bullet point image this is ideal, but if you don’t you can often host it on a free hosting site (such as http://httpsimage.com/). Simply upload your image to this free SSL-secured hosting site and you’ll be provided a URL which you’ll use in your CSS script.

Gerry: I used the suggested site and it worked perfectly. No cost, no muss, no fuss, just upload and forge about it. I uploaded the bullet image and the site provided a URL for me to insert in the CSS script. I suppose you could host the button anywhere and I may try that later.

Delete the individual bullet images on your page currently.

Gerry: I had previously uploaded the bullets as images to my library in UnBounce and placed them over the the UnBounce bullets or created the text without bullets and then added my images and placed them next to text that I wanted to appear as bulleted. This wasted many hours because from trial to trial, browser to browser, desktop to mobile, these bullets would not remain aligned with the proper text; they’d be too high, too low, had to be adjusted every time I edited text. Really bad solution.

Hence Amy’s instruction to delete the bullet images I had tried to use. I could have omitted this instruction from Amy, but offer it in case you too have expreienced this frustration.

Place the following script in the CSS tab.

Gerry: This is the key! Inserting this CSS script (CSS scripts at bottom of Editor) once per text box (as highlighted) replaces the UnBounce’s automatic bullets (with bulleted text)  with your custom bullet. 

Here is the script Amy gave me.

 #lp-pom-text-854 li {

    padding-left: 30px;

    background-image: url(http://i59.tinypic.com/2rdc2vk.png);

    background-repeat: no-repeat;

    background-position: 0px 07px;

    list-style: none;

  }

Amy: 

Note that you need to replace the following in the script:
-‘http://i59.tinypic.com/2rdc2vk.png’ with the URL of the hosted image

Gerry: I used the link Amy gave me in step 3, but I suppose that if you host the image on your own website (private page), you’d substitute your URL.

and

-’ #lp-pom-text-497’ with the proper element ID of the text box containing the bullet

If you need to apply this CSS rule to multiple text boxes (which it appears you will have to), you can do so by simply adding a comma between each text box ID (see below for example).

 #lp-pom-text-497, #lp-pom-text-123, #lp-pom-text-284, #lp-pom-text-854 li {

    padding-left: 30px;

    background-image: url(http://i59.tinypic.com/2rdc2vk.png);

    background-repeat: no-repeat;

    background-position: 0px 07px;

    list-style: none;

  }

Once you've added this, simply save and Preview your page--you should see the image bullets now :)"

____________________End Amy’s note _____________________________

Gerry: I have several text boxes on my desktop and mobile pages and tried to implement Amy’s script as above, but it didn’t work for me. I probably made a mistake, despite several tries. To resolve this, I created a separate script for each text box and made an interesting discovery (new for Amy as well, who made no claim to being a CSS )

If you need different size bullets or even different images, you can simply modify the CSS script to reflect a different host page for the bullet and label the text box correctly in the script. 

Therefore, you could end up with a CSS script for each text box that uses bullets and each text box could have its own bullet image//color/size.

However, the problem of alignment remained: some bullets were still slightly too high, some too low, but Amy gave me the key to understanding the script. For example, here is one of my adjusted scripts:

 #lp-pom-text-854 li {

    padding-left: 20px;

    background-image: url(https://openmerchantaccount.com/img/bullet-dot-green10.original.png);

    background-repeat: no-repeat;

    background-position: 0px 08px;

    list-style: none;

  }

I learned from Amy what some of the values in the script do and made these changes: 

Padding-left is now 20px, not the 30 in the original script. Reducing the padding brings the bullets closer to the bulleted text. This was especially important in managing my mobile view text.

background-position: 0px 08px; background position is now 08px, not 07. Raising the number from 07 to 08px Lowers the bullet, and vice versa.

So now, thanks to Amy Wood’s great help, I can manage bullets anytime, anywhere, using more than one image/size or color/ per page and manage them differently on desktop or mobile. I’m still CSS naive, but I can manage bullets. Whew!

Hope this helps,

gerry

Wow, Gerry! You rock!