HOME / Community / Guidelines

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.

Introduction
Basic Rules
Advantages of Multiple Classes
Docs Team CSS wishlist
Elementary CSS classes
Authoring Tools
Examples : Floating elements, feedback-box, notes, tips
Examples : Backgrounds, align, valign, stamp
Examples : Lists
Examples : Table
Examples : Borders of elements

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="netbeans.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="../../netbeans.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

Do not use inline styles if possible;
Check that your editor does not add inline styles automatically;
Use the existing css classes from netbeans.css;
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

Using NetBeans is good start - it does nice tag completion, it checks for unclosed tags, and does formatingl
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

Give us feedback

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

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

Lorem ipsum
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

Releases & Planning

How Do I

File Bugs

Contribute Code

Contribute Documentation

Develop RCP Apps on the NetBeans Platform

NetBeans Platform APIs

Guidelines

Get Connected

Mailing Lists

NetBeans Wiki

Blogs

News

Events

Teach with NetBeans IDE

Translate NetBeans IDE