Skip to main content
Jump to: navigation, search

Difference between revisions of "Solstice"

 
(10 intermediate revisions by one other user not shown)
Line 1: Line 1:
== Solstice (a skin for Phoenix) ==
+
The documentation for the new solstice theme is available at https://eclipse.org/eclipse.org-common/themes/solstice/docs/#body_solstice
 
+
=== About: ===
+
The Eclipse Foundation is currently working on a new look and feel for www.eclipse.org. We have setup a test instance on http://staging.eclipse.org. We are planing to go live on June 11th, 2014.
+
 
+
=== Introduction: ===
+
[[File:Solstice home.jpg]]
+
 
+
This is the new Solstice theme for eclipse.org.  We designed it to be cleaner and lighter. We took a less is more approach. We’ve decided to use Bootstrap for
+
 
+
Solstice, you can find more information about this here:
+
http://getbootstrap.com/. In addition, we now include jQuery v2.1.0 on every page. You shouldn't include your own instance of jQuery with Solstice.
+
 
+
We will support UI components from Nova. We’re hoping that the transition to Solstice won’t be too hard for any of the project sites.
+
 
+
=== Using Solstice ===
+
 
+
==== The Basics ====
+
[[Image: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.
+
 
+
If you do not wish your page to have a left nav, or the Faux Purple column NULL out the $nav paramater in 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
+
<pre>
+
<div class='homeitem'>
+
<h3>subsection title</h3>
+
''<p> <ul> <ol> <span> etc''
+
...
+
</div>
+
</pre>
+
 
+
*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
+
 
+
<pre>
+
<div class='sideitem'>
+
<h6>subsection title</h6>
+
<div class='modal'> **1
+
''<p> <ul> <ol> <span> etc''
+
</div>
+
</div>
+
</pre>
+
**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.
+
 
+
[[Image: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.
+
 
+
=== Starting from the template (/default) ===
+
When starting from a copy of the template at [http://www.eclipse.org/default /default] the following adjustments are required:
+
 
+
* create your own banner (backgroundMain.png) as explained in the [http://www.eclipse.org/default/images/backgroundMain.png default banner].
+
* do the obvious replacements of "Your name", "My project home" etc. in _projectCommon.php, index.php, _index.html
+
* in index.php replace reference to /default/style.css with your copy of style.css, '''otherwise the default banner will still be used'''
+
* use midcolumn_example.html as a template for secondary pages
+

Latest revision as of 16:17, 10 July 2014

The documentation for the new solstice theme is available at https://eclipse.org/eclipse.org-common/themes/solstice/docs/#body_solstice

Back to the top