Quote:
Originally Posted by Wired1
Working, but ugly as hell. Probably going to just release it as a beta and see if someone with better CSS skills than I can clean it up.
|
I just completed a similar hack for my vB4 forum. I even managed to get my head around the styling and have used only existing stylevars for colours, so it will update with different styles. Feel free to use any of this:
Template markup:
I have used a h6 header and a definition list for the different fields and values - semantically, I think that's the best approach.
PHP Code:
<!-- start Computer Details -->
<vb:if condition="$post['field13'] OR $post['field14'] OR $post['field15'] OR $post['field16'] OR $post['field17'] OR $post['field18'] OR $post['field19'] OR $post['field20']">
<div class="popupmenu" style="clear:both">
<a href="javascript://" class="popupctrl">Computer Details</a>
<dl class="popupbody" style="width:250px">
<h6>{vb:raw post.username}'s Computer Details</h6>
<vb:if condition="$post['field13']">
<dt>Operating System:</dt><dd>{vb:raw post.field13}</dd>
</vb:if>
<vb:if condition="$post['field14']">
<dt>Computer:</dt><dd>{vb:raw post.field14}</dd>
</vb:if>
<vb:if condition="$post['field16']">
<dt>Motherboard:</dt><dd>{vb:raw post.field16}</dd>
</vb:if>
<vb:if condition="$post['field17']">
<dt>CPU:</dt><dd>{vb:raw post.field17}</dd>
</vb:if>
<vb:if condition="$post['field18']">
<dt>RAM:</dt><dd>{vb:raw post.field18}</dd>
</vb:if>
<vb:if condition="$post['field19']">
<dt>Graphics:</dt><dd>{vb:raw post.field19}</dd>
</vb:if>
<vb:if condition="$post['field20']">
<dt>Stotage:</dt><dd>{vb:raw post.field20}</dd>
</vb:if>
<vb:if condition="$post['field15']">
<dt>Monitor:</dt><dd>{vb:raw post.field15}</dd>
</vb:if>
</dl>
</div>
</vb:if>
<!-- end Computer Details -->
I have added this just below the avatar in the postbit_legacy template (there's no template hook in that location) but I guess it could go at any hook location.
Notice that I had to add one inline style rule (clear:both) to the containing div in order to keep it in place.
I haven't bothered to use language variables.
Resulting HTML markup:
HTML Code:
<!-- start Computer Details -->
<div class="popupmenu" style="clear:both">
<a href="javascript://" class="popupctrl">Computer Details</a>
<dl class="popupbody" style="width:220px">
<h6>CADTutor's Computer Details</h6>
<dt>Operating System:</dt><dd>Windows Vista Home Premium SP2 32bit</dd>
<dt>Motherboard:</dt><dd>Asus P5K WS</dd>
<dt>CPU:</dt><dd>Intel Core2Duo E6850 @ 3.0 GHz</dd>
<dt>RAM:</dt><dd>4GB PC2-8500 C5 Corsair Dominator</dd>
<dt>Graphics:</dt><dd>NVIDIA Quadro FX 1700 512 MB</dd>
<dt>Stotage:</dt><dd>Samsung Spinpoint T166 320 GB</dd>
<dt>Monitor:</dt><dd>BenQ FP241W 24" Wide</dd>
</dl>
</div>
<!-- end Computer Details -->
Notice that the definition list has a fixed width. This is because the default "auto" value restricts it to the with of the postbit user info column, so I'm forcing it to be wider.
Additional CSS added at the bottom of the additional.css template:
HTML Code:
/* COMPUTER DETAILS DROP-DOWN */
.popupbody h6 {
font-weight: bold;
color: {vb:stylevar postbithead_color};
background: {vb:stylevar postbithead_background};
padding: 6px 7px;
border: {vb:stylevar postbithead_border};
}
.popupbody dt {
background-color: {vb:stylevar popupmenu_background.backgroundColor};
padding: 3px 7px 4px 7px;
}
.popupbody dd {
background-color: {vb:stylevar formrow_background.backgroundColor};
padding: 3px 7px 4px 7px;
}
In the default style:
Attachment 118586
This is what it looks like in postbit_legacy.
I'm not claiming to be an expert at any of this but I thought it might help progress this mod. I'd be grateful if, in return, you could see any obvious improvements I could make to my hack.
Thanks - keep up the good work!
More Information