XF 1.4 eBay Search Box messes up header

BentDreams

BentDreams

Active member
I am trying to add an eBay search box to sidebar on my site using the code that they generate for their affiliates (see below) but when I do, it creates a small ebay logo that gets stuck up in the header and shrinks my logo in the header down to probably 1/10th of it's normal size.

XF version is 1.4.8

I have the bd widgets framework installed, but after fighting with it, I disabled it and put the code in the ad_sidebar_bottom template and get the same problem.

The box seems to work properly, the code just screws up the header.

Code: 
<script language='JavaScript1.1'>
    document.write("<sc"+"ript language='JavaScript1.1' src='http://rover.ebay.com/ar/1/711-53200-19255-44/1?campid=5337711689&toolid=711532001925544&customid=&mpt=" + Math.floor(Math.random()*999999999999) + "&adtype=3&size=234x60&mpvc='></sc"+"ript>");
</script>
<noscript>
    <a href='http://rover.ebay.com/rover/1/711-53200-19255-44/1?campid=5337711689&toolid=711532001925544&customid=&mpvc='>
        <img border='0px' src='http://rover.ebay.com/ar/1/711-53200-19255-44/1?campid=5337711689&toolid=711532001925544&customid=&mpt=[CACHEBUSTER]&adtype=1&size=234x60&mpvc=' alt='Click Here'>
    </a>
</noscript>
 
Sort by date Sort by votes
I just pasted your code in the sidebar of my dev site. The search box shows normally in the sidebar, but ebays script is adding this to the logo id (#logo):
HTML: 
    width: 78px;
    height: 29px;
    top: 16px;
    left: 11px;
    position: absolute;
    z-index: 101;
    background-image: url('http://img-cdn.mediaplex.com/0/711/159377/eBay_EB2IN23_ePNrefresh_SearchBar_234x60_logo.jpg');
    background-repeat: no-repeat;

Maybe there is a setting from eBay for displaying their logo, or not?

If not, and it is not against their TOS, use EXTRA css to undo their additions, maybe?
 
Upvote 0 Downvote
Lawrence said:
I just pasted your code in the sidebar of my dev site. The search box shows normally in the sidebar, but ebays script is adding this to the logo id (#logo):
HTML: 
    width: 78px;
    height: 29px;
    top: 16px;
    left: 11px;
    position: absolute;
    z-index: 101;
    background-image: url('http://img-cdn.mediaplex.com/0/711/159377/eBay_EB2IN23_ePNrefresh_SearchBar_234x60_logo.jpg');
    background-repeat: no-repeat;

Maybe there is a setting from eBay for displaying their logo, or not?

If not, and it is not against their TOS, use EXTRA css to undo their additions, maybe?
Click to expand...
Right that is what I was trying to describe when I was saying that it is messing up the header. Unfortunately I don't do any CSS development and wouldn't know what to do to fix it and there isn't any option on their end to change it. Interestingly if you switch it to just be an HTML based box it doesn't even work as a search box but actually inserts an image of a box that links to eBay :rolleyes:
 
Upvote 0 Downvote
Here is what I would try, open header.css for the style you are using. Highlight this (if you made no changes to it, if you did, re-apply your changes after):

HTML: 
    #logo
    {
        display: block;
        float: left;
        line-height: {xen:calc '@headerLogoHeight - 4'}px;
        *line-height: @headerLogoHeight;
        height: @headerLogoHeight;
        max-width: 100%;
        vertical-align: middle;
    }

And paste this over it, then save:

HTML: 
    #logo
    {
        display: block;
        float: left;
        line-height: {xen:calc '@headerLogoHeight - 4'}px;
        *line-height: @headerLogoHeight;
        height: @headerLogoHeight !important;
        max-width: 100%;
        vertical-align: middle;
        position: static !important;
        width: auto !important;
        background-image: none !important;
        background-repeat: initial !important;
    }

The above !importants should keep eBays values... ummmm at bay, :rolleyes:

If you don't feel comfortable editing the template, don't worry about it. The built in template merging works great, :)
 
Upvote 0 Downvote
So eBay assumes that no other site would think of giving their logo wrapper an id of #logo. Why they don't call their own #eBayLogo or something similar I will never know.

Here is the fix, it includes editing two templates, but the edits are simple.

First
- if the only change ever made to your styles header.css was the change I wrote above, then just revert that template: customized components -> header.css and select the X for it.
- if there was already customization's made to that header.css before you applied the changes listed above, just replace the css for #logo with the original css listed in the first HTML block in my previous post above, and hit save.

Next:
Open the header template for your style.
Click the logo_block tab
Find: id="logo", and replace with: id="site_logo"​
Select the header.css tab
Find the four instances of #logo and replace all four with #site_logo​
Hit save.

The above worked on my dev site. Changing your sites header's logo id was the only solution I could think of. Maybe someone else knows another way, :)
 
Upvote 0 Downvote
Lawrence said:
So eBay assumes that no other site would think of giving their logo wrapper an id of #logo. Why they don't call their own #eBayLogo or something similar I will never know.

Here is the fix, it includes editing two templates, but the edits are simple.

First
- if the only change ever made to your styles header.css was the change I wrote above, then just revert that template: customized components -> header.css and select the X for it.
- if there was already customization's made to that header.css before you applied the changes listed above, just replace the css for #logo with the original css listed in the first HTML block in my previous post above, and hit save.

Next:
Open the header template for your style.
Click the logo_block tab
Find: id="logo", and replace with: id="site_logo"​
Select the header.css tab
Find the four instances of #logo and replace all four with #site_logo​
Hit save.

The above worked on my dev site. Changing your sites header's logo id was the only solution I could think of. Maybe someone else knows another way, :)
Click to expand...
Just wanted to let you know that I appreciate your efforts with this. I have been swamped and have not been abe to test it on my dev site before attempting it on my prod site but I have it flagged and will definitely update you with the results.
 
Upvote 0 Downvote
I would think if you were using this for widget framework, that the easiest way to do this (since ebay was extremely careless in the way this script writing script was made) and not worry about changing their stuff, or core xf stuff (which as Lawrence said...you really shouldn't have to do as this widget shouldn't assume it is more important than the rest of the page) would be to just make a standalone html doc with this script in it and in the html box in a WFw html without wrapper widget insert an iframe with the doc you created as a src.

If I understand this search box correctly...searching a term brings you to an ebay page anyways right?
 
Upvote 0 Downvote
You must log in or register to reply here.
Top Bottom