Search code examples
javascriptcsswordpresstwitterscrollbar

Twitter widget + custom scrollbar makes styling of the feed disappear

I followed a guide for a custom sidebar on a twitter widget in my site (wordpress). Unfortunately the styling the comes with the widget disappeared now that the sidebar is in use. Why only HTML left?.

I tried to write my own css and find a solution by googling for several hours but nobody else seems to have this problem. Most of the post are rants about the bad customizability. I checked the whole code but I can't find the problem. I hope you guys can help me!

Guide and click demo for what it should look like: http://manos.malihu.gr/add-a-custom-scrollbar-to-your-twitter-widget/

Here is the code:

<html>
<head>
    <!-- custom scrollbar CSS -->
    <link rel="stylesheet" type="text/css" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- jQuery lib -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- custom scrollbar plugin script -->
    <script type="text/javascript" src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

     <script>
             (function($){
                $(window).load(function(){
                 /* initialize scrollbar */
                $("#twitter-widget-holder").mCustomScrollbar({
                    theme:"dark-3",
                    scrollButtons:{enable:true}
                      });
      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    });
  })(jQuery);
</script>

</head>
    <body>
        <div id="twitter-widget-holder">
            <a class="twitter-timeline" href="https://twitter.com/hashtag/korting" width="100%" height:"600px" data-widget-id="732565652418990081" data-chrome="transparent noscrollbar" data-tweet-limit="10">Tweets over #korting</a>
        </div>

    </body>
</html>

edit for used css:

#twitter-widget-holder, .twitter-timeline { height:800px; padding:20px; background:#fff; border-radius:3px; box-shadow:2px 2px 3px rgba(0,0,0,.1); }

Solution

  • I noticed 2 things in your code that need addressing:

    1. In <a class="twitter-timeline">...</a> you have the height listed as height:"600px" which is not valid.
    2. The CSS below was missing from your example.

    #twitter-widget-holder { max-height:400px; max-width:320px; padding:20px; background:#fff; border-radius:3px; box-shadow:2px 2px 3px rgba(0,0,0,.1); }

    I went ahead and made those corrections and it seems to work fine: http://codepen.io/johnniebenson/pen/PNrOpV

    Let me know if that helps!