History of PackageMSS
Version 6 | Current version | |
---|---|---|
this is no actual feature yet, but a feature proposal PrefaceThemes are the reason for webmasters to try out a CMS. Only if its looks can easily be personalized it is considered a professional solution. Modern CMS sport features like "Themes", "Styles, or "Skins". Most of them, though, just have one actual theme, and some variations of colors and borders. The (now) classic source for what themes actually mean, is probably CSS Zen Garden. Every theme is different, still you could vary each one of them with another logo and some different colors to gain a nice sub-theme.Our PlanA wizard called my site stylist (not just CSS, but MSS) encourages an admin or user to adapt a given theme and apply basic style-changes. The result will not be a new theme, but a sub-theme. MSS aims at the user who doesn't know enough CSS and HTML to produce a full fledged theme by himself. The main target group is the admin of a Tikipro site. After the MSS wizard is done, the resulting style will give his site a "different from the rest" look.Flow chart about the whole thingA designer designed a theme called grind. An unknown admin likes it and decides to use it for his Tikipro site. Four files are involved:
grind.css {CODE(colors=>highlighting)} body.grindy {background-color:#f0f0f0;background-image:url('/img/scanlines_top.gif')} div.grindy {border:1px solid #f00;background-color:#fff} h1 {color:#000;text-size:3em;font-family:serif;font-weight:700} p {color:#a00;text-size:1em;font-family:sans-serif} strong {color:#300;font-weight:500} {CODE} grind_comments_en.css {CODE(colors=>highlighting)} body.grindy {} div.grindy {} /* This is the box that is used to display certain stuff on every page. It contains the main content excluding the controls (like tabs and buttons and such). These comments should be as long as possible. */ h1 {} /* headings of main content, also used for blog titles and as file gallery comments */ p {} /* every piece of text of the site (even inside table cells!) */ strong {} /* text that should be bold, but is dark red and not-bold in my theme "grind" */ {CODE} We had somehow educated that designer that his theme would never be part of Tikipro, and thus he would remain un-honored for the rest of his life, if he didn't deliver a thought-through CSS and very interesting comments in a 2nd file. As soon as the unknown admin fires up his My Site Stylist (MSS), a script must open up grind.css and grind_comments_en.css (language depending on user settings) and collect the selectors, the styles, and the comments, so that the following huge form can happen to the user:this table is currently under heavy development {CODE(colors=>highlighting)} <form> <fieldset> <legend>grind form</legend> <table border="1"> <colgroup><col id="module" /><col /><col /></colgroup> <thead> <caption>create your theme here</caption> <tr> <th>selector</th> <th>possible attributes and their values</th> <th>comment/highlight</th> </tr> </thead> <tfoot> <tr> <td colspan="3">table footer: some links here?</td> </tr> </tfoot> <tbody> <tr> <td>body</td> <td> <input size="8" type="text" /> text color (<em>onclick: chose one</em>)<br /> <input size="8" type="text" /> background color (<em>onclick: chose one</em>)<br /> <input type="file" value="" /> <select> <option>repeat: only x</option> <option>repeat: only y</option> <option>repeat: x and y</option> <option>no repeat</option> </select> background image <br /><br /> <table> <caption>border manager</caption> <tr> <td> </td> <th>border color</th> <th>border style</th> <th>border width</th> </tr> <tr> <th>top</th> <td><input size="4" type="text" value="" /></td> <td> <select> <option>none</option> <option>hidden</option> <option>dotted</option> <option>dashed</option> <option>solid</option> <option>double</option> <option>groove</option> <option>ridge</option> <option>inset</option> <option>outset</option> </select> </td> <td><input size="4" type="text" value="0px" /></td> </tr> <tr> <th>right</th> <td><input size="4" type="text" value="" /></td> <td> <select> <option>none</option> <option>hidden</option> <option>dotted</option> <option>dashed</option> <option>solid</option> <option>double</option> <option>groove</option> <option>ridge</option> <option>inset</option> <option>outset</option> </select> </td> <td><input size="4" type="text" value="0px" /></td> </tr> <tr> <th>bottom</th> <td><input size="4" type="text" value="" /></td> <td> <select> <option>none</option> <option>hidden</option> <option>dotted</option> <option>dashed</option> <option>solid</option> <option>double</option> <option>groove</option> <option>ridge</option> <option>inset</option> <option>outset</option> </select> </td> <td><input size="4" type="text" value="0px" /></td> </tr> <tr> <th>left</th> <td><input size="4" type="text" value="" /></td> <td> <select> <option>none</option> <option>hidden</option> <option>dotted</option> <option>dashed</option> <option>solid</option> <option>double</option> <option>groove</option> <option>ridge</option> <option>inset</option> <option>outset</option> </select> </td> <td><input size="4" type="text" value="0px" /></td> </tr> </table> <br /><br /> <table> <caption>font manager</caption> <tr> <td>font color</td> <td><input type="text" value="#000" /></td> </tr> <tr> <td>font style</td> <td><input type="text" value="normal" /></td> </tr> <tr> <td>font size</td> <td><input type="text" value="0.8em" /></td> </tr> <tr> <td>font family</td> <td><input type="text" value="sans-serif" /></td> </tr> <tr> <td>line height</td> <td><input type="text" value="1.8em" /></td> </tr> </table> </td> <td> <p>no comment available</p> <p><em><a href="#" onmouseout="document.bgColor='#ffffff'" onmouseover="document.bgColor='#fdfd00'">mouse-over here and <strong>highlight body</strong> to see which element you are editing</a></em></p> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> <p> Leave this field blank, or, If you know some CSS, add more style declarations:<br /> <textarea rows="4" cols="60" ></textarea> </p> <p><input type="submit" /></p> </fieldset> </form> {CODE} Now, ))grind_admin.css(( will be created. In header.tpl it will have to be included as the very last style sheet, so that its style overwrites grind.css (the !important trick will also serve that purpose). grind_admin.css {CODE(colors=>highlighting)} body.grindy {} div.grindy {border-width:1px 1px 10px 1px;border-style:solid solid dashed solid; !important} h1 {color:#00ff00; !important} p {font:0.8em/1.8em #000 normal sans-serif; !important} strong {font-weight:700; !important} {CODE} That's it. Let's talk about
Suggestions for Tags, Attributes and Classes that can be set:
please add yout thoughts as you see fit Problems
| this is no actual feature yet, but a feature proposal PrefaceThemes are needed in a CMS for consistent appearance and flexibility is needed so it can be adjusted for a site. Only if its looks can easily be personalized it is considered a professional solution. Modern CMS sport features like "Themes", "Styles", or "Skins". Most of them, though, just have one actual theme, and some variations of colors and borders. The (now) classic source for what themes actually mean, is probably CSS Zen Garden. Every theme is different, still you could vary each one of them with another logo and some different colors to gain a nice sub-theme.Our PlanA wizard called my site stylist (not just CSS, but MSS) encourages an admin or user to adapt a given theme and apply basic style-changes. The result will not be a new theme, but a sub-theme. MSS aims at the user who doesn't know enough CSS and HTML to produce a full fledged theme by himself. The main target group is the admin of a bitweaver site. After the MSS wizard is done, the resulting style will give his site a "different from the rest" look.Flow chart about the whole thingA designer designed a theme called grind. An unknown admin likes it and decides to use it for his bitweaver site. Four files are involved:
grind.css source[+]grind_comments_en.css source[+]We had somehow educated that designer that his theme would never be part of bitweaver, and thus he would remain un-honored for the rest of his life, if he didn't deliver a thought-through CSS and very interesting comments in a 2nd file. As soon as the unknown admin fires up his My Site Stylist (MSS), a script must open up grind.css and grind_comments_en.css (language depending on user settings) and collect the selectors, the styles, and the comments, so that the following huge form can happen to the user:this form is currently under heavy development user's form source code / form[+]Now, ))grind_admin.css(( will be created. In header.tpl it will have to be included as the very last style sheet, so that its style overwrites grind.css (the !important trick will also serve that purpose). grind_admin.css source[+]That's it. Let's talk about
Suggestions for Tags, Attributes and Classes that can be set:
please add yout thoughts as you see fit Problems
|