PDA

Click to See Complete Forum and Search --> : Best way to make a skinable app?

idn
06-03-2006, 07:42 PM
Hi,

I am starting a new school project and I want the app to be skinable and was wondering what is the best way to do this.

For example if I have lots of data grids I want to be able to configure the header cells to be a certain colour. But there is also alot of css information such as height and width i dont want to replicate in each css skin file.

Is it possible to split the two so i could have structure.css and then have skin1.css / skin2.css which has all the colour information in it?

Just looking for hints and tips really before I start the projects, thanks!
ray326
06-04-2006, 05:41 PM
Some people do split their css into functional files like that. It's a matter of taste and design but, as you've noticed, it can be handy if you simply want to change a single aspect of the presentation like colors.
Ultimater
06-05-2006, 05:43 PM
Something to play with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<title></title>
<style type="text/css">
table.datatype1 th{
background-color:#000; color:#fff; font-family:arial; font-size:medium;
}
table.datatype1 tr.darkrow td{
background-color:#555; color:#fff; font-family:arial; font-size:small;
}
table.datatype1 tr.lightrow td{
background-color:#777; color:#fff; font-family:arial; font-size:small;
}

table.datatype2 th{
background-color:#ccc; color:#000; font-family:arial; font-size:medium;
}
table.datatype2 tr.darkrow td{
background-color:#ddd; color:#000; font-family:arial; font-size:small;
}
table.datatype2 tr.lightrow td{
background-color:#aaa; color:#000; font-family:arial; font-size:small;
}

</style>
</head>
<body>
<div>
<table class="datatype1">
<colgroup>
<col width="150px">
<col width="150px">
<col>
</colgroup>
<tbody>
<tr>
<th>Name Before</th><th>Name After</th><th>Logged time</th>
</tr>
<tr class="darkrow">
<td>PuRpLe_MaNaTeE1013</td><td>Abby Anderson</td><td>Apr 10 2006, 09:58 PM</td>
</tr>
<tr class="lightrow">
<td>Cade A. Gregory</td><td>Cade</td><td>Apr 10 2006, 09:52 PM</td>
</tr>
<tr class="darkrow">
<td>Sarah Dragonis</td><td>.Vendetta</td><td>Apr 01 2006, 10:51 PM</td>
</tr>
<tr class="lightrow">
<td>fairlyx3flirty</td><td>Elizabeth Riddle</td><td>Mar 18 2006, 11:24 PM</td>
</tr>
<tr class="darkrow">
<td>CiggaWeed</td><td>Descyple</td><td>Mar 18 2006, 09:41 AM</td>
</tr>
<tr class="lightrow">
<td>James</td><td>James Carter</td><td>Jan 14 2006, 07:07 PM</td>
</tr>
<tr class="darkrow">
<td>dansXgirl</td><td>Katie</td><td>Dec 10 2005, 09:54 PM</td>
</tr>
<tr class="lightrow">
<td>the_4th_member</td><td>Tiffany</td><td>Nov 26 2005, 06:00 PM</td>
</tr>
<tr class="darkrow">
<td>Jocelyn_Burrowly</td><td>Corydon Shiriva</td><td>Nov 25 2005, 03:43 PM</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Try changing <table class="datatype1"> to: <table class="datatype2">