WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Replace Sidebar bullets with custom image (10 posts)

  1. pmardle
    Member
    Posted 2 years ago #

    Hi,

    Tried looking up several ways of replacing the standard bullet icons in my template (Coraline) with a custom image (.png) file.

    All the tutorials tell you the code lines to add, but none make it clear exactly WHERE this goes.. I assume its style.css but even in this file its not clear.

    Can someone explain in layman terms (only started with WordPress today and have no programming/.css experience) how to do this.. (and the exact right code as there are several different suggestions out there..

    Many Thanks,

    Peter

  2. James Laws
    The WP Ninjas
    Posted 2 years ago #

    If you can provide a link to the content you would like to change I can show you exactly what you need to do and where to put it. :)

  3. pmardle
    Member
    Posted 2 years ago #

    http://www.minecolonymod.net

    The bullets for the sidebar on the left.. Small black squares, want to replace them with a custom .png image I have already uploaded via http://FTP...

    Thanks,

    Peter

  4. James Laws
    The WP Ninjas
    Posted 2 years ago #

    OK, find line 852 in your style.css and replace:

    .widget-area ul ul {
    	list-style: square;
    	margin: 0 0 1.5em 1.5em;
    }

    with

    .widget-area ul ul {
    	list-style-image: url("images/YOUR_IMAGE.png");
    	margin: 0 0 1.5em 1.5em;
    }

    Obviously change "YOUR_IMAGE" with whatever bullet image you uploaded to your themes images directory.

    You may need to adjust some margins or padding depending on your image but that can all be done near this section of code in the style.css file.

  5. pmardle
    Member
    Posted 2 years ago #

    Awesome, Very close...

    Existing bullets have disapeared, but the new image isn't showing..

    Can you confirm where the image or /images/folder should be.. mine is currently at the http://www.minecolonmod.net/wordpress/wp-admin/images/Logo-Small.png and this doesnt seem to want to work... :P

    I'm Such a noob..

    Thanks again,

    Peter

  6. pmardle
    Member
    Posted 2 years ago #

    Image is 22x24 pixels if that is of interest...

  7. James Laws
    The WP Ninjas
    Posted 2 years ago #

    Your bullet image should be stored in your themes images directory not in wp-admin.

    this would be /wp-content/themes/coraline/images/ most likely.

    in the style.css for the url you should just be able to use images/YOURIMAGE.png

  8. pmardle
    Member
    Posted 2 years ago #

    YAY !!

    Top Chap, thanks for the awesome help !! Have a feeling i'll be here pretty often !!!

    Cheers,

    Peter

  9. James Laws
    The WP Ninjas
    Posted 2 years ago #

    Glad I could help.

  10. jcpcosta
    Member
    Posted 1 year ago #

    I'd like to do the same but I have a different image for each link...how can I associate them?

Topic Closed

This topic has been closed to new replies.

About this Topic