Replace Sidebar bullets with custom image

  • Resolved pmardle

    (@pmardle)


    12 years, 11 months 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

Viewing 9 replies - 1 through 9 (of 9 total)

  • 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. ??

    Thread Starter pmardle

    (@pmardle)

    https://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 FTP…

    Thanks,

    Peter

    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.

    Thread Starter pmardle

    (@pmardle)

    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 https://www.minecolonmod.net/wordpress/wp-admin/images/Logo-Small.png and this doesnt seem to want to work… ??

    I’m Such a noob..

    Thanks again,

    Peter

    Thread Starter pmardle

    (@pmardle)

    Image is 22×24 pixels if that is of interest…

    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

    Thread Starter pmardle

    (@pmardle)

    YAY !!

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

    Cheers,

    Peter

    Glad I could help.

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Replace Sidebar bullets with custom image’ is closed to new replies.