WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] List bullet image (20 posts)

  1. ssdesign
    Member
    Posted 8 years ago #

    I know this question has been asked many times but i seem to be still stuck even after reading all postes on this.

    I want to have list bullet images.

    I have changes the css like this:

    #sidebar ul {
    list-style-image: url(wp-images/bullet.gif);
    }

    I still cant see the bullet, IE of Firefox, it wont show anything :(

    Any help?

  2. Mark (podz)
    Support Maven
    Posted 8 years ago #

    Which site ?
    I do not see that in the css linked from your name.

  3. ssdesign
    Member
    Posted 8 years ago #

    oh i am sorry, i am testing my website locally on my machine before i deploy it on live server.

    Let me know if copying any part of the code that you would like to see.

  4. Beel
    Member
    Posted 8 years ago #

    <meta name="generator" content="http://www.movabletype.org/" />

    Bleck! Ptooey! ;-)

  5. Beel
    Member
    Posted 8 years ago #

    Make sure the image directory is relative to where your css is, or else you will have to use an absolute path.

  6. ssdesign
    Member
    Posted 8 years ago #

    yes, i am currently on MT and re-designing my blog and shifting to wordpress.

    Since the design is still being done, my live site still remains on MT untill i am done with the design problems.

  7. ssdesign
    Member
    Posted 8 years ago #

    i tried putting absolute path as well :(
    no luck.

  8. Mark (podz)
    Support Maven
    Posted 8 years ago #

    No link ?
    that will get you your answer - without one it's like shooting black cats in the dark :)

  9. ssdesign
    Member
    Posted 8 years ago #

    ok, let me try an host a test blog on my website.
    will be back soon with the link.

  10. ssdesign
    Member
    Posted 8 years ago #

    ok i have created a live blog, can you look at this and tell me whats wrong here with list bullets in sidebar?

    http://www.ssdesigninteractive.com/ssdesign

    note: Since this is a test blog, the links in the tab will point to "localhost"

  11. Mark (podz)
    Support Maven
    Posted 8 years ago #

    /ssdesigninteractive/images/side_bullet.gif

    is different to
    #sidebar ul {
    list-style-image: url(wp-images/bullet.gif);
    }

  12. ssdesign
    Member
    Posted 8 years ago #

    side_bullet.gif is used to put a bullet in front of the sidebar titles.

    bullet.gif is used to put a small bullets in front of the list items.

    Now I have also placed the bullet.gif in the ssdesigninteractive/images folder and changed the CSS to refliect it.

    Still its not showing.

  13. Mark (podz)
    Support Maven
    Posted 8 years ago #

    The css is in your machine. We cannot see it.
    Go ahead and create your site and as soon as you publish to the net we will assist with this problem.

  14. ssdesign
    Member
    Posted 8 years ago #

    my bad,
    while hurriedly trying to post the site on live server, i didnt change the DB.

    i have modified it now, you can view the css.

  15. Mark (podz)
    Support Maven
    Posted 8 years ago #

    Put the FULL url to the image
    content: url(http://www.ssdesigninteractive.com/images/bullet.gif)

  16. ssdesign
    Member
    Posted 8 years ago #

    i put the complete URL. Still nothing :((

    feel like crying.

  17. Mark (podz)
    Support Maven
    Posted 8 years ago #

    Your css is all on one line and impossible to work with.

    Copy all of it below the header info.
    paste it here
    http://flumpcakes.co.uk/css/optimiser/
    Copy that output
    Paste it back into your css file.

  18. Mark (podz)
    Support Maven
    Posted 8 years ago #

    #sidebar ul {
    list-style-image: url(http://www.ssdesigninteractive.com/ssdesign/wp-content/themes/ssdesigninteractive/images/bullet.gif);
    }
    #sidebar ul li {
    list-style-type: none;
    list-style-image: none;
    margin-bottom: 15px;
    }

    First statement says "Use this image"
    Second says "No images thanks"

    Where do you want them ?

  19. Beel
    Member
    Posted 8 years ago #

    The problem is you have this:
    .entry ul li:before, #sidebar ul ul li:before {
    content: url(path-to-image/bullet.gif) no-repeat 0 0%;
    }
    and it should be:
    .entry ul li:before, #sidebar ul ul li:before {
    content: url(path-to-image/bullet.gif);
    }

  20. ssdesign
    Member
    Posted 8 years ago #

    Thanks for picking up this error.

    Removing "no-repeat 0 0%" solved my problem :)

    Thanks to everyone, also the CSS optimizer tool is great.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags