CSS For Graphic in UL Help Please

by AnniePot

Posted: 12 years ago 11 replies

WEB DESIGN

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

#css #graphic

AnniePot 12 years ago

Anyone......?????
- Thanks
- 1 reply
{{ DiscussionBoard.errors[6565809].message }}
- jamaks 12 years ago
  
  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
  
  Thanks
  
  {{ DiscussionBoard.errors[6566188].message }}
Pragun 12 years ago

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.
- Thanks
- 1 reply
Signature

Web development problem? No problem! Contact me and let's make it happen!
Color Coding the world, one pixel at a time.
{{ DiscussionBoard.errors[6566382].message }}
- ronc0011 12 years ago
  
  Honestly the path to images in a wordpress site usually has me pulling my hear out I usually end up finding the image in my FTP client and then trying it in a browser i.e. http://mysite.com/wp-ontent/images/myimage.gif and if my path is correct my image will display in the browser. Then there are other possible variations such as preceding the path with "./" or "././" there are a number of variables that can alter the path such as where the calling page is in your sites folder structure in relation to the root folder This can get confusing in a php site because the calling code isn't always where the actual page is It may in fact be in its own separate folder. All I can tell you is good luck In the end it's just a matter of figuring out where the actual image is and configuring your path correctly. Like I said you can enter the whole url in a browser and if the path is correct it will display your image. For these reasons it's a real good idea to have a goof FTP client so you can see your sites folder structure. Theen you can see how to configure your p0ath in your <ul> and or <li> tags. list-style-image:url("./wp-content/images/myimage.gif");
  
  Thanks
  
  {{ DiscussionBoard.errors[6566577].message }}
webpeon 12 years ago

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''')
- Thanks
- 1 reply
Signature

Web 2 Mobile
The Future of The Web
{{ DiscussionBoard.errors[6568211].message }}
- AnniePot 12 years ago
  
  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
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[6569317].message }}
  
  ronc0011 12 years ago
  
  There are basically two approaches to using an image for a list bullet. The first is of course "list-style-image;' and it uses the url to your image . However the placement of the image is a bit cumbersome and awkward. The other way is to give the <li> element a background image, again using the url to your image but by making it a background you can greatly tweak and fine tune the placement of the image on your <li> element. Just Google it for <li> background image and you will find lots of stuff on how to set this up.
  
  [ 1 ] Thanks
  
  {{ DiscussionBoard.errors[6570233].message }}
webpeon 12 years ago

Thanks everyone. I tried all your suggestions but nothing worked.. :-(

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
- Thanks
Signature

Web 2 Mobile
The Future of The Web
{{ DiscussionBoard.errors[6571461].message }}
Istvan Horvath 12 years ago

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.
- Thanks
Signature
{{ DiscussionBoard.errors[6571862].message }}
spesialis 12 years ago

PM me, I'll help you for free.
- Thanks
- 1 reply
Signature
Website Design and Development - Satisfaction Guaranteed ... Click Here
{{ DiscussionBoard.errors[6572150].message }}
- AnniePot 12 years ago
  
  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..
  
  Thanks
  
  {{ DiscussionBoard.errors[6574530].message }}