Custom Bullets

  • Resolved brownknee

    (@brownknee)


    13 years ago

    Hello, I’m the office admin for my company. The CEO wanted me to tinker around with the site and make it look a bit better.

    I’m a new to WordPress, HTML and CSS, and I can’t seem to figure out how to change my bullets to a custom image. I’ve checked forums and different websites but I cant seem to find anyone that’s dumbed it down enough for a noobie to figure it out.

    I’d just like to know how to change the black default bullets to an image, any image that I’ve created. It seems like I have to change something, somewhere in the CSS stylesheet? AND the HTML coding on the page I’ll have my bullets on.

    What specific code do I need to change/add, and where would it be?

    Website: http://www.greenteamwindowcleaning.com/

    Thanks in advance, I’m on the verge of pulling out my hair.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Pioneer Web Design

    (@swansonphotos)

    13 years ago

    http://www.w3schools.com/cssref/pr_list-style-type.asp

    To discover what CSS is output by your theme, use a web inspection tool such as Firebug: http://getfirebug.com/ , Chrome Inspect Element: https://developers.google.com/chrome-developer-tools/ or Internet Explorer 9+ F12 Dev. Tools: http://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx#csstool

    There are others.

    When editing CSS, use a Child Theme
    http://codex.ww.wp.xz.cn/Child_Themes
    Custom CSS Plugin, or Theme provided custom CSS option.
    Edits to parent themes are lost on theme update.

    Learn CSS: http://www.w3schools.com/css/

    Thread Starter brownknee

    (@brownknee)

    13 years ago

    Thanks for the speedy reply, but that doesn’t quite answer my question.
    I’d like to add a CUSTOM bullet, not a square, greek symbol, or diamond.

    I’d like to use an image from another source.

    Pioneer Web Design

    (@swansonphotos)

    13 years ago

    http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

    WPyogi

    (@wpyogi)

    13 years ago

    See: http://www.w3schools.com/cssref/pr_list-style-image.asp

    Thread Starter brownknee

    (@brownknee)

    13 years ago

    Thanks again seacoat, but like I said, I’ve explored many different sites already. I’m new to coding and web design. None of the sites, including the few you’ve sent (most of which I’ve already explored), have given me a simple answer as to where I need to add the code in the CSS style sheet. Directing me to websites is not aiding or answering my questions to the extent that I require, because I’ve searched the websites extensively already.

    Is there a code somewhere in the sheet that needs editing? Or do I add a new code somewhere in the style sheet? If so, where does that code go?

    Thread Starter brownknee

    (@brownknee)

    13 years ago

    Thanks Wpyogi, I’ve seen this website already as well. And I figured this has something to do with what I need. But again, my question is where does the code

    ul
    {
    list-style-image:url(‘sqpurple.gif’);
    }

    get inserted? Or do I replace something that is already existing within my stylesheet?
    And how do I add a custom image to my page? Not purple squares.

    WPyogi

    (@wpyogi)

    13 years ago

    Generally best to add to a Custom CSS – which you can add via a plugin if your theme does not have it. Otherwise the changes will be overwritten when the theme is updated.

    Further, you probably don’t want to assign this style to every list on your site, so the CSS would need to be targeted more specifically than all ul elements.

    The code to add an image would not be the above, but

    ul {
   list-style-image:url('URL TO IMAGE HERE');
   }

    Which list(s) are you trying to do this on?

    Pioneer Web Design

    (@swansonphotos)

    13 years ago

    Please study the links we provided (this takes more than a few minutes) – if you do not understand them…stop…you will hose the site…

    Thread Starter brownknee

    (@brownknee)

    13 years ago

    Its only 1 list on the “Luxury Window Cleaning” page.

    http://www.greenteamwindowcleaning.com/5-point-luxury-window-cleaning/

    And thanks, I’ve tried doing that code you posted before with no luck.

    The CEO just threw this assignment at me Friday, it is literally my first time doing any work of this sort. I’ve managed to do everything he and I have wanted to implement so far, except for this last bit.

    How do I know if my theme has a Custom CSS or not?

    Again seacost, in reference the links you’ve sent me. I’ve studied them for more than “a few minutes.” I’ve read over the links you’ve sent me previously. I have been working to do this again, since Friday, with no success to this last bit of work that I need done.

    WPyogi

    (@wpyogi)

    13 years ago

    Probably doesn’t, but just try adding this to the bottom of the style.css file (go to that via Appearance > Editor) – find style.css in the right side list (might already be visible in the main screen there. Go to the bottom and add this:

    #post-24 ul {
   list-style-image:url('URL TO IMAGE HERE');
   }

    You’ll need to get the absolute URL file path to the image (after uploading it to the Media Library…

    Thread Starter brownknee

    (@brownknee)

    13 years ago

    Dude.

    I’m In love with you right now. That code worked! I tried a random image as a test and I got it to become my bullets.

    I’m assuming it had something to do with the “#post-24?”

    Thanks WPyogi, I really appreciate it, I get to keep the rest of my hair.

    WPyogi

    (@wpyogi)

    13 years ago

    LOL – glad to save your hair :)! The #post-24 simply applies that to only a list in that post. If you ever want it someplace else, you’ll need to look up the similar id for the post or whatever containing element.

    Thread Starter brownknee

    (@brownknee)

    13 years ago

    Gotcha! That much I can do if I need to do more custom bullets! 🙂
    Thanks again WPyogi!!

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

The topic ‘Custom Bullets’ is closed to new replies.