Sidebar Scrolling Components

Sep 24, 2010 12:39

Account Status: All
Theme: Flexible Squares
Components: Link List, Blurb/Free Text, Page Summary

You can find tag scrolling over here. Tag scrolling is a little more complicated that the others. Here is the coding you can add or find to change in your layout.

Link List

#sidebar_linklist .sbarcontent { height: 100%; overflow-x: hidden; overflow-y: auto; }

In the above coding you will see that the height is set to 100%. This means the size of this component on your sidebar will be however big it needs to be to accommodate all your links. If you were to change 100% to 150px this would then mean your link list can only be 150px high before it starts scrolling.

Page Summary

#sidebar_summary .sbarcontent { height: 250px; overflow-x: hidden; overflow-y: auto; }

In the above coding you will see that the height is set to 250px. This means that if your page summary is more than 250px in height it will start scrolling. If you set it to 100% it will be however big it needs to be to accommodate all your post summary details.

Blurb/Free Text

.sbarbody2 {padding: 0 5px 0 5px; height: 100%; overflow-x: hidden; overflow-y: auto; }

The blurb or free text is slightly different. In the coding you will find a .sbarbody and an .sbarbody2. .sbarbody controls every component on your sidebar except the blurb. The blurb is controlled entirely by the .sbarbody2 coding. So as you can see in the coding above I added the height coding and the overflow feature to enable this component to scroll. Again, when set at 100% it will be at the full height to accomodate any text or images you have contained in the blurb feature. Setting it to 250px will make it scroll when it overflows that height.

Any questions? Feel free to ask. Comments are allows appreciated.

account: paid-permanent, !layout-tutorials, #account: all, .flexible-squares, help with: sidebar

Previous post Next post
Up