help with adding bulleted list with disc instead of square

  • Unknown's avatar
    ileneh · Member ·

    Hello,
    I’m not well-versed in CSS, having coded primarily and infrequently) in HTML 4 for the past few years.
    I added the UL and LI code to create a bulleted list to one page. I tried to add code like this : (I’ve removed the close tags, so that you can see the HTML without it drawing what the code says. 

    <ul>

<li>Coffee</li>
<li>Tea</li>
    </ul>

    That worked mostly ok, but every time I saved the page, WordPress would add extra ul codes!! I don’t understand why.
    THEN, I tried this:
    <ul style="list-style-type:disc"></ul>
    THIS DID NOT WORK. The filled circle (i.e. bullet) never appeared. Only the square bullets show up, no matter what type I put in.

    So, how do I get this to work?

    Should I add the CSS equivalent code to my site? If yes, where do I add it?
    Please be very specific, because I need it! (grin)
    Thank you, ilene

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    justjennifer · Member ·

    I added CODE tags to your above examples so it wouldn’t mess up the formatting. If something changed or was missed, I apologize. Please post it again between CODE tags.

    It’s my understanding that most inline CSS is no longer supported here on WordPressdotcom, so please wait for Staff to answer you.

  • kokkieh · Staff ·

    Hi there,

    The disc style is the default style for unordered lists, unless it’s specifically set to another style in your theme. Can you please give me a link to the post or page where you’ve added the list, so I can see it actually on your site?

    @justjennifer,

    It’s my understanding that most inline CSS is no longer supported here on WordPressdotcom, so please wait for Staff to answer you.

    Based on what are you saying this? I’ve used copious amounts of inline CSS on my site in the past with great success, and am not aware of anything we’re specifically blocking. If it can be used in the style-attribute for any supported HTML tag, it should be possible to use it here as far as I know. We just don’t have any documentation on using inline CSS, as browser support for it is not universal, and it can cause problems with theme switches.

  • Unknown's avatar
    ileneh · Member ·

    I made the post private with a password, because it’s sort of a convoluted resume! (Well, I liked it, but my son and sister said it was too hard to read!) LOL
    If you want to see it, do you mind emailing me and I can send the link & password? That way, the PW isn’t in a public place… Thank you for your help!

    [email redacted by mod]

  • Unknown's avatar
    justjennifer · Member ·

    @kokkieh, It was based on a Staff reply quite some time ago, around the time that the ability for users to change the gallery slideshow background via inline CSS was removed. I can try to find that forum post, but if this is not the case now, then I’d be happier to be corrected. Thanks.

    @ileneh- I removed your email address from your above post as you are posting in a public forum and we don’t want random people emailing you. @Kokkieh is support Staff and will be able to see the post even without the password if you give him the link.

  • kokkieh · Staff ·

    @justjennifer

    Galleries are inserted via a shortcode, not HTML, so there’s no way to make any changes to a gallery using inline CSS as there are no HTML tags to which you can add a style attribute. But with regular p, div and span tags, as well as lists, most of what works in the style attribute should work here – we might not support all of the newer CSS3 options.

  • kokkieh · Staff ·

    @ileneh

    The square bullet is specified in your theme, but you can override it with inline CSS.

    I had a look at your Resume page, and see you have your lists opening with this code:

    <ul type="disc">

    That code won’t do anything, as ul-tags don’t have a type attribute. It used to have, but that attribute is not used in HTML5. The style attribute is the only way to make this kind of change to a ul-tag

    Edit the opening tag of your lists to the following:

    <ul style="list-style-type: disc;">

    It shows the circular bullets for me if I use that.

    Or you can use this CSS in the Customizer’s CSS panel to change it for your entire site, including the widgets, all at once:

    ul, .widget-area ul ul {
	list-style: disc;
}
  • Unknown's avatar
    ileneh · Member ·

    @Kokkieh,

    Thank you so much, that’s exactly what I needed to know.
    (And, thank you to @justjennifer also.)

    I would like to change how the “bullet” looks in the whole site. I opened the CSS panel and have no idea where exactly to paste this code that you’ve given me. (It was the first time I’ve even seen the CSS panel.)

    When reading various wwwc3 help pages, it said you had to be careful where you pasted in CSS changes.

    Can I just paste that code you gave me at the top, so I don’t screw anything up? (grin)

    Again, thank you VERY much!

    ilene
    http://www.ilenesmachine.net/

  • kokkieh · Staff ·

    Paste the code I gave you on a new line at the bottom of the CSS editor box. As long as you paste it on a new line it should be fine.

    When reading various wwwc3 help pages, it said you had to be careful where you pasted in CSS changes.

    Those pages most likely refer to when you add CSS directly to the stylesheets of your site, and that’s not what you’re doing here. The Customizer allows you to add CSS without editing any files, so you can’t break anything by adding it. If any CSS you add makes a change you don’t want, you can just delete it again.

  • The topic ‘help with adding bulleted list with disc instead of square’ is closed to new replies.