2 {{ upvoteCount | shortNum }}
2 {{ upvoteCount | shortNum }}

CSS Question About Graphical Bullets

by Pindich
2 replies
Hi Everyone, I have a question about using my own images as bullets in an unordered bullet list (In Wordpress).

Here is what I know. I can put the bullet list normally in wordpress (this will just be the black dots), then create a css class and then go to my style sheet and define the style for this class and specify the image url of the bullet I want to use.

That is fine. But here is my challenge: If I want to use a different Image as bullet each time I create a new post or page then I will have to create a new class, style it and specify the url of the bullet.

Here is my question:
How can I create one class, style it in my css and then use that class in my post page and define what image to use right from my post? So rather than specifying the url of the image in my style sheet, can I do that instead in my post? If yes, please I will appreciate it if you can just show me with a pretty generic example.

Thanks for your help
#bullets #css #graphical #question
  • Profile picture of the author cassihl
    Hopefully I understand your question -

    You can create a class in your stylesheet then go into the 'text' view in your wordpress editor and insert class="customclassname" You could either put it in your ul like this: <ul class="customclassname"> or wrap your whole content in a div like this: <div class="customclassname"> depending on how you set up your stylesheet.

    Or, if that doesn't work, you can use inline styles with in the page. It would look something like this: <ul style="list-style-image: url('someimage.jpg');">

    You have to do this within text view though, not in the visual editor.
    Signature
    {{ DiscussionBoard.errors[10216739].message }}
    • Profile picture of the author Pindich
      Originally Posted by cassihl View Post

      Hopefully I understand your question -

      You can create a class in your stylesheet then go into the 'text' view in your wordpress editor and insert class="customclassname" You could either put it in your ul like this: <ul class="customclassname"> or wrap your whole content in a div like this: <div class="customclassname"> depending on how you set up your stylesheet.

      Or, if that doesn't work, you can use inline styles with in the page. It would look something like this: <ul style="list-style-image: url('someimage.jpg');">

      You have to do this within text view though, not in the visual editor.
      Thanks very much for your reply. The Inline styles works but I was hoping I could do all the styling in the style sheet so that I can get the bullets to appear just the way I want them. Currently the alignment is wonky.

      I think it will be more easy to put all the styling in the css stylesheet and then just call the class and the image on the page or post.

      What do you think? Any more sugestions
      Signature
      Could This IM Magazine Be Just What We Have Been Missing In The Industry?

      For Marketers Who Want To Take Action But Just Can't Start! Click Here
      {{ DiscussionBoard.errors[10216771].message }}
  • Profile picture of the author Iftekhar9
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[10217598].message }}

Trending Topics