Jack_
9th December 2007, 04:46 AM
This really has nothing to do with web 2.0 per se, but the current design everybody seems to be using these days. Anyway, I am starting with the default look and going from there.
If anybody wants to help, I'll give more info.
This is a very crappy version, but here is the markup as an example:
<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions" /></a></td>
<td align="$stylevar[right]">
</td>
</tr>
</table>
[B]<span class="corners-bottom"><span></span></span></div>
</div>
The CSS I lifted from PHPbb:
/************ CSS Copyright PHPbb.com********************/
/************ Part 1*************************************/
.headerbar {
background: #dba147 none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
}
.navbar1 {
background: #61b4e7 none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
}
.navbar2 {
background: #015c97 none repeat-x 0 0;
color: #000000;
margin-bottom: 4px;
padding: 0 5px;
}
.forabg {
background: #b1b1b1 none repeat-x 0 0;
margin-bottom: 4px;
padding: 0 5px;
clear: both;
}
.forumbg {
background: #ebebeb none repeat-x 0 0;
margin-bottom: 4px;
padding: 0 5px;
clear: both;
}
.panel {
margin-bottom: 4px;
padding: 0 10px;
background-color: #f3f3f3;
color: #3f3f3f;
}
.post {
padding: 0 10px;
margin-bottom: 4px;
background-repeat: no-repeat;
background-position: 100% 0;
}
.post:target .content {
color: #000000;
}
.post:target h3 a {
color: #000000;
}
.bg1 { background-color: #f7f7f7;}
.bg2 { background-color: #f2f2f2; }
.bg3 { background-color: #ebebeb; }
.rowbg {
margin: 5px 5px 2px 5px;
}
.ucprowbg {
background-color: #e2e2e2;
}
.fieldsbg {
/*border: 1px #DBDEE2 solid;*/
background-color: #eaeaea;
}
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
font-size: 1px;
line-height: 1px;
display: block;
height: 5px;
background-repeat: no-repeat;
}
span.corners-top {
background-image: none;
background-position: 0 0;
margin: 0 -5px;
}
span.corners-top span {
background-image: none;
background-position: 100% 0;
}
span.corners-bottom {
background-image: none;
background-position: 0 100%;
margin: 0 -5px;
clear: both;
}
span.corners-bottom span {
background-image: none;
background-position: 100% 100%;
}
.headbg span.corners-bottom {
margin-bottom: -1px;
}
.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
margin: 0 -10px;
}
.rules span.corners-top {
margin: 0 -10px 5px -10px;
}
.rules span.corners-bottom {
margin: 5px -10px 0 -10px;
}
/************ End part 1**************************/
/*************************************************/
/************ Part 2******************************/
.headerbar {
background-color: #dba147;
background-image: url("/styles/prosilver/theme/images/bg_header.gif");
color: #FFFFFF;
}
.navbar1 {
background-color: #61b4e7;
}
.navbar2 {
background-color: #015c97;
}
.forabg {
background-color: #0076b1;
background-image: url("/styles/prosilver/theme/images/bg_list.gif");
}
.forumbg {
background-color: #12A3EB;
background-image: url("/styles/prosilver/theme/images/bg_header.gif");
}
.panel {
background-color: #ECF1F3;
color: #28313F;
}
.post:target .content {
color: #000000;
}
.post:target h3 a {
color: #000000;
}
.bg1 { background-color: #ECF3F7; }
.bg2 { background-color: #e1ebf2; }
.bg3 { background-color: #cadceb; }
.ucprowbg {
background-color: #DCDEE2;
}
.fieldsbg {
background-color: #E7E8EA;
}
span.corners-top {
background-image: url("/styles/prosilver/theme/images/corners_left.png");
}
span.corners-top span {
background-image: url("/styles/prosilver/theme/images/corners_right.png");
}
span.corners-bottom {
background-image: url("/styles/prosilver/theme/images/corners_left.png");
}
span.corners-bottom span {
background-image: url("/styles/prosilver/theme/images/corners_right.png");
}
/******************* End Part2*****************************/
Lots og junk to remove and edit, but that is the main idea.
If anybody wants to help, I'll give more info.
This is a very crappy version, but here is the markup as an example:
<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions" /></a></td>
<td align="$stylevar[right]">
</td>
</tr>
</table>
[B]<span class="corners-bottom"><span></span></span></div>
</div>
The CSS I lifted from PHPbb:
/************ CSS Copyright PHPbb.com********************/
/************ Part 1*************************************/
.headerbar {
background: #dba147 none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
}
.navbar1 {
background: #61b4e7 none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
}
.navbar2 {
background: #015c97 none repeat-x 0 0;
color: #000000;
margin-bottom: 4px;
padding: 0 5px;
}
.forabg {
background: #b1b1b1 none repeat-x 0 0;
margin-bottom: 4px;
padding: 0 5px;
clear: both;
}
.forumbg {
background: #ebebeb none repeat-x 0 0;
margin-bottom: 4px;
padding: 0 5px;
clear: both;
}
.panel {
margin-bottom: 4px;
padding: 0 10px;
background-color: #f3f3f3;
color: #3f3f3f;
}
.post {
padding: 0 10px;
margin-bottom: 4px;
background-repeat: no-repeat;
background-position: 100% 0;
}
.post:target .content {
color: #000000;
}
.post:target h3 a {
color: #000000;
}
.bg1 { background-color: #f7f7f7;}
.bg2 { background-color: #f2f2f2; }
.bg3 { background-color: #ebebeb; }
.rowbg {
margin: 5px 5px 2px 5px;
}
.ucprowbg {
background-color: #e2e2e2;
}
.fieldsbg {
/*border: 1px #DBDEE2 solid;*/
background-color: #eaeaea;
}
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
font-size: 1px;
line-height: 1px;
display: block;
height: 5px;
background-repeat: no-repeat;
}
span.corners-top {
background-image: none;
background-position: 0 0;
margin: 0 -5px;
}
span.corners-top span {
background-image: none;
background-position: 100% 0;
}
span.corners-bottom {
background-image: none;
background-position: 0 100%;
margin: 0 -5px;
clear: both;
}
span.corners-bottom span {
background-image: none;
background-position: 100% 100%;
}
.headbg span.corners-bottom {
margin-bottom: -1px;
}
.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
margin: 0 -10px;
}
.rules span.corners-top {
margin: 0 -10px 5px -10px;
}
.rules span.corners-bottom {
margin: 5px -10px 0 -10px;
}
/************ End part 1**************************/
/*************************************************/
/************ Part 2******************************/
.headerbar {
background-color: #dba147;
background-image: url("/styles/prosilver/theme/images/bg_header.gif");
color: #FFFFFF;
}
.navbar1 {
background-color: #61b4e7;
}
.navbar2 {
background-color: #015c97;
}
.forabg {
background-color: #0076b1;
background-image: url("/styles/prosilver/theme/images/bg_list.gif");
}
.forumbg {
background-color: #12A3EB;
background-image: url("/styles/prosilver/theme/images/bg_header.gif");
}
.panel {
background-color: #ECF1F3;
color: #28313F;
}
.post:target .content {
color: #000000;
}
.post:target h3 a {
color: #000000;
}
.bg1 { background-color: #ECF3F7; }
.bg2 { background-color: #e1ebf2; }
.bg3 { background-color: #cadceb; }
.ucprowbg {
background-color: #DCDEE2;
}
.fieldsbg {
background-color: #E7E8EA;
}
span.corners-top {
background-image: url("/styles/prosilver/theme/images/corners_left.png");
}
span.corners-top span {
background-image: url("/styles/prosilver/theme/images/corners_right.png");
}
span.corners-bottom {
background-image: url("/styles/prosilver/theme/images/corners_left.png");
}
span.corners-bottom span {
background-image: url("/styles/prosilver/theme/images/corners_right.png");
}
/******************* End Part2*****************************/
Lots og junk to remove and edit, but that is the main idea.