Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Nova"

(Font Sizes)
Line 54: Line 54:
 
When migrating your projects from the Phoenix skin was designed to be easy.  There are only a few minor differences in the CSS markup show its look.
 
When migrating your projects from the Phoenix skin was designed to be easy.  There are only a few minor differences in the CSS markup show its look.
  
==== Font Sizes ====
 
Short Version: Use '''ems''' for font sizes at a 1/10 scale.  if you want a 14px font, use 1.4ems.
 
  
Long Version: I have implemented a reset.css in this new skin. Different browsers have different defaults, like paddings, margins, alignments, etc.  A reset.css file is used to bring every browser to the same playing field.  As part of that reset i've set the font-size to 62.5% font-size.  This makes 1em = 10 px.  This is also true for widths.
 
  
===== .homeitem3col & .homeitem =====
+
==== .homeitem3col & .homeitem ====
 
This preview shows how these 2 classes are displayed in the Phoenix Skin.
 
This preview shows how these 2 classes are displayed in the Phoenix Skin.
  

Revision as of 10:06, 22 January 2009

Nova (a skin for Phoenix)

About:

Nova is a new look for eclipse.org that came out of the feedback provided in [Bug 252006].

Introduction:

Nova.jpg

This is the new nova theme for eclipse.org. We designed it to be cleaner and lighter. Now with 90% less purple! The pages have a fixed width of 980px. We've expanded on the icons in the header so that you can swap to the different websites if you choose.

Using Nova

The Basics

NovaColumns.jpg

Nova uses a 3 column layout. #leftnav, #midcolumn, and #rightcolumn. Each of these are only used once per document.

#leftnav

leftnav is the same as it was in Phoenix. This nav is generated by using the nav class and passed into your $App->generatePage() function.

#midcolumn

midcolumn is where your content goes.

The .homeitem class is used to make content groupings inside of #midcolumn. Here's an example

<div class='homeitem'>
	<h3>subsection title</h3>
	''<p> <ul> <ol> <span> etc''
	...
</div>
  • midcolumn is 495 pixels wide.
#rightcolumn

rightcolumn is used to place navigation boxes, related links, graphics, etc.

The sideitem class is used to create content groupings inside of #rightcolumn. Here's an example

<div class='sideitem'>
	<h6>subsection title</h6>
	<div class='modal'> **1
		''<p> <ul> <ol> <span> etc''
	</div>
</div>
**1 If you choose to not have a div.modal then the gradient fade background will not appear.
  • rightcolumn is 240 pixels wide.


Migrating your projects page from Phoenix

When migrating your projects from the Phoenix skin was designed to be easy. There are only a few minor differences in the CSS markup show its look.


.homeitem3col & .homeitem

This preview shows how these 2 classes are displayed in the Phoenix Skin.

PhoenixHomeItem.jpg

In Nova there will be no .homeitem style class. All containers will appear like the old .homeitem3col, to be the full width of .midcolumn

If your pages use .homeitem3col or .homeitem they will display correctly, while it'd be nice if you changed them all to .homeitem but there is no need to do so.

Back to the top