Changing bullit into an image

[Guido]

Hi,

I'm using the skinny sales template for my first salespage where I want to change the default bullet into an image.

I've seached google and tried a lot of things the last 4 hours but nothing seems to work.

I've tried to change the styles.css and the salespage2.php (I have no experience with this, well 4 hours ;)).

I've also changed the bullet.png file on the server. But no luck.

These are the 2 paths I've tried:

www/wp-content/themes/socrates/images I think this is the default directory.

public_html/valsspelen.com/wp-content/themes/socrates/images

This is the site.

What do I need to do to get an image for the bullets?

Thanks,

Guido

[Dan Nickerson]

If you just search the forum for: bullets skinny

You'll find a few posts on this.. basically the skinny salespage has its own css in css/skinnysalespage.css

Just find this code.


#bullet li {

[Guido]

I had already read all those posts, but no solution so far. Only one seems to go about my problem. I've searched for #bullet li { in the salespage2.php (skinny sales page template) but no results. No clue what to do.

[Dan Nickerson]

If you read my post above you'll see I did not reference salespage2.php.

You need to edit css/skinnysalespage.css

You edit that file via FTP or your file manager.

[Guido]

Ok, I knew you didn't reference to a salespage2.php, but I had no idea where I could find the css/skinnysalespage.css file. I've edited the file to:

#bullet li
{
padding: 0px 18px 5px 14px;
background-image: url('http://www.socratestheme.com/downloads/wp-content/themes/socrates/images/omdathetkan24.jpg');
background-repeat: no-repeat;
}

I've uploaded the omdathetkan24.jpg file to /public_html/wp-content/themes/socrates/images/bullet.png

I think I did what was said in:

http://www.socratestheme.com/forum/showthread.php?662-CSS-help-with-bullets-and-quote-graphic/page2

But it still doesn't work.

Thanks Guido

[lynnth]

The filename in the background image path needs to match the name of the file you uploaded.

[Guido]

It does, omdathetkan24.jpg is in /public_html/wp-content/themes/socrates/images/ and
public_html/valsspelen.com/wp-content/themes/socrates/css

[lynnth]

OK - In the earlier post you posted
I've uploaded the omdathetkan24.jpg file to /public_html/wp-content/themes/socrates/images/bullet.png - made it sound like you renamed it to bullet.png when you uploaded the image.

[Dan Nickerson]

that's not the right path.. use an absolute path.. http://yourdomain.com/wp-content/themes/socrates/images/filename.png

[Guido]

I've uploaded a vink.png file to public_html/valsspelen.com/wp-content/themes/socrates/images

I've changed the path to:

http://valsspelen.com/wp-content/themes/socrates/images/vink.png

No luck.

[Guido]

I see the correct image when i write: http://valsspelen.com/wp-content/themes/socrates/images/vink.png in the browser, but I don't see the images when I look on my site.

[Dan Nickerson]

You need to change


<ul style="text-align: left;">

to

<ul id="bullet">

in the html tab of your page editor.

You'll need to adjust padding for your image size as well.

Change


padding: 0px 18px 5px 14px;

to

padding: 5px 18px 5px 29px

[Guido]

Yay, thank you so much for helping me out.

I have a 2 more questions:

1) What do the 5px 18px 5px 29px mean? I understand it's about the number of pixels, but which is which?

2) What program do you use to figure out the px of a picture?

I'm sorry about all the stupid questions but this stuff is all new for me. Thanks a lot.

[Dan Nickerson]

It's the bullet padding.. you'll see it in skinny css... padding is top,right,bottom,left
Install Firebug for Firefox.. it's a great plugin to help you figure out design elements and css.