text widget + unordered lists

  • carrie01

    #4476

    I cannot get the bullets to show in an unordered list in a text widget. I have used the following

    <span style="color:#33CC99">
    <p><b>
    <UL>
    <LI>Lots of free resources</LI>
    <LI>Designed for adults</LI>
    <LI>Practical, everyday contexts</LI>
    <LI>All main topics have introduction</LI>
    <LI>Saves you time</LI>
    </UL>
    </b></p>

    Can you help me? I’m not sure what I am doing wrong.

    Anonymous

    #28326
    <span style="color:#33CC99">
    <ul>
    <li><strong>Lots of free resources</strong></li>
    <li><strong>Designed for adults</strong></li>
    <li><strong>Practical, everyday contexts</strong></li>
    <li><strong>All main topics have introduction</strong></li>
    <li><strong>Saves you time</strong></li>
    </ul><br />
    </span>

    carrie01

    #28327

    I’ve just tried the code but there are still no bullets. I’ve also tried ticking the ‘automatically add paragraphs box’ but that just seems to remove my colour choice.

    Mod

    Kenneth John Odle

    #28328

    Bullets in widgets are turned off in the theme’s css, since so many widgets use unordered lists to display things.

    Use a special class for your text widget, such as “mywidget”

    In your custom css:

    .mywidget ul {list-style-type: circle;}

    You can use whatever you want for a bullet; see this.

    and in your text widget use:

    <div class="mywidget">
    <span style="color:#33CC99">
    <p><b>
    <UL>
    <LI>Lots of free resources</LI>
    <LI>Designed for adults</LI>
    <LI>Practical, everyday contexts</LI>
    <LI>All main topics have introduction</LI>
    <LI>Saves you time</LI>
    </UL>
    </b></p>
    </div>

    You could also target just that text widget if you know its ID number. See this tutorial:

    http://blog.kjodle.net/2012/02/24/styling-wordpress-posts-pages-archives-and-home-pages-by-class/

    carrie01

    #28329

    Thank you – that’s great. The whole thing is too close to the edge of the widget. I have tried putting in padding (using the w3school site) but can’t seem to find the right place to put the instruction.

    Mod

    Kenneth John Odle

    #28330

    You can add padding to the <div>, to the <ul>, or to th <li>. You’ll have to play around with it to find a combination that works well for you.

    Try using Firebug. You can play with those settings on the fly. It’s really efficient!

    carrie01

    #28331

    Thanks – I’ve managed to sort it out.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!