How do I insert an image in order to use it as a bullet for a list?

Hi,

I'm trying to use my logo as a bullet. However, I'm unable to insert the image into the text box. Every time I've tried to do so, the image creates its own box apart from the text box. The text I'm trying to bullet is located on my home page at http://wsbydesign.com. The list is: Custom Web Design, Brand Management and Content Strategy.

When I've tried to simply insert bullets using the Text edit box, the text is changed from Heading 02 to Paragraph. When I attempt to change the text back to Heading 02 the bullets disappear.

Can you help me resolve this issue?

I look forward to hearing from you.

Thanks so much!
Kimberly

I also tried using the bulleted list option when editing the list and the system changes the Font Size to paragraph rather than header (2, 3, etc.) and the Font Color defaults to black.

  • Rupok

    Hi Kimberly Cohen ,

    I'm trying to use my logo as a bullet

    Please use the following custom CSS Code to use your logo as a bullet:

    .upfront-output-object ul {
      list-style-image: url("http://wsbydesign.com/wp-content/uploads/2015/06/WS-By-Design-Logo-268x115-1887.png");
    }

    You can add this CSS in Global Theme CSS section inside your Upfront Editor.

    Please note, your logo image is quite large for a bullet, you should create a very small version of that, upload that in your site and use that image url in this custom CSS Code.

    When I've tried to simply insert bullets using the Text edit box, the text is changed from Heading 02 to Paragraph. When I attempt to change the text back to Heading 02 the bullets disappear.

    I could tell you better about the issue if I could see it live, check your current configuration and make some tests on your site. Would you mind allowing Support Access so we can have a closer look at this?

    To enable support access you can follow this guide here:
    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    I'm looking forward to hear from you and resolve this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Kimberly Cohen

    Hi Rupok,

    Thank you for the instructions. I first reduced the size of the logo substantially so it's now 25px/25px then uploaded it. I found the URL for it and created the following code using your example:
    .upfront-output-object ul {list-style-image: url (“http://wsbydesign.com/wp-content/uploads/2016/09/WS-By-Design_Logo-Image.gif”);}
    I then entered Upfront, accessed Global Settings, copy and pasted the above. I also included a comment so I could reference it and know why it was added. I also added the code when I was in responsive mode. Unfortunately, when I access text mode for the items I'd like to bullet, the newly created list-style-image does not appear.

    I'd really appreciate your help with this. I've given you access to review and make changes to the site.

    I look forward to hearing from you soon again.

    Sincerely,
    Kimberly

    I

  • Kimberly Cohen

    Hi Ash,

    Thank you for responding to my inquiry. I hope you're enjoying your day. All is well here.

    As you requested, I opened Upfront which defaults to the Home page; then opened the Global Theme CSS to confirm that the code I shared in my previous ticket was there. It is located at the very bottom of the CSS on line 226.

    The full code including the comment is:

    /*additional bullet type */
    .upfront-output-object ul {list-style-image: url (“http://wsbydesign.com/wp-content/uploads/2016/09/WS-By-Design_Logo-Image.gif”);
    }

    I've attached two screen shots for your review. One is of the home page (http://wsbydesign.com/?editmode=true) and the other is of the portfolio page (http://wsbydesign.com/edit/page/2336) both are in edit mode so that you can see that the Global Theme CSS exists for each page.

    Please understand that when I'm able to use the added bullet to the list, I want to be able to use the bullets with the Heading 02 style. I don't want the text to revert to paragraph style as is typical when using a bulleted list in Spirit.

    I hope the additional information helps clarify the situation.

    I look forward to hearing from you soon.

    Sincerely,
    Kimberly

  • Rupok

    Hi Kimberly,

    Thanks for granting Support Access. I can see the code you added, but it seems like there is error with quotation mark. You used this

    But you should be using this:
    "
    Please check the attached screenshot for reference.

    And you also used space after "url".

    However, I've changed and fixed the code myself and now in your homepage, your list image is showing fine. Please check the attached screenshot for reference.

    Please let us know if you need any further assistance from us. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Kimberly Cohen

    Hi Rupok,

    I hope you're having a wonderful day!

    Thank you for reviewing the code and finding and sharing the glitches! I'll have to remember to be more careful with the type of quote used as well as being more aware of how many spaces used in the code string.

    Also, thank you so much for changing the bullet icon in the lists under each of the images in the body of the webpage. That looks really sharp!!!

    This all started because I wanted to use bullets in the top region of my home web page, but I guess I've not been as clear as I'd hoped to be. Is there a way to use the bullet icon without changing the size and strength of the font? Please see att'd.

    I look forward to hearing from you again soon.

    Sincerely,
    Kimberly

  • Nithin

    Hi Kimberly Cohen,

    Hope you are doing good today. :slight_smile:

    Thank you for sharing the screenshot, I have made the texts as list, and have added the following CSS rules in your custom preset align center:

    .plain-text-container ul li {
        font-family: "Open Sans", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 26px;
        line-height: 1.1em;
        color: rgba(0,0,0,1);
    
    }
    .plain-text-container ul {
        padding-left: 30%;
    }

    You can adjust the padding-left value in order to center the list, please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.