netbeans.org CSS Guide and Templates

The purpose of this document is to give website contributors some simple guidelines on how to use the defined styles on netbeans.org.



Contents



Introduction

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.

To use the css file, simply include a line like the following between the <head> tags of your html :

  <link rel="stylesheet" href="netbeans3.css" type="text/css">

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 :

  <link rel="stylesheet" href="../../netbeans3.css" type="text/css">

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.

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.


Basic rules

  1. Do not use inline styles if possible;
  2. Check that your editor does not add inline styles automatically;
  3. Use the existing css classes from netbeans.css;
  4. Use multiple css classes on a single element for more complicated styles;


Advantages of Multiple Classes

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.

For details on usage see the examples at the bottom of this page.

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.

Docs Team CSS wishlist

The NetBeans Docs Team maintains their CSS wishlist Wiki, which is monitored by the webteam. Reasonable requests can be implemented and added to the netbeans.css file.


Elementary CSS classes defined in netbeans.css

Aligning text in the element

  • .align-right
  • .align-left
  • .align-center
  • .align-justify
  • .valign-top
  • .valign-center
  • .valign-bottom

Decorating text

  • .bold
  • .orange
  • .blue
  • .u

Float elements

  • .float-left
  • .float-right
  • .img-left
  • .img-right

Others

  • .feedback-box
  • .stamp, .notes, .tips, .alert
  • .half-width (equeals 50%)
  • .full-width (equeals 100%)
  • .box (equals all-sides gray hairline border)
  • .colapse (equals collapsed border)
  • .margin-around (equals 10px margin all around)
  • .innerpadding (equals 5px inner padding all around)

Borders of the element

  • .b-left
  • .b-right
  • .b-top
  • .b-bottom
  • .b-all
  • .b-none
  • .b-left-dashed
  • .b-right-dashed
  • .b-top-dashed
  • .b-bottom-dashed

Backgrounds

  • .bg-white
  • .bg-bege
  • .bg-sky
  • .bg-silver


Authoring Tools

  1. Using NetBeans is good start - it does nice tag completion, it checks for unclosed tags, and does formatingl
  2. Firefox add-on Firebug - 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.

Examples

Floating elements, feedback-box, notes, tips, Trails box

Image floats on left

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.

Image floats on right, justifyied text

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.

Notes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar.

Something usefull

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut sapien ac lectus facilisis pulvinar.

Note: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.

WarningLorem 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.

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.

Get Started

  • item1
  • item22
  • item333
other text jampadampa

Backgrounds, align, valign, stamp

In the 50% table

bg-bege, valign-top


bg-face
valign-middle, align-center
bg-sky, valign-bottom, align-right

Lists

  • Lorem ipsum
  • Lorem Lorem
    • Lorem
    • Lorem
    • Lorem
  1. Lorem ipsum
  2. Lorem ipsum

Table

100% width table, with 2 cels, each 50%, full borders

Lorem Impsum
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.
center center center
Platform Installing As... SOA Installation Tools Bundle Installation
Solaris OS
Linux
root /opt/SUNWappserver /opt/SDK
Solaris OS
Linux
user ~/SUNWappserver ~/SDK

Borders of elements

border right
align right
bg-sky
innerpadding


border top, bold orange text

border left
border left
innerpadding

border bottom, bg-bege


Image with gray hairline
Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo