How to apply drop shadow to a javascript widget?

Discussion in 'CSS' started by RobertS, Apr 21, 2012.

0
  1. #1
    How do I apply a css drop shadow around the search widget generated by this script code?
    <script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('dfacd65d-6514-4845-ad81-7249d33a6280');</script>
    <noscript>Get the <a href="http://www.widgetbox.com/widget/college-search">College search</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://support.widgetbox.com/">More info</a>)</noscript>
     
    RobertS, Apr 21, 2012 IP
  2. artus.systems

    artus.systems Well-Known Member

    Messages:
    87
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    103
    #2
    Do you have access to the Iframe? Else it can't be done.
     
    artus.systems, Apr 21, 2012 IP
  3. William Rauen

    William Rauen Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    sorrry for that i don't know.......
     
    William Rauen, Apr 24, 2012 IP
  4. IDocXD

    IDocXD Member

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #4
    Use FireBug(Developer Browser Plugin) to find out what the containing div is and write a override CSS code in your main CSS file.

    I do things like that all the time. Ive also made a small youtube hack to fix the youtube iframe within a website.
     
    IDocXD, May 8, 2012 IP
  5. coreygeer

    coreygeer Notable Member

    Messages:
    928
    Likes Received:
    310
    Best Answers:
    2
    Trophy Points:
    240
    Digital Goods:
    1
    #5
    Just to simply put a shadow on the entire widget that is contained within the script?

    If you want just a simple shadow (even though the script is cutting off some of the scroll bar when more than a few searches are found), implement this into a CSS file.
    #shadow{width:455px;height:auto;box-shadow:5px 5px 15px #000;border:1px solid #000;}
    Code (markup):
    Implement <div id="shadow"> on the beginning of your script and a </div> at the end of your script like so.
    <div id="shadow">
<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('dfacd65d-6514-4845-ad81-7249d33a6280');</script>
<noscript>Get the <a href="http://www.widgetbox.com/widget/college-search">College search</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://support.widgetbox.com/">More info</a>)</noscript>
</div>
    Code (markup):
    If you want to change the location of the shadow, here's how you do it.

    5px 5px 5px 15px
    The first 5 is horizontal. This decides the horizontal direction that your shadow will go. <--- --->
    The second one is vertical as in up and down. Setting both of these to 0 will make it display right under your element.
    The third number is blur, this determines how blurry your shadow will be.

    Play the numbers in the box-shadow format to get the desired setting you like. If this isn't what you meant, clarify a bit and we'll see what we can do.
     
    coreygeer, May 12, 2012 IP
  6. IDocXD

    IDocXD Member

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #6
    Actually its a little more indepth then that. If you have a square widget, that will work fine. But as far as adding a shadow to a rounded border. You may add a border-radius but if you would really want to put a border shadow on the actually widget source, You will have to open the iframe and find the tag of the container div, then call the CSS after the widget with !important tags in your CSS in your source code.
     
    IDocXD, May 12, 2012 IP