How to add image to column one? - Nothing works!

Hi
Hoping someone out there can help me I am soooo frustrated!

I would like to add an animated gif image to my left column (not in a sidebox) and I have tried all the options explained on the forum that I found when I did a search - but NONE of them work for me.

I am obviously doing something wrong but I don't know what - hopefully someone else might be able to help.

my site is: slinkykinkyuk.com

and I would like the image to appear above the categories sidebox.

Thanks

The easiest way to do this is to use a sidebox...

If you get a copy of the blank sidebox module and configure it as per its instructions, you can insert the img src URL into the appropriate place.

To make it NOT LOOK LIKE a sidebox, add a declaration to your stylesheet to HIDE (to "not display") features of that sidebox - such as the sidebox header, borders, etc. (CSS = display: none; )

I do this with my Left Column GoDaddy SSL sidebox at THIS SITE.

Hi
Thanks for your response - I have manges to create the new blank sidebox but was hoping you would be kind enough to help with:

The code needed to add my image (only image - no text) to the box
&
The code needed to remove the box & heading, etc itself

Thanks again.

Helen

Hi Helen

I trust you know how to write an image link in HTML code?

<img src="PATH-TO-YOUR-IMAGE" alt="TEXT DESCRIPTION OF THE IMAGE" title="TITLE OF THE IMAGE">

Just put the appropriate values in the line above where you see my CAPS, then place the line into the sidebox code as per the instructions that accompany the module.

You HIDE the header by a declaration in the stylesheet, and it will be relevant to the style ID of that sidebox... something like:

#additionalImageSideboxHeader { display: none}

Load your site into a browser, then look at the page source HTML. You'll see the style ID for your new sidebox in that source code.

Hi
Thanks again - I am obviously doing something wrong as I can get the new sidebox up to appear but not my image - rather than continue loading, deleting, reloading and trying once again I thought it may be better if I show you the codes and you may be able to spot my errors:

tpl_why_shop_with_us.php

<?php $content = ''; $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">'; $content .= ''; $content .= '<p><img src="/public_html/includes/templates/darkness/images/why_shop_with_us_animated.gif" width="125" height="125"></p>'; $content .= '</div>'; ?>

why_shop_with_us.php

<?php $show_why_shop_with_us = true; if ($show_why_shop_with_us == true) { require($template->get_template_dir('tpl_why_shop_with_us.php',DIR_WS_TEMPLATE, $current_page_base,'sideboxes'). '/tpl_why_shop_with_us.php'); $title = BOX_HEADING_WHY_SHOP_WITH_US; $title_link = false; require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,'common') . '/' . $column_box_default); } ?>

why_shop_with_us_defines.php

<?php define('BOX_HEADING_WHY_SHOP_WITH_US', 'Why Shop With Us?'); define('TEXT_WHY_SHOP_WITH_US', '<p><img src="/public_html/includes/templates/darkness/images/why_shop_with_us_animated.gif" width="125" height="125"></p>'); ?>

Thanks again

Helen

<img src="/public_html/includes/templates/darkness/images/why_shop_with_us_animated.gif" width="125" height="125">

You don't want the /public_html in the filepath; it is already assumed as the base, and adding it will make the code look for
/public_html/public_html/includes/templates/darkness/images/...

Hi

That worked - THANKS - not sure why yet but the images in my animated gif all have a white outline - didn't show up when I created them so will have to work that out tomorrow!

I now have another problem - I cannot find the style id within the css

When I check my site the following html shows up:

<div style="width: 200px;" id="navColumnOneWrapper"><!--// bof: whyshopwithus //--> <div style="width: 200px;" id="whyshopwithus" class="leftBoxContainer"> <h3 id="whyshopwithusHeading" class="leftBoxHeading">Why Shop With Us?</h3> <div class="sideBoxContent" id="whyshopwithusContent"><p><img height="125" width="125" src="/includes/templates/darkness/images/why_shop_with_us_animated.gif"/></p></div></div> <!--// eof: whyshopwithus //-->

but when I check the css file whyshopwithus doesnt appear anywhere.

Sorry to be a pain but I just cannot quite get my head around all this - I hope oneday I will see the light and all will become clear. In the meantime I learn through trial and error and by asking on this forum.

A BIG thankyou again!
Helen

You currently have:
<img height="125" width="125" src="/includes/templates/darkness/images/why_shop_with_us_animated.gif"/>

Try:
<img height="125" width="125" border="0" src="/includes/templates/darkness/images/why_shop_with_us_animated.gif"/>

but when I check the css file whyshopwithus doesnt appear anywhere.

... no, it doesn't get there by osmosis... you have to put it there. :D

You'll probably need this in your stylesheet:

#whyshopwithusHeading {
display: none;
}

---

Hello

I added the border="0" (it had been there but I had removed it). This hasn't made any obvious change to what shows on the site - what should it have done?

Feel a bit silly now :blush: about having to actual create the code for the stylesheet - I added the lines you suggested and sure enough the header of the side box is now gone but the box outline is still showing - how do I get rid of that too?

Thank you for being so helpful.

Helen

Depending on what elements have borders now, you can use

#whyshopwithus {
border: none;
}

or

#whyshopwithusContent {
border: none;
}

You might also try

#whyshopwithus a img {
border: none;
}

in case you are getting the default CSS outline on image links.

Hi
Thanks - it was the

#whyshopwithus {
border: none;
}

That worked. :clap:

I have also used the

#whyshopwithus a img {
border: none;
}

and remade the image and I notice that some of the images have the white border and some don't so I will recreate the animation from scratch and hopefully that will remove all the borders.

I didn't know about this default CSS outline - is there somewhere I can change the default to remove it all the time as I cannot think of an occasion when I would want it. (not just for this site but for future work too).

Thanks again
Helen

The second rule in the standard Zen Cart stylesheet is

a img {border: none; }

Could it be that your custom template has eliminated this? Search for "a img" in case it is somewhere else.

Hi

I checked and the css stylesheet did contain the required code.

Where I was going wrong was how I saved the animated gif when I created in Adobe :bigups:- sorted now.

Thanks for your help.

Could you explain how to display the SSL seal in the sidebox? I can't translate the code I was supplied so that it will show correctly on my site. I have some programming skills but nothing with html or php.

This is the code they supplied me:

<span id="siteseal"><script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=1006732646075d9bdcd1011f6e17e5df47d6e9426405304535912777608"></script><br/><a href='https://www.godaddy.com/gdshop/ssl/ssl.asp'>SSL Certificates</a></span>

Thanks for any help.

To display GoDaddy seal:-

http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=219

... and when it's done it will look like THIS (Bottom of left column).

Thank you, that did it.