I have this in the additional.css template. It gives basic vB4 styling. For the table in the CONTENTS area you can use just plain table, tr and td tags.
See http://www.w3schools.com/html/ for using table tags etc.
/|--------------------------------------------------------------------------------------------------|\
<||-------------------------------------- CSS FOR PROJECTS-----------------------------------------||>
\|--------------------------------------------------------------------------------------------------|/
.boxcontainer {
clear: both;
width:100%;
float:{vb:stylevar left};
position: relative;
top: -10px;
padding: 0;
margin: 0px;
}
.shaded{
-moz-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
-webkit-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
}
.round {
-moz-border-radius-top{vb:stylevar right}: {vb:stylevar forumhead_top_corner_radius};
-moz-border-radius-top{vb:stylevar left}: {vb:stylevar forumhead_top_corner_radius};
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar forumhead_top_corner_radius};
-webkit-border-top-{vb:stylevar left}-radius: {vb:stylevar forumhead_top_corner_radius};
border-top-{vb:stylevar right}-radius: {vb:stylevar forumhead_top_corner_radius};
border-top-{vb:stylevar left}-radius: {vb:stylevar forumhead_top_corner_radius};
}
h3.boxhead1 {
/* like Forumbits on Forum Home Page */
background: {vb:stylevar forumhead_background};
_background-image: none;
border: {vb:stylevar forumhead_border};
padding: {vb:math {vb:stylevar padding}/2 - 1} {vb:stylevar padding};
font: {vb:stylevar forumhead_font};
color:{vb:stylevar forumhead_color};
margin: 5px 0px 0px 0px;
}
h3.boxhead2 {
/* like Whats Going On? on Forum Home Page */
background:{vb:stylevar blockhead_background};
_background-image: none;
border: {vb:stylevar forumhead_border};
padding: {vb:math {vb:stylevar padding}/2 - 1} {vb:stylevar padding};
font:{vb:stylevar blockhead_font};
font-weight: bold;
color:{vb:stylevar blockhead_color};
margin: 5px 0px 0px 0px;
}
h3.boxhead3 {
/* like Thread Info or Tags on Showthread Page */
background: {vb:stylevar secondarycontent_header_background};
_background-image: none;
border: {vb:stylevar forumhead_border};
padding: {vb:math {vb:stylevar padding}/2 - 1} {vb:stylevar padding};
font-size:{vb:stylevar secondarycontent_header_font.fontSize}{vb:stylevar secondarycontent_header_font.units};
font-weight:{vb:stylevar secondarycontent_header_font.fontWeight};
color: {vb:stylevar secondarycontent_header_color};
margin: 5px 0px 0px 0px;
}
h3 a:link{
font:inherit;
color:inherit;
}
h3 a.collapse img {
/* values are based on the image */
position:absolute;
top: -{vb:math {vb:stylevar padding} * 1.5 - 5};
{vb:stylevar right}: -{vb:math {vb:stylevar padding} * 0.6};
display:block;
width:13px;
height:13px;
overflow:hidden;
float: {vb:stylevar right};
clear: {vb:stylevar left};
color: {vb:stylevar forumhead_color};
}
.boxbody {
border: {vb:stylevar forumbits_border};
display: block;
background: none no-repeat scroll 0 0 transparent;
margin: 0;
padding: 0;
}
.boxsubhead {
font:{vb:stylevar blocksubhead_font};
color:{vb:stylevar blocksubhead_color};
background:{vb:stylevar blocksubhead_background};
padding:{vb:stylevar blocksubhead_padding};
}
.boxcontents {
background: {vb:stylevar postbit_userinfo_background};
_background-image: none;
padding: {vb:math {vb:stylevar padding}/2 - 1} {vb:stylevar padding};
border-top: medium none;
margin: 0;
font-family: {vb:stylevar forum_msg_font.fontFamily};
font: 13px/1.23 arial,helvetica,clean,sans-serif;
color: {vb:stylevar postbit_color};
}
/*--------------------------------------------------------------------------------------------------*\
<||----------------------------------------- EXAMPLE HTML--------------------------------------------||>
\*--------------------------------------------------------------------------------------------------*/
/*
Round-top Shaded Collapsible Box
<!--
<div class="boxcontainer">
<h3 class="boxhead1 round shaded">
TITLE
<a class="collapse" id="collapse_PROJECT"
href="{vb:raw relpath}#top">
<img src="{vb:stylevar imgdir_button}/collapse
{vb:raw vbcollapse.collapseimg_info_options}_40b.png" alt="" />
</a>
</a>
</h3>
<div id="PROJECT" class="boxbody shaded">
<div class="boxsubhead">
DESCRIPTION
</div>
<div class="boxcontents">
CONTENTS
</div>
</div>
</div>
-->
Fill in your values for TITLE, PROJECT (two places), DESCRIPTION and CONTENTS. For a simpler box omit "round"
and "shaded" in the class specifications. Remove the <a ... > ... </a> under TITLE to make it non_collapsible.
You can change colors and other properties with inline CSS.
*/