View Full Version : Changing bullit into an image

05-06-2012, 10:42 AM

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.


This is the site.

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



Dan Nickerson
05-07-2012, 01:00 PM
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 {

05-09-2012, 11:13 AM
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
05-09-2012, 11:22 AM
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.

05-09-2012, 01:19 PM
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:


But it still doesn't work.

Thanks Guido

05-09-2012, 01:23 PM
The filename in the background image path needs to match the name of the file you uploaded.

05-09-2012, 01:29 PM
It does, omdathetkan24.jpg is in /public_html/wp-content/themes/socrates/images/ and

05-09-2012, 01:46 PM
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
05-09-2012, 03:43 PM
that's not the right path.. use an absolute path.. http://yourdomain.com/wp-content/themes/socrates/images/filename.png

05-09-2012, 09:51 PM
I've uploaded a vink.png file to public_html/valsspelen.com/wp-content/themes/socrates/images

I've changed the path to:


No luck.

05-09-2012, 09:54 PM
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
05-09-2012, 10:18 PM
You need to change

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


<ul id="bullet">

in the html tab of your page editor.

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


padding: 0px 18px 5px 14px;


padding: 5px 18px 5px 29px

05-10-2012, 11:38 AM
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
05-10-2012, 10:01 PM
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.