|
|
| (4 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| − | == Solstice (a skin for Phoenix) DRAFT ==
| + | 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. | + | |
| − | | + | |
| − | | + | |
| − | [[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.
| + | |
| − | | + | |
| − | === Project Status ===
| + | |
| − | | + | |
| − | We want to make it as easy as possible for the project web sites to be migrated to Solstice. We’ve created an assessment report for the work needed for each project to migrate. I plan to write some documentation on how to use the new Solstice theme with all of it’s components in the next few weeks. The documentation will be available on an Eclipse wiki page. An update will be sent to the cross-project mailing list once this is ready.
| + | |
| − | | + | |
| − | https://docs.google.com/spreadsheet/ccc?key=0AsQLOtRdqwM9dHBEcGdUYVU3WmFTQXpySGNUNG9xX3c&usp=drive_web#gid=0 | + | |
| − | | + | |
| − | A link to to your project staging site is included in this document.
| + | |
| − | | + | |
| − | === Using Solstice ===
| + | |
| − | | + | |
| − | ==== The Basics ====
| + | |
| − | [[Image:SolsticeColumns.jpg]]
| + | |
| − | | + | |
| − | Solstice 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 Nova. 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, 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
| + | |
