| <html> |
| <head> |
| <title>CSS Guide for NetBeans Content, and Templates</title> |
| <meta name="description" content="A Guide to using netbeans.css, and some sample templates"> |
| <link rel="stylesheet" type="text/css" href="../../netbeans.css"> |
| </head> |
| |
| <body> |
| |
| <h1>netbeans.org CSS Guide and Templates</h1> |
| |
| <p>The purpose of this document is to give website contributors some |
| simple guidelines on how to use the defined styles on netbeans.org.</p> |
| |
| <br><br> |
| <h2>Contents</h2> |
| <p><ul> |
| <li><a href="#intro">Introduction</A> |
| <li><a href="#basics">Basic Rules</A> |
| <li><a href="#adv">Advantages of Multiple Classes</a> |
| <li><a href="#wish">Docs Team CSS wishlist</a> |
| <li><a href="#elementary">Elementary CSS classes</a> |
| <li><a href="#tools">Authoring Tools</a> |
| <li><a href="#floats">Examples : Floating elements, feedback-box, notes, tips</a> |
| <li><a href="#bgs">Examples : Backgrounds, align, valign, stamp</a> |
| <li><a href="#lists">Examples : Lists</a> |
| <li><a href="#table">Examples : Table</a> |
| <li><a href="#borders">Examples : Borders of elements</a> |
| </ul></p> |
| |
| <br><br> |
| <h2><a name="intro">Introduction</a></h2> |
| <p>If you'd like your webpages on netbeans.org to have a look and feel |
| consistent with the rest of the site, please make use of the netbeans.css |
| file.</p> |
| |
| <p>To use the css file, simply include a line like the following between |
| the <head> tags of your html :</p> |
| |
| <p><tt> <link rel="stylesheet" href="netbeans.css" type="text/css"></tt></p> |
| |
| <p>Note you will need to adjust the path to the netbeans.css file depending |
| on where your content lives. Eg if your document lives in /kb/60/, then |
| to access netbeans.css at the root level you would need to use :</p> |
| |
| <p><tt> <link rel="stylesheet" href="../../netbeans.css" type="text/css"></tt></p> |
| |
| <p>Please use relative paths, as described here, so that your file will work |
| in your local checkout, and you can preview it using the real styling.</p> |
| |
| <p>By referencing the site netbeans.css file, you can make use of all pre-defined |
| styles and your content will match the rest of the site. When some global style |
| is updated, your content will automatically appear in the new style without you |
| having to change anything.</p> |
| |
| <br><a name="basics"><h2>Basic rules</h2></a> |
| <p><ol> |
| <li>Do not use inline styles if possible;</li> |
| <li>Check that your editor does not add inline styles automatically;</li> |
| <li>Use the existing css classes from netbeans.css;</li> |
| <li>Use multiple css classes on a single element for more complicated styles;</li> |
| </ol></p> |
| |
| <br><a name="adv"><h2>Advantages of Multiple Classes</h2></a> |
| <p> |
| Multiple classes can make it easier to add special effects to elements |
| without having to create a whole new style for that element. netbeans.css |
| defines several simple classes which can be combined to acheive the |
| desired look of the element. |
| </p> |
| |
| <p> |
| For details on usage see the examples at the bottom of this page. |
| </p> |
| |
| <p> |
| In addition, all the content under netbeans.org/kb/ is automatically |
| wrapped by the special html element <div id="doc"> which allows |
| more fine grained control over the look of that section. |
| </p> |
| |
| <a name="wish"><h2>Docs Team CSS wishlist</h2></a> |
| <p> |
| The NetBeans Docs Team maintains their <a href="http://wiki.netbeans.org/wiki/view/DocRequirementsCSS">CSS wishlist Wiki</a>, |
| which is monitored by the webteam. Reasonable requests can be implemented |
| and added to the netbeans.css file. |
| </p> |
| |
| <br><a name="elementary"><h2>Elementary CSS classes defined in netbeans.css</h2></a> |
| <p><table class="full-width"> |
| <tr> |
| <td class="valign-top"> |
| <h3>Aligning text in the element</h3> |
| <ul> |
| <li>.align-right</li> |
| <li>.align-left</li> |
| <li>.align-center</li> |
| <li>.align-justify</li> |
| <li>.valign-top</li> |
| <li>.valign-center</li> |
| <li>.valign-bottom</li> |
| </ul> |
| </td> |
| <td class="valign-top"> |
| <h3>Decorating text</h3> |
| <ul> |
| <li>.bold</li> |
| <li>.orange</li> |
| <li>.blue</li> |
| <li>.u</li> |
| </ul> |
| <h3>Float elements</h3> |
| <ul> |
| <li>.float-left</li> |
| <li>.float-right</li> |
| <li>.img-left</li> |
| <li>.img-right</li> |
| </ul> |
| </td> |
| <td class="valign-top"> |
| <h3>Others</h3> |
| <ul> |
| <li>.feedback-box</li> |
| <li>.stamp, .notes, .tips, .alert</li> |
| <li>.half-width (equeals 50%)</li> |
| <li>.full-width (equeals 100%)</li> |
| <li>.box (equals all-sides gray hairline border)</li> |
| <li>.colapse (equals collapsed border)</li> |
| <li>.margin-around (equals 10px margin all around)</li> |
| <li>.innerpadding (equals 5px inner padding all around)</li> |
| </ul> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <h3>Borders of the element</h3> |
| <table> |
| <tr><td> |
| <ul> |
| <li>.b-left</li> |
| <li>.b-right</li> |
| <li>.b-top</li> |
| <li>.b-bottom</li> |
| <li>.b-all</li> |
| <li>.b-none</li> |
| </ul> |
| </td> |
| <td class="valign-top"> |
| <ul> |
| <li>.b-left-dashed</li> |
| <li>.b-right-dashed</li> |
| <li>.b-top-dashed</li> |
| <li>.b-bottom-dashed</li> |
| </ul> |
| </td> |
| </tr> |
| </table> |
| </td> |
| <td class="valign-top"> |
| <h3>Backgrounds</h3> |
| <ul> |
| <li>.bg-white</li> |
| <li>.bg-bege</li> |
| <li>.bg-sky</li> |
| <li>.bg-silver</li> |
| </ul> |
| </td> |
| <td></td> |
| </tr> |
| </table></p> |
| |
| <br><a name="tools"><h2>Authoring Tools</h2></a> |
| <p><ol> |
| <li>Using NetBeans is good start - it does nice tag completion, it |
| checks for unclosed tags, and does formatingl</li> |
| |
| <li><a href="http://www.getfirebug.com/">Firefox add-on Firebug</a> - |
| a great tool for inspecting/validating a page within your browser. |
| We highly recomend its 'Inspect' feature - when you are in Ispect mode, |
| just pointing the mouse cursor over an element on the page shows the |
| element's code, css and much more. This is usefull eg for inspecting |
| exampe code quickly.</li> |
| </ol> |
| <br> |
| |
| <h1>Examples</h1> |
| |
| <a name="floats"><h2>Floating elements, feedback-box, notes, tips, Trails box</h2></a> |
| <h3>Image floats on left</h3> |
| <div class="feedback-box">Give us feedback </div> |
| <img class="img-left" src="/images_www/dev-services.jpg"> |
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. Vivamus interdum pretium lorem. Etiam lacus lorem, ornare eu, varius in, mattis id, sem. Duis aliquet interdum purus. Sed et lectus. |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. Vivamus interdum pretium lorem. Etiam lacus lorem, ornare eu, varius in, mattis id, sem. Duis aliquet interdum purus. Sed et lectus. |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. Vivamus interdum pretium lorem. Etiam lacus lorem, ornare eu, varius in, mattis id, sem. Duis aliquet interdum purus. Sed et lectus. |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. Vivamus interdum pretium lorem. Etiam lacus lorem, ornare eu, varius in, mattis id, sem. Duis aliquet interdum purus. Sed et lectus. |
| </p> |
| <h3>Image floats on right, justifyied text</h3> |
| <img class="img-right" src="/images_www/dev-services.jpg"> |
| <p class="align-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. Vivamus interdum pretium lorem. Etiam lacus lorem, ornare eu, varius in, mattis id, sem. Duis aliquet interdum purus. Sed et lectus. |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. Vivamus interdum pretium lorem. Etiam lacus lorem, ornare eu, varius in, mattis id, sem. Duis aliquet interdum purus. Sed et lectus. |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. Vivamus interdum pretium lorem. Etiam lacus lorem, ornare eu, varius in, mattis id, sem. Duis aliquet interdum purus. Sed et lectus. |
| </p> |
| <table> |
| <tr> |
| <td> |
| <h3 class="notes">Notes</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar.</p> |
| </td> |
| <td> |
| <h3 class="tips">Something usefull</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar.</p> |
| </td> |
| </tr> |
| </table> |
| <p><b class="notes">Note:</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar.</p> |
| <p><b class="alert">Warning</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar.</p> |
| <p class="tips">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar. |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar.</p> |
| |
| <div class="trail-box half-width"> |
| <div class="trail-box-header"> |
| <img src="/images_www/v6/trails/trails-box-tr.png" width="7" height="21" class="right"> |
| <img src="/images_www/v6/trails/trails-box-tl.png" width="7" height="21" class="left"> |
| <!-- here is the box header --> |
| <h1>Get Started</h1> |
| </div> |
| <div class="trail-box-content"> |
| <!-- here is the box content --> |
| <ul> |
| <li>item1</li> |
| <li>item22</li> |
| <li>item333</li> |
| </ul> |
| other text jampadampa |
| </div> |
| <div class="trail-box-bottom"> |
| <img src="/images_www/v6/trails/trails-box-br.png" width="7" height="6" class="right"> |
| <img src="/images_www/v6/trails/trails-box-bl.png" width="7" height="6" class="left"> |
| </div> |
| </div> |
| |
| <a name="bgs"><h2>Backgrounds, align, valign, stamp</h2></a> |
| <p class="bold">In the 50% table</p> |
| <img src="/images_www/articles/60/netbeans-stamp.gif" class="stamp" alt="" title=""> |
| <table class="half-width b-all"> |
| <tr> |
| <td class="bg-bege valign-top">bg-bege, valign-top<br><br><br></td> |
| <td class="bg-face valign-middle align-center">bg-face<br>valign-middle, align-center</td> |
| <td class="bg-sky valign-bottom align-right">bg-sky, valign-bottom, align-right</td> |
| </tr> |
| </table> |
| |
| <a name="lists"><h2>Lists</h2></a> |
| <ul class="bg-sky"> |
| <li>Lorem ipsum</li> |
| <li>Lorem Lorem<ul><li>Lorem</li><li>Lorem</li><li>Lorem</li></ul></li> |
| </ul> |
| <ol class="b-left bold"> |
| <li>Lorem ipsum</li> |
| <li>Lorem ipsum</li> |
| </ol> |
| |
| <a name="table"><h2>Table</h2></a> |
| <p class="bold">100% width table, with 2 cels, each 50%, full borders</p> |
| <table class="full-width colapse"> |
| <tr> |
| <td colspan="2" class="b-all bold align-center">Lorem Impsum</td> |
| </tr> |
| <tr> |
| <td class="half-width b-all bg-sky"> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien |
| ac lectus facilisis pulvinar. |
| </td> |
| <td class="half-width b-all bg-face"> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien |
| ac lectus facilisis pulvinar. |
| </td> |
| </tr> |
| <tr> |
| <td colspan="2" class="b-all align-center bg-bege"> |
| center center center |
| </td> |
| </tr> |
| </table> |
| |
| <table> |
| <tbody> |
| <tr> |
| <td class="tblheader">Platform </td> |
| <td class="tblheader">Installing As... </td> |
| <td class="tblheader">SOA Installation </td> |
| <td class="tblheader">Tools Bundle Installation </td> |
| </tr> |
| <tr> |
| <td class="tbltd0">Solaris OS <br> |
| Linux </td> |
| <td class="tbltd0">root </td> |
| <td class="tbltd0">/opt/SUNWappserver </td> |
| <td class="tbltd0">/opt/SDK </td> |
| </tr> |
| <tr> |
| <td class="tbltd1">Solaris OS <br> |
| Linux </td> |
| <td class="tbltd1">user </td> |
| <td class="tbltd1">~/SUNWappserver </td> |
| <td class="tbltd1">~/SDK </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <a name="borders"><h2>Borders of elements</h2></a> |
| <p class="b-right bg-sky align-right innerpadding">border right<br>align right<br>bg-sky<br>innerpadding</p> |
| <br> |
| <p class="b-top bold orange">border top, bold orange text</p> |
| <p class="b-left innerpadding">border left<br>border left<br>innerpadding</p> |
| <p class="b-bottom bg-bege">border bottom, bg-bege</p> |
| <br> |
| <table> |
| <tr> |
| <td> |
| <img class="box" src="/images_www/dev-services.jpg"> |
| </td> |
| <td>Image with gray hairline</td> |
| </tr> |
| </table> |
| |
| <!-- https://netbeans.org/files/documents/4/681/tutorial-template.html --> |
| |
| </body> |
| </html> |
| |
