I'm creating some custom styles specifically for styling item data, but these styles could be used for other things. The idea is to get away from using tables to display item data that isn't found on all items because the current template still creates the table even if the table is invisible.

So anyway... I poked around with some CSS here and there this weekend when I had nothing better to do and came up with a pretty good solution. What I can do is style a grouping of <UL><LI> tags as follows

<UL class="clsStatUL">
<LI class="clsLabel">Label</LI>
<LI class="clsValue">Value</LI>
</UL>

The output looks pretty much the same right now and with a little more styling it could actually look the same or better than the table method. The key difference is that I can change the if block in the template to look something like this...
{{#if:{{{slayer| }}}
| <ul class="clsStatUL"><li class="clsLabel">[[Slayer]]</li><li class="clsValue">{{{slayer| }}}</li></ul> | }}

This code will not even render a tag on the wiki page if the variable that is displayed by that tag is not passed into the template. I think it will make our item pages render faster. Right now I have the template set up to just make the table invisible if the parameter isn't passed in, so basically we have a ton of invisible tables. That's why weapons load so slowly. I could probably just move my if logic before the table is declared, but it's still a table and I really try not to use tables to display variable data.

Here's the problem... Wiki doesn't recognize <style></style> blocks, so I can't declare my classes in the header of the page. Is there a way I can add classes to the css files for the wiki, so we can have custom styling for our item blocks?

Oh! Btw, for now I was going to declare these styles like so (just so you can see where I'm going with this)

.clsStatUL
{
list-style-type:none;
margin:0 auto 0 auto;
width:400px;
padding-top:4px;
}
.clsLabel
{
background-color:CCCCFF;
padding: 2px 2px 2px 4px;
margin:2px 0 0 0;
width:50%;
display:inline;
}
.clsValue
{
background-color:White;
padding: 2px 2px 2px 4px;
margin:2px 0 0 0;
width:50%;
display:inline;
}
Basically, it forces the list items to display horizontally and gives the labels a nice blue background while maintaining nice margins and whatnot.
I can still use this styling, but I would have to actually use style declarations on each element, which would make restyling a page considerably more work. I'd prefer to be able to just declare a class, so we can restyle the whole page with just one edit.

I can add any classes you want to the main style sheet. Just make sure you have what you want because I don't want to be making a million changes. Post them in this topic when you are done.

I think the 3 classes I posted above will work well for items. What do you think? Do you like how that layout looks? Any suggestions?

I'm not the greatest with layout design, so the styling may need a little improvement, but I think UL tags make sense.

If you could do up an example with those styles I can tell you what I think.

Ok. I think I have my noinclude blocks in the right places that this will work as a "shield" template and still describe what I'm trying to do. I can't actually test the code because the styles on the UL/LI elements seem to be overriding my styles if I decalre these using "style =" syntax.

***CODE STARTS NOW***

<noinclude>
== Classes Used ==
... These are the class declarations for the styles used on this page ...
.clsStatUL
{
list-style-type:none;
margin:0 auto 0 auto;
width:400px;
padding-top:4px;

}
.clsLabel
{
background-color:#CCCCFF;
padding: 2px 2px 2px 4px;
margin:2px 0 0 0;
width:50%;
display:inline;
}
.clsValue
{
background-color:White;
padding: 2px 2px 2px 4px;
margin:2px 0 0 0;
width:50%;
display:inline;
}
</noinclude>
<!-- Still need styles to do the header info -->
{| class="infobox bordered" style="width:{{#if:{{{width|}}}|{{{width|}}}|500px }}; font-size:90%; text-align:left;"
! colspan="4" style="background-color:#CCCCFF; font-size:110%; text-align: center;" | ''{{{title|{{PAGENAME}}}}} Statistics''
|-
! style="background-color:#CCCCFF;" | [[Weight]]
| style="width:33%;" | {{{weight|<noinclude>1-20</noinclude>}}}
! style="background-color:#CCCCFF;" | Required Strength
| style="width:33%;" | {{{strreq|<noinclude>10 - 95</noinclude>}}}
|}
{{#if:{{{rarity|<noinclude>11</noinclude> }}}
| <ul class="clsStatUL"><li class="clsLabel">[[Rarity]]</li><li class="clsValue">{{{rarity| <noinclude>11</noinclude>}}}</li> | }}
{{#if:{{{hci|<noinclude>15</noinclude> }}}
| <ul class="clsStatUL"><li class="clsLabel">[[Hit Chance Increase]]</li><li class="clsValue">{{{hci| <noinclude>15</noinclude>}}}</li> | }}
{{#if:{{{dci|<noinclude>15</noinclude> }}}
| <ul class="clsStatUL"><li class="clsLabel">[[Defense Chance Increase]]</li><li class="clsValue">{{{dci| <noinclude>15</noinclude>}}}</li> | }}
{{#if:{{{rpd|<noinclude>15</noinclude> }}}
| <ul class="clsStatUL"><li class="clsLabel">[[Reflect Physical Damage]]</li><li class="clsValue">{{{rpd| <noinclude>15</noinclude>}}}</li> | }}
{{#if:{{{luck|<noinclude>100</noinclude> }}}
| <ul class="clsStatUL"><li class="clsLabel">[[Luck]]</li><li class="clsValue">{{{luck| <noinclude>15</noinclude>}}}</li> | }}
{{#if:{{{fc|<noinclude>100</noinclude> }}}
| <ul class="clsStatUL"><li class="clsLabel">[[Faster Casting]]</li><li class="clsValue">{{{fc| <noinclude>1</noinclude>}}}</li> | }}
{{#if:{{{fcr|<noinclude>100</noinclude> }}}
| <ul class="clsStatUL"><li class="clsLabel">[[Faster Casting Recovery]]</li><li class="clsValue">{{{fcr| <noinclude>15</noinclude>}}}</li> | }}
{{#if:{{{durability|<noinclude>100</noinclude> }}}
| <ul class="clsStatUL"><li class="clsLabel">[[Durability]]</li><li class="clsValue">{{{durability| <noinclude>1</noinclude>}}}</li> | }}
{{#if:{{{other|<noinclude>100</noinclude> }}}
| <ul class="clsStatUL"><li class="clsLabel">[[Other]]</li><li class="clsValue">{{{other| <noinclude>1</noinclude>}}}</li> | }}
<br>
{| border="0" cellspacing="1" cellpadding="5" align="left" width="50%"
! text-align:center; width:25%;" |
! style="background-color:#C0C0C0; text-align:center; width:15%;" | Physical
! style="background-color:#FF4040; text-align:center; width:15%;" | Fire
! style="background-color:#8080FF; text-align:center; width:15%;" | Cold
! style="background-color:#80FF80; text-align:center; width:15%;" | Poison
! style="background-color:#FF80FF; text-align:center; width:15%;" | Energy
|-
! style="font-size:110%; text-align:center; background-color:#CCCCFF; " | [[Resistances|Resistances]]
| style="text-align: center;" | {{{physicalresist|<noinclude>15</noinclude>}}}
| style="background-color:#FFC0C0; text-align:center;" | {{{fireresist|<noinclude></noinclude>}}}
| style="background-color:#C0C0FF; text-align:center;" | {{{coldresist|<noinclude></noinclude>}}}
| style="background-color:#C0FFC0; text-align:center;" | {{{poisonresist|<noinclude></noinclude>}}}
| style="background-color:#FFC0FF; text-align:center;" | {{{energyresist|<noinclude></noinclude>}}}
|}
<br clear="all" />
<noinclude>
== Usage ==
Copy the template box below and paste it into the needed page. Then fill out all the fields after the equal sign with the appropriate information.
{| style="background:transparent; border:none;"
|<pre>
{{Shields
|weight=
|rarity=
|hci=
|dci=
|rpd=
|luck=
|fc=
|fcr=
|sr=
|durability=
|lowerreq=
|strreq=
|other=
|physicalresist=
|fireresist=
|coldresist=
|poisonresist=
|energyresist=
}}
</pre>
|}
</noinclude>

Ok I will try and add those 3 classes tomorrow. I thought it would be pretty easy but then I opened up the CSS file and remembered that style code in MediaWiki is a horrible mess.

no rush

I actually just got back from Ohio (6 hour drive) last night and then had to be out at a plant in Baltimore (1.5 hours) this morning at 5 AM. needless to say I'm kinda pooped

I had a great day, which is over now, but I'm pretty much out of it. I am not a morning person, so starting my day at 3AM makes me mentally spacey for the rest of the day. I'm going to avoid any major programming for the rest of the day.