View Full Version : "Web 2.0" style


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]">&nbsp;

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

Floris
9th December 2007, 08:47 AM
Oeeeh, rounded corners :) Looks nice. Good start !

Jack_
9th December 2007, 08:53 AM
ugh, lots and lots of work. Anybody care to help a n00b out?

Timewalk
9th December 2007, 05:59 PM
Looking very good :)

Jack_
9th December 2007, 09:44 PM
Some questions.

1. I would like to put a wrapper around to make a nice border. I do not see one for vB unless I missed it. If there is not, where do I place the div tags to achieve this? ( Figured it out)

2. Where is a good place to match color schemes? (Googled, found it)

3. Would it be better to place the forum tables, replies, etc in rounded boxes or is that overkill?

Here's a screenie so far:

Jack_
10th December 2007, 03:21 PM
It looks a lot better now:

Floris
10th December 2007, 03:42 PM
Here's my own attempt at a new prostyle child-style with rounded corners. As you can see. your attempt looks much better :)

Jack_
12th December 2007, 02:39 AM
Alright, whoever wants to BETA test it is more than free to do so. Find some crappy markup? Find crappy CSS? Know of a better way to make it look better? Then by all means post it.

Here is the first release in an attachment.

Some things to know:

Change the paths to match the images directory in the stylevars and the extra CSS field. I will NOT be responsible if your current installation gets messed up, so make sure to test it where it is not a live environment.