Resolved - Adding a second image to the logo/header area

[wildsong]

Setting up a store with CubeCart 5.0.7

http:www.wildsong.co.uk/store/

I have an account with WorldPay, so want to use the WorldPay gateway to get up and running. WorldPay require their logo and card logos to be displayed in the store.

I’ve added their script (Javascript) to display these logos into the header div of main.php and this has worked (i’m at the edge of my skills here), but they are displayed *over* the site logo.

Can anyone suggest how I might have them display to the right of the site logo?

Thanks, Geoff.

[Dirty Butter]

I can't help, but I'm wondering why you're not on 5.1.4? Please create a sig to indicate if this is a clean install or upgrade from what, etc.

We use a commercial skin on our Plush Animal Shoppe, and I was able to do what you need on that one. I used the Homepage document to achieve it on the Estates Shoppe.

[bsmither]

I would like for you to try this:

<div id="header"><div style="float:right;position:relative;right:0;top:0;width:320px;border:solid red 1px;">{literal}Put Javascript Here{/literal}

{$SEARCH_FORM}</div>

Adjust the width to suit your needs, then after things look good, remove the border:solid red 1px; part.

Does WorldPay dictate where on the page to show this? If not, then perhaps in a sidebox or at the bottom.

[wildsong]

Thanks, bsmither.

I'll try this. No, WorldPay don't specify where on a page the logos are to be shown. But they want them on the entry page to the store and on the checkout. So the simplest solution for me seemed to be in the header, then they'll be on all store pages.

[wildsong]

Somethings not right in the code here - no closing to one of the divs maybe. Will try to adjust it.

[bsmither]

Please compare to what is already there vs what I posted above. So, <div id=header> and {SEARCH_FORM} need to be left alone, then only add what's new.

[wildsong]

Thank you. Working lovely now.

[Dirty Butter]

I may have marked this as resolved too soon. It works great on Chrome for me, but IE and FF both move the Worldpay logo down to the Navigation line, and that messes up the spacing of the right side column.

[bsmither]

And which skin are you using to do this experiment?

Wildsong's image shows Kurouto-Green and that's the skin I based my suggestion on.

[Dirty Butter]

I tested it on my cosmetically altered kurouto-orange, but the only changes are color and background changes (taken off now, but I can put it back on if it will be of help to you, Bsmither). Otherwise it's a stock skin. But I'm seeing exactly the same spacing issues for http:www.wildsong.co.uk/store/ on IE and FF.

[bsmither]

To be fair, my suggestion strictly identified some space above the 'search box'. That space was no bigger than 320pixels wide and no specific height. So, if the WorldPay imagery comes in at a size much larger than that, I can see how the nested divs will not flow optimally.

Where do I get a copy of the WorldPay script code?

[Dirty Butter]

I didn't try to put any script in the box. I played on my kurouto and changed the width of the red box all the way down to 10 pixels, and it still stayed below where it should have been. I also tried adding 50% width logo , in case that was causing the jump to the next line. No luck.

<p class="logo"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" width="50%" alt="{$META_TITLE}"/></a></p>

[bsmither]

I would like to see this.

[Dirty Butter]

OK, I found the extra div and got rid of it, and now it works for me, too, on http://dirtybutterestates.com.

(Final edited code to show the complete header section with pleasing spacing)

<div id="header">{$SEARCH_FORM}

<div style="float:right;position:relative;right:0;top:0;width:0px;border:solid red 0px;margin-top: 15px;">{literal}

<a class="tf_upfront_badge" href="http://www.thefind.com/store/about-dirtybutterestates" title="TheFind Upfront"><img alt="Dirty Butter Estates Collectible Shoppe is an Upfront Merchant on TheFind. Click for info." border="0" src="//upfront.thefind.com/images/badges/s/87/30/8730efe0f48d0cd57cca8be4b0d5f4e8.png" /></a> <script type="text/javascript">

(function() {

	 var upfront = document.createElement('SCRIPT'); upfront.type = "text/javascript"; upfront.async = true;

	 upfront.src = document.location.protocol + "//upfront.thefind.com/scripts/main/utils-init-ajaxlib/upfront-badgeinit.js";

	 upfront.text = "thefind.upfront.init('tf_upfront_badge', '8730efe0f48d0cd57cca8be4b0d5f4e8')";

	 document.getElementsByTagName('HEAD')[0].appendChild(upfront);

})();

</script>

{/literal}

</div>

<p class="logo"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" /></a></p>

</div>

I couldn't figure out how to get some top padding on the image, though, which would be nice. Bsmither explained how further down the thread.

[bsmither]

You can add margin-top: 20px; and see what that gets you.

[Dirty Butter]

15px worked perfectly!! Thank you for all you do for everyone on this forum!!! Mine is exactly right, but wildsong's still needs tweaking to look right in IE and FF.

[wildsong]

Thanks for all this. Silly me only tested in Safari, but I see it's a mess in FF. Unfortunately I've got to head off to a small island in the Hebrides for the next week. So will have to pick up on this when return.