(Scalemotorcars.com) Make Widget set Size with Scrollbar

(Scalemotorcars.com) Make Widget set Size with Scrollbar

Mod Version: 1.00, by Scalemotorcars

vB Version: 4.1.4	Rating: (1 vote - 5.00 average)	Installs: 14
Released: 20 Aug 2011	Last Update: Never	Downloads: 0
Not Supported Template Edits Code Changes Re-usable Code Translations

I just released a custom grid that has a place for 4 columns in the middle of the page.

http://www.vbulletin.org/forum/showthread.php?threadid=268825

http://www.scalemotorcars.com

Well as most of you know, widgets don't come in a set size and it left all kinds of empty space on my homepage. NOT GOOD....

All I did was adapted a little CSS and a few quick template edits. You will need to adjust your code to fit your site. Just take note of the XXX and replace it with your size. You can also add width if you like.

Lets start....

You have 2 choices. One, add the below code to the end of additional.css OR to the bottom of widget.css. Its up to you.

Code:

.widget_content_custom {
	color: {vb:stylevar sidebar_content_color};
	-moz-border-radius:{vb:stylevar border_radius};
	-webkit-border-radius: {vb:stylevar border_radius};
	border-radius: {vb:stylevar border_radius};
	background:{vb:stylevar sidebar_content_background};
	border:{vb:stylevar sidebar_content_border};
	_background-image: none;
	padding:{vb:stylevar vbcms_widget_content_padding};
	height:xxxpx;
	overflow:auto;
        overflow-x:hidden;
        position:relative;
}

If you want to add a width, Find this line in the code above.

Code:

height:xxxpx;

Add right below it. (Again, add your actual size where you see XXX)

Code:

width:xxxpx;

Please take special note of these 2 lines below.

Code:

        overflow-x:hidden;
        position:relative;

(Overflow-x:hidden) actually hides the horizontal scrollbar in browsers that support it. If you want the horizontal scrollbar to show then remove that line. If you want to hide the vertical scrollbar then replace it with overflow-y:hidden. Just note that you will not be able to scroll in the direction of the hidden bar.

Now for (position:relitive), leave this in the code or you'll have issues with your avatars popping over the edge of the widget.

Last part of this mod.

In the widget templates you want to adjust, find this line of code. NOTE: Not all widgets use it so your kind of stuck with the ones that do. At least until someone figures a way around it.

Find this line in the template.

Code:

cms_widget_content widget_content

Replace with this line.

Code:

cms_widget_content widget_content_custom

That's it. Just repeat the last edit with each widget you want to adjust....

FYI. This is not supported so please feel free to hack away and add or change the code accordingly to your needs. Enjoy

If you use it please click install. Thanks....

Download

No files for download.

Screenshots

vBulletin LTS