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

[butchx5]

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

[fairestcape]

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.

[butchx5]

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

[fairestcape]

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.

[butchx5]

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

[gjh42]

<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/...

[butchx5]

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

[fairestcape]

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.

You'll probably need this in your stylesheet:

#whyshopwithusHeading {
display: none;
}

--------------------------------------------------------------

[butchx5]

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 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

[gjh42]

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.