(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:
|
+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 table is currently under heavy development''
|
-!!!-table source code
|
-{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>
|
+''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="" /> |
+ |
+ <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>&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>
|
+<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>&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>
|
+ </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> |
+ 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>
|
+ <p><input type="submit" /></p> |
|
- </fieldset>
|
-</form>
|
+ </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 source
|
-{CODE(colors=>highlighting)}
|
+{CODE(colors=>highlighting)} |
body.grindy {}
|
div.grindy {border-width:1px 1px 10px 1px;border-style:solid solid dashed solid; !important}
|
h1 {color:#00ff00; !important}
|