History of PackageMSS

Differences from version 4 to 10



@@ -4,31 +4,32 @@

 {maketoc}
 
 !Preface
-Themes 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 [http://www.csszengarden.com/|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.
+Themes 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 [http://www.csszengarden.com/|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 Plan
-A 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.
+A 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 thing
 
-A designer designed a theme called ''grind''. An __unknown admin__ likes it and decides to use it for his Tikipro site. Four files are involved:
+A 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((
 # ))grind_comments_en.css((
 # ))grind_admin.css((
 # ))grind_username.css((
 The first 2 files were made by that designer, the 3rd file will contain the rules the admin wants to impose, the 4th file will contain rules that a user wants to impose, granted the admin lets him use the __MSS__ feature (if that's not the case, the 4th file would not have to exist at all, in contrary to what had been stated above).
 
--+__grind.css__+-
-{CODE(colors=>highlighting)}
+!!!-grind.css source
+{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)}
+!!!-grind_comments_en.css source
+{CODE(colors=>highlighting)}
 body.grindy {}
 
 div.grindy {} /* This is the box that is used to display certain stuff

@@ -43,219 +44,250 @@

  (even inside table cells!) */
 
 strong {} /* text that should be bold, but is dark red and
- not-bold in my theme "grind" */
+ 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''
+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:
 
-{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>
+''this form is currently under heavy development''
+!!!-user's form source code / [http://www.bitweaver.org/wiki/index.php?page=PackageMMS_form|form]
+{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="" />
+ &nbsp;
+ <select>
+ <option>repeat: only x</option>
+ <option>repeat: only y</option>
+ <option>repeat: x and y</option>
+ <option>no repeat</option>
+ </select>
  background image
 
-&lt;br /&gt;&lt;br /&gt;
- &lt;table&gt;
- &lt;caption&gt;border manager&lt;/caption&gt;
- &lt;tr&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;th&gt;border color&lt;/th&gt;
- &lt;th&gt;border style&lt;/th&gt;
- &lt;th&gt;border width&lt;/th&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;th&gt;top&lt;/th&gt;
- &lt;td&gt;&lt;input size=&quot;4&quot; type=&quot;text&quot; value=&quot;&quot; /&gt;&lt;/td&gt;
- &lt;td&gt;
- &lt;select&gt;
- &lt;option&gt;none&lt;/option&gt;
- &lt;option&gt;hidden&lt;/option&gt;
- &lt;option&gt;dotted&lt;/option&gt;
- &lt;option&gt;dashed&lt;/option&gt;
- &lt;option&gt;solid&lt;/option&gt;
- &lt;option&gt;double&lt;/option&gt;
- &lt;option&gt;groove&lt;/option&gt;
- &lt;option&gt;ridge&lt;/option&gt;
- &lt;option&gt;inset&lt;/option&gt;
- &lt;option&gt;outset&lt;/option&gt;
- &lt;/select&gt;
- &lt;/td&gt;
- &lt;td&gt;&lt;input size=&quot;4&quot; type=&quot;text&quot; value=&quot;0px&quot; /&gt;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;th&gt;right&lt;/th&gt;
- &lt;td&gt;&lt;input size=&quot;4&quot; type=&quot;text&quot; value=&quot;&quot; /&gt;&lt;/td&gt;
- &lt;td&gt;
- &lt;select&gt;
- &lt;option&gt;none&lt;/option&gt;
- &lt;option&gt;hidden&lt;/option&gt;
- &lt;option&gt;dotted&lt;/option&gt;
- &lt;option&gt;dashed&lt;/option&gt;
- &lt;option&gt;solid&lt;/option&gt;
- &lt;option&gt;double&lt;/option&gt;
- &lt;option&gt;groove&lt;/option&gt;
- &lt;option&gt;ridge&lt;/option&gt;
- &lt;option&gt;inset&lt;/option&gt;
- &lt;option&gt;outset&lt;/option&gt;
- &lt;/select&gt;
- &lt;/td&gt;
- &lt;td&gt;&lt;input size=&quot;4&quot; type=&quot;text&quot; value=&quot;0px&quot; /&gt;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;th&gt;bottom&lt;/th&gt;
- &lt;td&gt;&lt;input size=&quot;4&quot; type=&quot;text&quot; value=&quot;&quot; /&gt;&lt;/td&gt;
- &lt;td&gt;
- &lt;select&gt;
- &lt;option&gt;none&lt;/option&gt;
- &lt;option&gt;hidden&lt;/option&gt;
- &lt;option&gt;dotted&lt;/option&gt;
- &lt;option&gt;dashed&lt;/option&gt;
- &lt;option&gt;solid&lt;/option&gt;
- &lt;option&gt;double&lt;/option&gt;
- &lt;option&gt;groove&lt;/option&gt;
- &lt;option&gt;ridge&lt;/option&gt;
- &lt;option&gt;inset&lt;/option&gt;
- &lt;option&gt;outset&lt;/option&gt;
- &lt;/select&gt;
- &lt;/td&gt;
- &lt;td&gt;&lt;input size=&quot;4&quot; type=&quot;text&quot; value=&quot;0px&quot; /&gt;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;th&gt;left&lt;/th&gt;
- &lt;td&gt;&lt;input size=&quot;4&quot; type=&quot;text&quot; value=&quot;&quot; /&gt;&lt;/td&gt;
- &lt;td&gt;
- &lt;select&gt;
- &lt;option&gt;none&lt;/option&gt;
- &lt;option&gt;hidden&lt;/option&gt;
- &lt;option&gt;dotted&lt;/option&gt;
- &lt;option&gt;dashed&lt;/option&gt;
- &lt;option&gt;solid&lt;/option&gt;
- &lt;option&gt;double&lt;/option&gt;
- &lt;option&gt;groove&lt;/option&gt;
- &lt;option&gt;ridge&lt;/option&gt;
- &lt;option&gt;inset&lt;/option&gt;
- &lt;option&gt;outset&lt;/option&gt;
- &lt;/select&gt;
- &lt;/td&gt;
- &lt;td&gt;&lt;input size=&quot;4&quot; type=&quot;text&quot; value=&quot;0px&quot; /&gt;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;/table&gt;
-&lt;br /&gt;&lt;br /&gt;
- &lt;table&gt;
- &lt;caption&gt;font manager&lt;/caption&gt;
- &lt;tr&gt;
- &lt;td&gt;font color&lt;/td&gt;
- &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;#000&quot; /&gt;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;td&gt;font style&lt;/td&gt;
- &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;normal&quot; /&gt;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;td&gt;font size&lt;/td&gt;
- &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;0.8em&quot; /&gt;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;td&gt;font family&lt;/td&gt;
- &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;sans-serif&quot; /&gt;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;td&gt;line height&lt;/td&gt;
- &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;1.8em&quot; /&gt;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;/table&gt;
+<br /><br />
+ <table>
+ <caption>border manager</caption>
+ <tr>
+ <td>&nbsp;</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>
 
- &lt;/td&gt;
- &lt;td&gt;
- &lt;p&gt;no comment available&lt;/p&gt;
- &lt;p&gt;&lt;em&gt;&lt;a href=&quot;#&quot; onmouseout=&quot;document.bgColor='#ffffff'&quot; onmouseover=&quot;document.bgColor='#fdfd00'&quot;&gt;mouse-over here and &lt;strong&gt;highlight body&lt;/strong&gt; to see which element you are editing&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
- &lt;/td&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;td&gt;&amp;nbsp;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;/tbody&gt;
- &lt;/table&gt;
+ </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>&nbsp;</td>
+ <td>&nbsp;</td>
+ <td>&nbsp;</td>
+ </tr>
+ <tr>
+ <td>&nbsp;</td>
+ <td>&nbsp;</td>
+ <td>&nbsp;</td>
+ </tr>
+ <tr>
+ <td>&nbsp;</td>
+ <td>&nbsp;</td>
+ <td>&nbsp;</td>
+ </tr>
+ <tr>
+ <td>&nbsp;</td>
+ <td>&nbsp;</td>
+ <td>&nbsp;</td>
+ </tr>
+ </tbody>
+ </table>
 
- &lt;p&gt;
- Leave this field blank, or, If you know some CSS, add more style declarations:&lt;br /&gt;
- &lt;textarea rows=&quot;4&quot; cols=&quot;60&quot; &gt;&lt;/textarea&gt;
- &lt;/p&gt;
+ <p>
+ Leave this field blank, or, If you know some CSS, add more style declarations:<br />
+ <textarea rows="4" cols="60" ></textarea>
+ </p>
 
- &lt;p&gt;&lt;input type=&quot;submit&quot; /&gt;&lt;/p&gt;
+ <p><input type="submit" /></p>
 
- &lt;/fieldset&gt;
-&lt;/form&gt;
+ </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=&gt;highlighting)}
+!!!-grind_admin.css source
+{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
 * the actual attributes that can be set (not too many! no positioning whatsoever)
 * their values and how to pick them (dealing with colors and units? rather input than dropdown?)
 * that whole table should be ultra-usable, as to help somebody who's actually not aware of what he's doing
 * links gotta be in here, too. people always wanna change those
-* single table-rows could be single forms, so by constantly &quot;applying one row&quot; the user can play around with one element
+* single table-rows could be single forms, so by constantly "applying one row" the user can play around with one element
 * actually there shouldn't be just one CSS file per theme, but one per feature (to avoid CSS overhead). Right?
+
+!!Suggestions for Tags, Attributes and Classes that can be set:
+* major tags such as
+** body
+** h1, h2, h3
+** th
+** td
+** a
+** p (i don't think this is used at all on tp)
+** forms in general
+*** input, textarea...
+* all major layout id's
+* classes that can be set
+** some specific table classes including
+*** panel and data tables
+*** odd and even rows
+** menu links
+*** menuhead and menuoption
+* resriction of settings that can be modified
+** background and colour settings
+*** background-image, background-repeat, background-position, background-color
+** font settings
+*** font-family, font-color, font-weight, font-size
+** borders
+** padding and margin ??? -> ''this can cause a great deal of problems if used wrongly - especially cross browser compatibility will be a major issue - selectively allow these settings e.g. for body?''
+
+please add yout thoughts as you see fit
 
 !Problems
-* logo images should not be part of CSS, still MSS wizard should take care of it (like that TikiWiki CI thingy)
+* logo images should not be part of CSS, still MSS wizard should take care of it (like that ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and TikiWiki)) CI thingy)
 * upload of harmful pictures (or scripts?) via background-image:url()
 * file includes via @import (?)
 * !important rules overwrite short hand somewhat weirdly, like if you used short hand and specified a certain value, and then use !important and don't specify that value, !important might overwrite it with defaults
Page History
Date/CommentUserIPVersion
13 Dec 2004 (05:06 UTC)
SEWilco207.195.192.910
Current • Source
laetzer217.231.148.589
View • Compare • Difference • Source
xing83.64.18.1227
View • Compare • Difference • Source
xing62.99.189.1306
View • Compare • Difference • Source
xing62.99.189.1305
View • Compare • Difference • Source
xing62.99.189.1304
View • Compare • Difference • Source
xing62.99.189.1303
View • Compare • Difference • Source
laetzer217.231.170.1542
View • Compare • Difference • Source