[Badshah93]

Originally Posted by Taurus1

I am sorry, but I cannot use it like this. It looks terrible on the left like now when using a widescreen monitor. If there is no easy way to just center the entire widget then I cannot use it. Great idea though.

Open vbcms_widget_cmsfcs_page template

And

Replace all template code to this

<vb:if condition="$output">
<style type="text/css">
.cmsfcs_{vb:raw id} { 
	position:relative; 
	height:290px; 
        
}
.cmsfcs_{vb:raw id} ul.ui-tabs-nav{ 
        position:absolute; 
        top:0; 
        left:9px;
        list-style:none; 
	padding:0; 
        margin-top:2px; 
        width:76px;
}
.cmsfcs_{vb:raw id} ul.ui-tabs-nav li{ 
        font-size:12px; 
	color:#666; 
        margin-left:2px;
        margin-top:3px;
        }

.cmsfcs_{vb:raw id} ul.ui-tabs-nav li span{ 
	font-size:11px; font-family:Verdana; 
	line-height:14px; 
}
.cmsfcs_{vb:raw id} li.ui-tabs-nav-item a{ 
	display:block; 
	height:55px; 
	color:#333;  
	line-height:12px;
}

.cmsfcs_{vb:raw id} ul.ui-tabs-nav li img { 
	float:left;  
	}

.cmsfcs_{vb:raw id} ul.ui-tabs-nav li.ui-tabs-selected img { 
 border:3px solid #FF7400;       
}


.cmsfcs_{vb:raw id} .ui-tabs-panel{ 
	width:{vb:raw width}px; 
        height:290px; 
        margin: 0 auto; 
}

.cmsfcs_{vb:raw id} .ui-tabs-panel img { 
	width:{vb:raw width}px; 
        height:290px; 
        margin: 0 auto; 
	}

.cmsfcs_{vb:raw id} .ui-tabs-panel .info{ 
	position:absolute; 
	top:220px; 
        left:85px; 
	height:70px;
        width:{vb:math {vb:raw width}-85}px;
        opacity: .75;
        background: black; 
}
.cmsfcs_{vb:raw id} .info h2{ 
	font-size: 20px; font-family:Georgia, serif; 
	color:#fff; padding:5px; margin:0 5px;
	overflow:hidden; 
}
.cmsfcs_{vb:raw id} .info p{ 
	margin:0 10px; 
	font-family:Verdana; font-size:11px; 
	line-height:14px; color:#f0f0f0;
}
.cmsfcs_{vb:raw id} .info a{ 
	text-decoration:none; 
	color:#fff; 
}
.cmsfcs_{vb:raw id} .info a:hover{ 
	text-decoration:underline; 
}
.cmsfcs_{vb:raw id} .ui-tabs-hide{ 
	display:none; 
}
</style>


<script type="text/javascript">
$(document).ready(function(){
$(".cmsfcs_{vb:raw id}").tabs({ fx: {opacity: 'toggle', duration:1} }).tabs({event: 'mouseover'}).tabs('rotate', 3000, true);

$('.cmsfcs_{vb:raw id}').mouseover(function(){
        $(this).tabs('rotate', 0, false);
    });
    $('.cmsfcs_{vb:raw id}').mouseout(function(){
        $(this).tabs({ fx: {opacity: 'none', duration:1} }).tabs({event: 'mouseover'}).tabs('rotate', 3000);
    });
});
</script>

<div class="block">

<div class="cms_widget_content widget_content">
		  <div id="featured" class="cmsfcs_{vb:raw id}">

{vb:raw output}
</div>
</div>
</div>
</vb:if>

i don't have widescreen monitor right now.. (waiting for my laptop to come from dell)
but i think above code should fix it.