wildsong Posted September 18, 2012 Share Posted September 18, 2012 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. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted September 18, 2012 Share Posted September 18, 2012 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted September 18, 2012 Share Posted September 18, 2012 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. Quote Link to comment Share on other sites More sharing options...
wildsong Posted September 19, 2012 Author Share Posted September 19, 2012 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. Quote Link to comment Share on other sites More sharing options...
wildsong Posted September 19, 2012 Author Share Posted September 19, 2012 Somethings not right in the code here - no closing to one of the divs maybe. Will try to adjust it. Quote Link to comment Share on other sites More sharing options...
bsmither Posted September 19, 2012 Share Posted September 19, 2012 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. Quote Link to comment Share on other sites More sharing options...
wildsong Posted September 19, 2012 Author Share Posted September 19, 2012 Thank you. Working lovely now. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted September 19, 2012 Share Posted September 19, 2012 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted September 19, 2012 Share Posted September 19, 2012 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. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted September 19, 2012 Share Posted September 19, 2012 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted September 19, 2012 Share Posted September 19, 2012 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? Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted September 19, 2012 Share Posted September 19, 2012 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> Quote Link to comment Share on other sites More sharing options...
bsmither Posted September 19, 2012 Share Posted September 19, 2012 I would like to see this. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted September 19, 2012 Share Posted September 19, 2012 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted September 19, 2012 Share Posted September 19, 2012 You can add margin-top: 20px; and see what that gets you. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted September 19, 2012 Share Posted September 19, 2012 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. Quote Link to comment Share on other sites More sharing options...
wildsong Posted September 20, 2012 Author Share Posted September 20, 2012 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.