blow
04-29-2011, 08:49 PM
Im tring to make a custom page for vbulletin, but im having trouble styling the div containers.
http://s2.imgkeep.com/i/00009/pz6kupwsdr50.png
See the colored boxes, i want them to look like this:
http://s2.imgkeep.com/i/00009/9yyc917ij9fv.png
Here's my code:
$stylevar[htmldoctype]
<html dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
<!-- no cache headers -->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<!-- end no cache headers -->
<title><phrase 1="$vboptions[bbtitle]">$vbphrase[x_powered_by_vbulletin]</phrase></title>
<style type="text/css">
.outer {
width:100%;
height: 500px;
border:1px solid red;
padding: 0px;
}
.first {
float:left;
width: 219px;
height: 200px;
margin: 5px 5px 5px 5px;
background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
border:1px solid black;
}
.second {
float:left;
width: 218px;
height: 200px;
margin: 5px 0px 5px 0px;
background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
border:1px solid black;
}
.third {
float:left;
width: 218px;
height: 200px;
margin: 5px 0px 5px 5px;
background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
border:1px solid black;
}
.forth {
float:left;
width: 219px;
height: 200px;
margin: 5px 5px 5px 5px;
background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
border:1px solid black;
}
</style>
$headinclude </head> <body> $header $navbar
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="$stylevar[cellspacing]" class="all">
<thead>
<div class="outer">
<div class="first">50</div><div class="second">50</div><div class="third">50</div><div class="forth">50</div>
</div>
<font size="2"><font face="Verdana, Arial, Helvetica, sans-serif"></font></font></div></td>
<if condition="$vboptions[showmoderatorcolumn]"> </if> </tr>
</thead>
$forumbits
<tbody>
</tbody>
</table>
$footer
</body>
</html>
I've added the background image at the top of the box to the div, thats ok
but then how do i add a alt image inside the box? Below that image?
And a separate little box around the date posted?
http://s2.imgkeep.com/i/00009/ate5z3gcvxwh.png
http://s2.imgkeep.com/i/00009/pz6kupwsdr50.png
See the colored boxes, i want them to look like this:
http://s2.imgkeep.com/i/00009/9yyc917ij9fv.png
Here's my code:
$stylevar[htmldoctype]
<html dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
<!-- no cache headers -->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<!-- end no cache headers -->
<title><phrase 1="$vboptions[bbtitle]">$vbphrase[x_powered_by_vbulletin]</phrase></title>
<style type="text/css">
.outer {
width:100%;
height: 500px;
border:1px solid red;
padding: 0px;
}
.first {
float:left;
width: 219px;
height: 200px;
margin: 5px 5px 5px 5px;
background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
border:1px solid black;
}
.second {
float:left;
width: 218px;
height: 200px;
margin: 5px 0px 5px 0px;
background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
border:1px solid black;
}
.third {
float:left;
width: 218px;
height: 200px;
margin: 5px 0px 5px 5px;
background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
border:1px solid black;
}
.forth {
float:left;
width: 219px;
height: 200px;
margin: 5px 5px 5px 5px;
background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
border:1px solid black;
}
</style>
$headinclude </head> <body> $header $navbar
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="$stylevar[cellspacing]" class="all">
<thead>
<div class="outer">
<div class="first">50</div><div class="second">50</div><div class="third">50</div><div class="forth">50</div>
</div>
<font size="2"><font face="Verdana, Arial, Helvetica, sans-serif"></font></font></div></td>
<if condition="$vboptions[showmoderatorcolumn]"> </if> </tr>
</thead>
$forumbits
<tbody>
</tbody>
</table>
$footer
</body>
</html>
I've added the background image at the top of the box to the div, thats ok
but then how do i add a alt image inside the box? Below that image?
And a separate little box around the date posted?
http://s2.imgkeep.com/i/00009/ate5z3gcvxwh.png