vBulletin 4x quick helpful styling tips

[darren1981]

Hi all,

I run and design for vBulletin 4 Styles and i would like to share some common problems i face when creating a new styles. Solutions are added below each problem.

- CMS widget box header color is the same as the widget block(content) text color.
- Solution:
EDIT "vbcms.css" from within your templates section of your current style, find the follow lines

.cms_widget_header h3 {
    color: {vb:stylevar vbcms_widget_color};

Change to:

.cms_widget_header h3 {
    color: #FFFFFF;

The above code now forces the widget header title color to white / #FFFFFF you can change this color to suit your style.

- Groups right hand sidebar box background color is set to #FFFFFF this looks out of place when using a different color background than the default vbulletin style background.
- Solution:
OPEN "socialgroups_overview.css" and find the following lines of code:

li.sgicon .maincol {
    padding:{vb:stylevar padding};
    background:#ffffff url({vb:stylevar imgdir_gradients}/grey-up.png) repeat-x scroll {vb:stylevar left} bottom;
    height:200px;
    font-size:11px;
    overflow:hidden;
}

CHANGE the #FFFFFF to suit your body background, you can even use "background: #transparent;" to overcome this problem, in the same .CSS find this code:

#sidebar li.sgicon .maincol {
    margin-{vb:stylevar left}:60px;
    background:#FFFFFF none;
    height:auto;
}

CHANGE this to suit you current document background color as you did above.

- Advanced search tabs are always the default blue colors...
- Solution:
EDIT "search.css" from your styles / template manager.
FIND the following:

#searchtypeswitcher {
    border-bottom:4px solid #5a7f97;
}

#searchtypeswitcher li {
    display:inline;
}

#searchtypeswitcher li a {
    display:block;
    padding:5px 10px;
    margin-{vb:stylevar right}:5px;
    background-color:#97b1c2;
    float:{vb:stylevar left};
    color:#FFF;
    text-decoration:none;
    -moz-border-radius-top{vb:stylevar right}: {vb:stylevar border_radius};
    -moz-border-radius-top{vb:stylevar left}: {vb:stylevar border_radius};
    -webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar border_radius};
    -webkit-border-top-{vb:stylevar left}-radius: {vb:stylevar border_radius};
}

#searchtypeswitcher li.selected a {
    background-color:#5a7f97;
}

#searchtypeswitcher li a:hover {
    background-color:#5a7f97;
}

CHANGE the above (EXAMPLE "#5a7f97") colors to suit your current style..

I will be providing many more tips and tricks in the coming weeks as we document more minor issues, but these should keep you busy for now, hope that helps some of you out, We also have more articles listed on vBulletin 4 styles forums.

Best of luck with your forums

PS. vBulletin.com can i have permissions to edit this thread at my discretion to add more problems / solutions ?