Chat Room Article Base Facebook Page Twitter RSS Feed
Welcome, Guest. Please login or register.
Did you miss your activation email?
May 23, 2012, 12:41:06 AM

Login with username, password and session length
Search:     Advanced search
The E-commerce forum, the best place for advice for your Small Business.
12787 Posts in 1519 Topics by 6453 Members
Latest Member: mariocotton921
* Home Help Search Login Register
+  E-commerce forum
|-+  E-commerce
| |-+  Shopping cart software
| | |-+  Zen cart
| | | |-+  Help needed please
« previous next »
Pages: [1] Print
Author Topic: Help needed please  (Read 618 times)
Beautybase
Settling In
**

Karma: 1
Offline Offline

Posts: 40


« on: March 05, 2010, 02:51:42 PM »

I would like to add a facebook and twitter icon to my home page and would like to link them to my fb and tw accounts

I have downloaded the 2 icons which I would like to use. They are png files which I understand are a type of gif file.

Now the million dollar question where do I upload the images in my directory  and whats the code I put into define page editor

Scared of breaking something so any help would be greatly  appreciated  :)



Logged
ianjofriel
Guest
« Reply #1 on: March 05, 2010, 03:36:16 PM »

worth noting that PNG's are 'Portable Network Graphics' and GIF's are an image type defined by CompuServe many years ago and are two completely different things, PNGs offer transparency, but in a far superior way to GIF, ( they have opacity for transparency, not just on or off )

Also, you need some jiggery pokery to get them to display right in older browsers, where the transparency doesnt work right...
Logged
seamus
zen master
Shareholder ;o)
*****

Karma: 44
Offline Offline

Gender: Male
Posts: 1109



WWW
« Reply #2 on: March 05, 2010, 05:26:51 PM »

upload the images via ftp to your images folder in your zencart
public_html/images
in that directory there,

then go into your store admin into tools>define pages and open main page,
then you need to enter this code at the top of the page and add in the image file path and the link url

Code:
<center><a href="twitter url here"><img src ="image file path here" alt="some text here" /></a>
<a href="facebook url here"><img src ="image file path here" alt="some text here" /></a></center><br /><br />

just replace twitter url here with the url of the twitter page or facebook page you want to link to make sure the quote marks are at each end of the full url, include the http:// at the start of the url
replace the image file path here with the file path of the image for example images/picture.png same again make sure the quote marks are at each end on the image file path, you dont need the whole url in there for the image, just images/picture.png replace picture.png with the name of your image, this is all case sensitive,
in the alt text replace the some text here with what ever you want, like the name of your twitter account or your facebook page, eg, "beautybase twitter" or "beautybace facebook page" same again, keep the quote marks intact

the two br parts will create a small space between the images and the rest of the content on the page. the center parts will center the links in the middle of the page, so use the whole code as I'v written it there and just enter in the urls for twitter and facebook, enter in the image file paths (make sure you upload them to your zencart images folder) and change the alt text to what ever you want it to say,

job done ;)
Logged

Beautybase
Settling In
**

Karma: 1
Offline Offline

Posts: 40


« Reply #3 on: March 05, 2010, 06:04:42 PM »

 Your a  angel Seamus

Great explanation! Thankyou

Will let you know how I get on..otherwise like titus oates I maybe popping out for some time :)

Logged
seamus
zen master
Shareholder ;o)
*****

Karma: 44
Offline Offline

Gender: Male
Posts: 1109



WWW
« Reply #4 on: March 05, 2010, 06:14:10 PM »

atleast its not snowin lol you'll be alright ;)
Logged

Beautybase
Settling In
**

Karma: 1
Offline Offline

Posts: 40


« Reply #5 on: March 10, 2010, 05:53:37 PM »

That worked a treat seamus  thumbs up

Thank you very much

I also would like to add some text and possibly an image below my categories...center main page (between categories and footer)
am I right that is a modification to the template itself....probably talking rubbish as usual  lol

Logged
seamus
zen master
Shareholder ;o)
*****

Karma: 44
Offline Offline

Gender: Male
Posts: 1109



WWW
« Reply #6 on: March 10, 2010, 06:03:58 PM »

I'll have a look at how you could do that and get back to you,

depending on how and what you would like to display, there are a few ways you could do it.

would you like the text and image to be displayed on every page, or just on the main page?
Logged

Beautybase
Settling In
**

Karma: 1
Offline Offline

Posts: 40


« Reply #7 on: March 10, 2010, 06:22:45 PM »

Oh thanks seamus

I would like to add some text regarding paypal and possibly card image. I had a couple of enquiries from customers  saying they would like to buy from my site but they do not have a paypal account. I am sure there is many people who don't realise that you dont need an account to pay by card or visa with paypal

Thanks in advance :)

Logged
seamus
zen master
Shareholder ;o)
*****

Karma: 44
Offline Offline

Gender: Male
Posts: 1109



WWW
« Reply #8 on: March 10, 2010, 07:42:21 PM »

easiest way to do this would  be to write it in to the footer, then it will show on every page.

create an over ride by downloading tpl_footer.php from includes/templates/template_default/common
then upload it to includes/templates/your_template/common
your_template being the name of template you are using, if there is no common folder in includes/templates/your_template/ create one and add the tpl_footer.php into it

open the tpl_footer.php and add in this code just above <!--bof-navigation display -->

Quote
<div id="fti">
<p><?php
 echo "your text here"
?></p>
<img src="your image file path here" />
</div>

change your text here to what you want that to say, upload your image to public_html/images and change your file image path here to images/picture.png
picture.png being the name of the image you want to use, this can be a jpg or gif or what ever you want to use, jpg tend to be a good choice though, make sure the end of the image reflects the type of image you are using, .png or .jpg or what ever type of image it is

then go into includes/templates/your_template/css and open stylesheet.css and at the very bottom of the page add this code

Code:
#fti img {
    display: table;
    margin-left: auto;
    margin-right: auto
}
#fti p {
    display: table;
    margin-left: auto;
    margin-right: auto
}

this will show text and an image just below the text, centered on the page, all of which will be above the footer content
you can add extra styling to the text by adding this extra code into #fti p {

Code:
font-size:12px;

add that above the last curley bracket } and change the 12px to a size you want,
if you want the text to be bold add this

Code:
font-weight: bold;
add that above the last curley bracket }

save all the changes and upload the stylesheet.css to includes/templates/your_template/css
and save all the changes to tpl_footer.php and upload that to includes/templates/your_template/common

thats a really simple way to do it and should work perfectly

if anything goes wrong, just delete the tpl_footer.php from includes/templates/your_template/common and everything will revert back to the way it was before any changes were made
« Last Edit: March 10, 2010, 07:46:57 PM by seamus » Logged

Beautybase
Settling In
**

Karma: 1
Offline Offline

Posts: 40


« Reply #9 on: March 11, 2010, 11:44:52 AM »

Great Seamus! Thanks very much...I'll have a go at that today :)
Logged
Pages: [1] Print 
« previous next »
Jump to:  


Powered by MySQL Powered by PHP Powered by SMF 1.1.15 | SMF © 2011, Simple Machines Valid XHTML 1.0! Valid CSS!
SimplePortal 2.2.2 © 2008-2009