Two things changing site map icons and firebug

[andybr1ggs]

hi

a) how can i change the sitemap, envelope, and bookmark icons

b)when using firebug what button do you press once edited some code to see it without having to upload to your server ??

Thanks

Andy

[razaro]

I use Firebug mostly to fix and try some new css code.
So first inspect, adjust properties and when i am satisfied with changes within firebug,
copy code to main css file.I do most testing on local server so that file is on my compute so
it is quick process copy small part of code from Firebug to text editor.

I'll answer your first question with example.
First position your mouse over star image, right click and from menu select Inspect element.
Firebug widow will appear, left HTML code, right CSS with this code at top

#header_links #header_link_bookmark a {
background-image:url("../img/icon/star.gif");
}

global.css (line 823)

That url is relative from global.css file.So if you are in css folder , you go up one level and then
through folders img and icon you find star.gif.

Here are also contact.gif and sitemap.gif.

Now you can replace those images with new ones .With same name or different and then change previous css.

Also you can find some image online and test it in Firebug.
Same process as above for star icon, but now in right CSS part click on

 url("../img/icon/star.gif");

and replace it with

url("http://icons3.iconfinder.netdna-cdn.com/data/icons/cc_mono_icon_set/blacks/32x32/star_fav.png")

And in attachment is screen-shot of your site after some changes :-)

And sorry for long post.

[timir]

I tried following the above steps but somehow the png icons do not seem to show up, the icon preview shows up in the firebug but not on the storefront page, I tried using other random png graphics too but none of them showed up. Seems like only gif images show up. I am using 1.3.1 the same goes with the inability to use PNG logo for the site, I tried going through some threads and following the steps regarding how to use PNG logos but none of them seem to work.

Prestashop is all in all a fabulous shopping cart , however hope it allows png support in future upgrades.

[rocky]

There's nothing is PrestaShop that would prevent you changing the sitemap icons to PNG files. You just need to copy sitemap.png, contact.png and star.png into img/icon directory in your theme's directory, then change lines 755-757 of css/global.css in your theme's directory from:

#header_links #header_link_sitemap a { background-image: url('../img/icon/sitemap.gif') }
#header_links #header_link_contact a { background-image: url('../img/icon/contact.gif') }
#header_links #header_link_bookmark a { background-image: url('../img/icon/star.gif') }

to:

#header_links #header_link_sitemap a { background-image: url('../img/icon/sitemap.png') }
#header_links #header_link_contact a { background-image: url('../img/icon/contact.png') }
#header_links #header_link_bookmark a { background-image: url('../img/icon/star.png') }

You can use a PNG logo in PrestaShop by manually copying the logo.png file into the img directory, then changing line 48 of header.tpl in your theme's directory from:

to:

and line 94 of classes/Mail.php from:

$templateVars['{shop_logo}'] = (file_exists(_PS_IMG_DIR_.'logo.jpg')) ? $message->attach(new Swift_Message_Image(new Swift_File(_PS_IMG_DIR_.'logo.jpg'))) : '';

to:

$templateVars['{shop_logo}'] = (file_exists(_PS_IMG_DIR_.'logo.jpg')) ? $message->attach(new Swift_Message_Image(new Swift_File(_PS_IMG_DIR_.'logo.png'))) : '';

and lines 139-140 of classes/PDF.php from:

if (file_exists(_PS_IMG_DIR_.'/logo.jpg'))
   $this->Image(_PS_IMG_DIR_.'/logo.jpg', 10, 8, 0, 15);

to:

if (file_exists(_PS_IMG_DIR_.'/logo.png'))
   $this->Image(_PS_IMG_DIR_.'/logo.png', 10, 8, 0, 15);