Ultimate Online Forums - View Single Post - Is there a way I can add CSS classes to the wiki?

Sarphus · 2nd June 2007, 04:33 PM

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.

2nd June 2007, 04:33 PM	#1
Sarphus Join Date: May 2007 Posts: 30 Gold: 4 Thanks: 0 Thanked 0 Times in 0 Posts	Is there a way I can add CSS classes to the wiki? 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.