CSS For Graphic in UL Help Please

by 11 replies
13
I've used the Flexibility3 theme for a few sites and I'm very happy with it. But, I'm just setting up a new blog and I want to replace the default circle in an unordered list with a graphic.

In other themes, it's a simple CSS edit. In the Flexibility3 theme you enter Custom CSS edits in the Option section.

I uploaded the graphic to the media library and tried various variations of its address in the custom code section...

Example:

ul
{
list-style-image: url('/wp-content/uploads/2012/06/tiny-arrow.gif');
}


I've also tried entering the full path to the image.



I've posted the same question on the Flexibility3 Forum, but no-one has responded, so please, can any Warrior help?


Thanks
Anne
#website design #css #graphic
  • Anyone......?????
    • [1] reply
    • Hi Anne, I am not very conversent with wordpress or with the individual themes but there is one general point that struck me. Something I have had trouble with in the past is that an image is usually assigned an uppercase extension (.GIF) and IE8 will not read it when called for as .gif
      I now use filezilla as a matter of course to simply rename an image.GIF to image.gif before uploading any image. May have no bearing on your problem but perhaps worth checking? Good luck with it.
      Jim
  • Anne,

    I don't know if you've tried this already, but this might be worth a shot.

    ul
    {
    list-style-image: url('../wp-content/uploads/2012/06/tiny-arrow.gif');
    }

    I've simply added '..' before the address.
    • [1] reply
  • your best bet is to place the image inside your theme images folder ie mytheme/images and then reference it using url('images/tiny-arrow.gif''')
    • [1] reply
    • Thanks everyone. I tried all your suggestions but nothing worked.. :-(

      The flexibility3 forum still hasn't responded to my post and someone on a CSS forum suggested I use a workaround with tables - the graphic in one side and text in the other. I hate to be admit defeat, but I guess that's what I'm going to have to do.

      Thanks again.
      Anne
      • [1] reply
  • Thats strange...

    Do you want to post the full link to the image here and the link to the site page that has the list you are trying to edit (or one of them anyway) and I'll have a closer look for ya


    you can PM me the details if youd prefer not to publicly advertise your niche
  • The problem with relative path to images in WP is that on different pages and post views (with nice permalinks) the image is located in a place that has a different path for each of those views... so it is very difficult to use a relative path like in the OP.

    But if not even the absolute path works... then it is not a path issue.
  • PM me, I'll help you for free.
    • [1] reply
    • Thanks everyone for all your advice. I worked around it using a table - not perfect as regards CSS, but it looks just as I wanted and I'd already spent a day and a half beating my head against a brick wall.

      No-one on the CSS Forum could help and I never even got a response from the Flexibility3 Forum.

      I've worked with the Flexibility2 and 3 themes a lot and never before encountered a situation I couldn't work out for myself with them. Very frustrating, but a table works..
Join the discussion

Next Topics on Trending Feed

  • 13

    CSS For Graphic in UL Help Please

    I've used the Flexibility3 theme for a few sites and I'm very happy with it. But, I'm just setting up a new blog and I want to replace the default circle in an unordered list with a graphic. In other themes, it's a simple CSS edit. In the Flexibility3 theme you enter Custom CSS edits in the Option section.