Scrollbar in All Widgets

When the contents in the widget exceed a certain specified height or width, there will be a vertical or horizontal scrollbar to enable users to read the contents that overflow or exceed the box area. This scrolling element is especially useful for our Link List or Labels widget which may be very lengthy. It reduces the total height of the widget and yet allows readers the option of scrolling through and viewing the entire content. We shall discuss how to customize the template design to include the scrollbars and the various modifications that can be made to the stylesheet.

Login and go to Template - Edit HTML. Insert this piece of code.

.sidebar .widget{ height:200px; overflow:auto; }

In this example, we applied a height of 200px to the widgets. This can be changed to other values. Look at both sidebars. Notice the neatness and symmetry. Be careful though if you have AdSense Ads in the sidebars. It is against AdSense TOS to cut off the Ads and put scrollbars to their Ad Units.

/* Sidebar Content ----------------------------------------------- */ sidebar .widget{ height:200px; overflow:auto; } .sidebar { color: $sidebartextcolor; line-height: 1.5em; }