1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 eBay Search Box messes up header

Discussion in 'Troubleshooting and Problems' started by BentDreams, Aug 13, 2015.

  1. 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>
     
  2. Lawrence

    Lawrence Well-Known Member

    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?
     
  3. BentDreams

    BentDreams Active Member

    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:
     
  4. Lawrence

    Lawrence Well-Known Member

    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, :)
     
  5. BentDreams

    BentDreams Active Member

    Well that had an interesting affect... it fixed the header but also removed the ebay logo from the search box making unidentifiable as being for ebay o_O
     
  6. Lawrence

    Lawrence Well-Known Member

    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, :)
     
  7. BentDreams

    BentDreams Active Member

    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.
     
  8. EQnoble

    EQnoble Well-Known Member

    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?
     

Share This Page