vBulletin CMS Widgets - (Scalemotorcars.com) Make Widget set Size with Scrollbar

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

You can see that mod here.....

Live Demo..........

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.

.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.

height:xxxpx;

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

width:xxxpx;

Please take special note of these 2 lines below.

        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.

cms_widget_content widget_content

Replace with this line.

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....

[Scalemotorcars]

No real reason to reserve this but hey everyone else does it so why not...

[mitch84]

thank you, work fine

[doctorsexy]

Fab.. thanks

[K4GAP]

Is that your site (the demo site) ?

I've tried twice to register and both times it said I was a spammer. I promise I'm not

[Scalemotorcars]

Originally Posted by GaryT

Is that your site (the demo site) ?

I've tried twice to register and both times it said I was a spammer. I promise I'm not

Yes thats mine.

Try another user ID. I use StopForumSpam so you may want to look into why its kicking you out.

[akademikper]

Hello, i want to show scroll bar, deleted "overflow-x:hidden;" line but still it isn't showing on safari and chrome.

[Toorak Times]

I've got your grid working on 4.2pl3, thanks, very excited, will this widget work there too ?