How to use the Eclipse Solstice theme

The Solstice theme was built on top of Bootstrap which is a sleek, intuitive, and powerful front-end framework for faster and easier web development.

We support most UI components from Nova. We’re hoping that the transition won’t be too hard for most pages.

What's included with Solstice?

Getting Started

Using Solstice

On a page using the eclipse.org-common $App Class:

<?php $App->generatePage('solstice', $Menu, NULL, $pageAuthor, $pageKeywords, $pageTitle, $html); // To make sure your page is always using the default theme: $App->generatePage(NULL, $Menu, NULL , $pageAuthor, $pageKeywords, $pageTitle, $html);

Starterkit

The starterkit includes all the files required to create a page with Solstice. The source code is available here.

Download Starterkit


Theme variables

It's now possible to alter the Solstice theme using $App->setThemeVariables($variables);.

<?php // Initialize $variables. $variables = array(); // Add classes to <body>. (String) $variables['body_classes'] = ''; // Insert custom HTML in the breadcrumb region. (String) $variables['breadcrumbs_html'] = ""; // Hide the breadcrumbs. (Bool) $variables['hide_breadcrumbs'] = TRUE; // Insert HTML before the left nav. (String) $variables['leftnav_html'] = ''; // Update the main container class, this is usefull if you want to use the full width of the page. (String) // Eclipse.org homepage is a good example: https://www.eclipse.org/home/index.php $variables['main_container_classes'] = 'container-full'; // Insert HTML after opening the main content container, before the left sidebar. (String) $variables['main_container_html'] = ''; // Set Solstice theme variables (Array) $App->setThemeVariables($variables);

Barebones static HTML template

A barebone HTML header & footer to adapt the look to subsites, such as Bugzilla, Forums, Mailing lists & events.eclipse.org.

Default template

Thin template (Bug #437384)

Barebone template


CSS

classes.less and fonts.less include usefull CSS classes for colors, font-weight & font size and offsets to remove the margin after the breadcrumbs or before the footer.

Typography examples with solstice.

Custom Components

  1. Block-box
  2. Breadcrumbs
  3. Call For Action Button link
  4. Discover Search
  5. Marketplace Drag and Drop install
  6. Header Nav
  7. Header Row
  8. Highlight
  9. Landing well
  10. News list
  11. Step by Step
  12. Timeline
  13. Toolbar Menu

Block-box

Content block mainly used in the right sidebar area. The .block-box-classic class is optional.

Block Title

Content goes here...

Code

<div class="block-box block-box-classic"> <h3>Block Title</h3> <div class="content"> <p>Content goes here...</p> </div> </div>

Breadcrumbs

The $App Class should generate a breadcrumb for you.

Code

<section class="defaut-breadcrumbs hidden-print"> <div class="container"> <ol class="breadcrumb"> <li><a href="https://www.eclipse.org/">Home</a></li> <li><a href="https://www.eclipse.org/projects/">Projects</a></li> <li><a href="https://www.eclipse.org/eclipse.org-common">eclipse.org-common</a></li> <li class="active">Solstice documentation</li> </ol> </div> </section>

Call For Action Button link

Update or replace the CFA buttonin the header of solstice.

Download

PHP Code

<?php $variables = array(); // CFA Link - Big orange button in header $variables['btn_cfa'] = array( 'hide' => FALSE, // Optional - Hide the CFA button. 'html' => '', // Optional - Replace CFA html and insert custom HTML. 'class' => 'btn btn-huge btn-warning', // Optional - Replace class on CFA link. 'href' => '//www.eclipse.org/downloads/', // Optional - Replace href on CFA link. 'text' => '<i class="fa fa-download"></i> Download' // Optional - Replace text of CFA link. ); // Set Solstice theme variables (Array) $App->setThemeVariables($variables);

HTML Output

<a id="btn-call-for-action" href="//www.eclipse.org/downloads/" class="btn btn-huge btn-warning"><i class="fa fa-download"></i> Download</a>

The discover search component is used on the Eclipse Projects landing page.

Code

<div class="discover-search"> <div class="container"> <div class="col-xs-24"> <div class="row"> <h2>Discover</h2> <p class="orange"><strong>Find an Eclipse open source project.</strong></p> <form action="https://projects.eclipse.org/projects/all" role="form" class="col-md-8 form-inline form-search-projects input-group custom-search-form" id="form-discover-search"> <input type="text" placeholder="Search" name="keys" size="25" class="form-control" id="discover-search-box"> <span class="input-group-btn"> <button type="submit" class="btn btn-default"> <i class="fa fa-search"></i> </button> </span> </form> <br> <p><a href="//projects.eclipse.org/list-of-projects" class="btn btn-info uppercase fw-700">List of projects</a></p> </div> </div> </div> </div>

Marketplace Drag & Drop install

Please take a look at the External Install Button tab over on Eclipse Marketplace for the mpc_install id.

Code

<div class="drag_installbutton"> <a href="http://marketplace.eclipse.org/marketplace-client-intro?mpc_install=252" class="drag"> <img src="/eclipse.org-common/themes/solstice/public/images/components/drag-drop/installbutton.png"> <div class="tooltip"><h3>Drag to Install!</h3>Drag to your running Eclipse workspace.</div> </a> </div>

Header Nav

Custom header navigation for project pages.

For more information:
Bug 436108 - Update navigation buttons for Documentation, Download, Getting Involved and Support for project pages.

PHP Code

<?php // Initialize $variables. $variables = array(); $links = array(); $links[] = array( 'icon' => 'fa-download', // Required 'url' => '/downloads/', // Required 'title' => 'Download', // Required //'target' => '_blank', // Optional 'text' => 'Eclipse Distribution, Update Site, Dropins' // Optional ); $links[] = array( 'icon' => 'fa-users', // Required 'url' => '/users/', // Required 'title' => 'Geting Involved', // Required //'target' => '_blank', // Optional 'text' => 'CVS, Workspace Setup, Wiki, Committers' // Optional ); $links[] = array( 'icon' => 'fa-book', // Required 'url' => 'http://help.eclipse.org/luna/index.jsp', // Required 'title' => 'Documentation', // Required //'target' => '_blank', // Optional 'text' => 'Tutorials, Examples, Videos, Online Reference' // Optional ); $links[] = array( 'icon' => 'fa-support', // Required 'url' => '/forums/', // Required 'title' => 'Support', // Required //'target' => '_blank', // Optional 'text' => 'Bug Tracker, Newsgroup Professional Support' // Optional ); $variables['header_nav'] = array( 'links' => $links, // Required 'logo' => array( // Required 'src' => '/eclipse.org-common/themes/solstice/public/images/logo/eclipse-800x188.png', // Required 'alt' => 'The Eclipse Foundation', // Optional 'url' => 'http://www.eclipse.org', // Optional //'target' => '_blank' // Optional ), ); // Set Solstice theme variables (Array) $App->setThemeVariables($variables);

HTML Output

<div class="header_nav"><div class="col-xs-24 col-md-10 vcenter"><a href="http://www.eclipse.org" title="The Eclipse Foundation" target="_self"><img src="/eclipse.org-common/themes/solstice/public/images/logo/eclipse-800x188.png" alt="The Eclipse Foundation" class="img-responsive header_nav_logo"/></a></div><div class="col-xs-24 col-md-offset-2 col-md-12 vcenter"><ul class="clearfix"><li class="col-xs-24 col-md-12"><a class="row" href="/downloads/" title="Download: Eclipse Distribution, Update Site, Dropins" target="_self"><i class="col-xs-3 col-md-6 fa fa-download"></i><span class="col-xs-21 c col-md-17">Download<p>Eclipse Distribution, Update Site, Dropins</p></span></a></li><li class="col-xs-24 col-md-12"><a class="row" href="/users/" title="Geting Involved: CVS, Workspace Setup, Wiki, Committers" target="_self"><i class="col-xs-3 col-md-6 fa fa-users"></i><span class="col-xs-21 c col-md-17">Geting Involved<p>CVS, Workspace Setup, Wiki, Committers</p></span></a></li><li class="col-xs-24 col-md-12"><a class="row" href="http://help.eclipse.org/luna/index.jsp" title="Documentation: Tutorials, Examples, Videos, Online Reference" target="_self"><i class="col-xs-3 col-md-6 fa fa-book"></i><span class="col-xs-21 c col-md-17">Documentation<p>Tutorials, Examples, Videos, Online Reference</p></span></a></li><li class="col-xs-24 col-md-12"><a class="row" href="/forums/" title="Support: Bug Tracker, Newsgroup Professional Support" target="_self"><i class="col-xs-3 col-md-6 fa fa-support"></i><span class="col-xs-21 c col-md-17">Support<p>Bug Tracker, Newsgroup Professional Support</p></span></a></li></ul></div></div>

Header row

@TODO

Eclipse Luna (4.4) Release for

Code

<div class="row header-row background-charcoal"> <div class="col-md-16 header-row float-right right"> <span id="descriptionText">Eclipse Luna (4.4) Release</span> for <select id="osSelect"> <option value="win32">Windows</option> <option value="linux" selected="selected">Linux</option> <option value="macosx">Mac OS X (Cocoa)</option> </select> </div> </div>

Highlight

Collaborative Working Groups

Eclipse Working Groups allow for organizations to collaborate in the development of new innovations and solutions. The Eclipse Foundation is a great place to host new collaborations that follow best practices and are based on open source principles.

Check out how you can start your own working group.

Code

<section class="highlight background-grey"> <div class="container"> <div> <div class="triangle triangle-black visible-lg"></div> <div class="col-md-15 highlight-content"> <h1>Collaborative Working Groups</h1> <p>Eclipse <a href="/org/workinggroups/">Working Groups</a> allow for organizations to collaborate in the development of new innovations and solutions. The Eclipse Foundation is a great place to host new collaborations that follow best practices and are based on open source principles.</p> <p>Check out how you can start your own <a href="/org/workinggroups/">working group</a>. </p> <ul class="list-inline"> <li> <a title="LocationTech will be the leading community for individuals and organizations to collaborate on commercially-friendly open source software that is location aware." href="//www.locationtech.org"> <img height="79" alt="LocationTech will be the leading community for individuals and organizations to collaborate on commercially-friendly open source software that is location aware." src="/home/images/solstice/locationtech-169x125.jpg"> </a> </li> <li> <a title="PolarSys - Open Source tools for the development of embedded systems." href="//polarsys.org/"> <img height="79" alt="PolarSys - Open Source tools for the development of embedded systems." src="/home/images/solstice/polarsys-172x125.jpg"> </a> </li> <li> <a title="LTS - Enable organisations to collaborate when providing support and maintenance for Eclipse technologies." href="//lts.eclipse.org/"> <img height="79" alt="LTS - Enable organisations to collaborate when providing support and maintenance for Eclipse technologies." src="/home/images/solstice/lts-116x125.jpg"> </a> </li> <li> <a title="iot.eclipse.org is where you can learn about the technologies developed at Eclipse to make Internet of Things (IoT) development simpler." href="http://iot.eclipse.org"> <img height="79" alt="iot.eclipse.org is where you can learn about the technologies developed at Eclipse to make Machine-to-Machine (M2M) development simpler." src="/home/images/solstice/ito-150x125.jpg"> </a> </li> <li> <a title="Auto IWG - Open Source Initiative for Automotive Software Development Tools." href="//wiki.eclipse.org/Auto_IWG"> <img height="79" alt="Auto IWG - Open Source Initiative for Automotive Software Development Tools." src="/home/images/solstice/automotive-155x125.jpg"> </a> </li> </ul> </div> <div class="col-md-9 highlight-img hidden-xs hidden-sm"> <a href="/projects/"> <img alt="Eclipse Working groups" class="img-responsive" src="/home/images/solstice/badge-working-groups.jpg"> </a> </div> </div> </div> </section>

Landing-well

Eclipse Is...

An amazing open source community of Tools, Projects and
Collaborative Working Groups. Discover what we have to offer and join us.


Code

<section class="landing-well"> <div class="container"> <div class="row"> <div class="col-lg-13 landing-well-content"> <h1><a href="/org/">Eclipse Is...</a></h1> <p>An amazing open source community of <a href="/ide">Tools</a>, <a href="/projects">Projects</a> and <br><a href="/org/workinggroups">Collaborative Working Groups</a>. Discover what we have to offer and join us.</p> <br> <div class="btn-group"> <a class="btn btn-transparent" href="#sec_ide"> DISCOVER <span class="caret"></span> </a> </div> </div> <div class="col-lg-10 col-lg-offset-1 landing-well-action"> <ul class="list-inline list-glyphicon"> <li> <a href="/ide/"> <div class="col-md-8 circle circle-dark"> <i class="fa fa-desktop"></i> <h3 style="margin:32px 0 0 5px;">IDE &amp; Tools</h3> </div> </a> </li> <li> <a href="/projects/"> <div class="col-md-8 circle circle-dark"> <i class="fa fa-puzzle-piece" style="margin-left:10px;"></i> <h3>Community of Projects</h3> </div> </a> </li> <li> <a href="/org/workinggroups/"> <div class="col-md-8 circle circle-dark"> <i class="fa fa-users"></i> <h3>Collaborative Working Groups</h3> </div> </a> </li> </ul> </div> </div> </div> </section>

News list

Announcements

2014/07/08
The early-bird submission deadline is on July 31. Don't wait, propose a talk now!

Code

<div class="news-list"> <h2><a href="/community/news/eclipsenews.php">Announcements</a></h2> <div class="news_item_header"><a title="Subscribe to our RSS-feed" class="link-rss-feed orange" href="http://feeds.feedburner.com/eclipse/fnews"><i class="fa fa-rss"></i> <span>Subscribe to our RSS-feed</span></a></div> <div class="news_item"> <div class="news_item_date">2014/07/08</div> <div class="news_item_title"> <h3><a href="https://www.eclipsecon.org/europe2014/cfp">EclipseCon Europe - Call for Papers</a></h3> </div> <div class="news_item_description">The early-bird submission deadline is on July 31. Don't wait, propose a talk now!</div> </div> <div class="news_view_all">&gt; <a href="/community/news/eclipsenews.php">View all</a><a title="Subscribe to our RSS-feed" class="link-rss-feed orange" href="http://feeds.feedburner.com/eclipse/fnews"><i class="fa fa-rss"></i> <span>Subscribe to our RSS-feed</span></a></div> </div>

Step by Step

Participate & Contribute

Get involved in Eclipse projects to help contribute to their success.
We welcome users and adopters as part of the community.

Code

<div class="step-by-step"> <div class="container"> <div class="row intro"> <div class="col-xs-24"> <h2>Participate &amp; Contribute</h2> <p>Get involved in Eclipse projects to help contribute to their success.<br> We welcome users and adopters as part of the community. </p> </div> </div> <div class="row step-by-step-timeline"> <div class="col-sm-6 step"> <a href="/contribute"><img href="How to contribute" src="/projects/images/projects_contribute.jpg"></a> <p><a class="btn btn-info uppercase fw-700" href="/contribute">How to contribute</a></p> </div> <div class="col-sm-6 step"> <a href="//wiki.eclipse.org/Development_Resources/HOWTO/Starting_A_New_Project"><img href="Start a new project" src="/projects/images/projects_start.jpg"></a> <p><a class="btn btn-info uppercase fw-700" href="//wiki.eclipse.org/Development_Resources/HOWTO/Starting_A_New_Project">Start a new project</a></p> </div> <div class="col-sm-6 step"> <a href="//wiki.eclipse.org/Development_Resources/HOWTO/Starting_A_New_Project#After_Creation"><img href="Running a project" src="/projects/images/projects_running.jpg"></a> <p><a class="btn btn-info uppercase fw-700" href="//wiki.eclipse.org/Development_Resources/HOWTO/Starting_A_New_Project#After_Creation">Running a project</a></p> </div> <div class="col-sm-6 step"> <a href="/projects/project_activity.php"><img href="Project Activity" src="/projects/images/projects_news.jpg"></a> <p><a class="btn btn-info uppercase fw-700" href="/projects/project_activity.php">Project Activity</a></p> </div> </div> </div> </div>

Timeline

1

Getting Started

You can download the standard version of Eclipse that contains the basic bits for any Java developer to start coding in Java.

Download


Eclipse also has pre-defined packages based on the type of development you want to do with Eclipse.

Download Packages

3

Documentation

These are a few of the popular getting-started documents for someone new to Eclipse:

4

Getting Help

  • There are many online sources of help in the Eclipse community. First thing to do is create an account so you can use them.
  • Our forums are great places to ask questions, especially the newcomer forum.
  • Open bugs and feature requests at bugzilla.
  • IRC channels are active for some projects.
  • Project mailing list are good source of what is going on in the project.

Code

<div class="timeline"> <div class="row"> <div class="col-md-6 one gs-item"> <div class="circle">1</div> <h1 class="fw-600">Getting Started</h1> <p>You can download the standard version of Eclipse that contains the basic bits for any Java developer to start coding in Java. </p> <p><a class="btn btn-warning" href="https://www.eclipse.org/downloads/packages/eclipse-standard-44/lunar">Download</a></p> <!-- /downloads/packages/eclipse-standard-432/keplersr2 --> <hr> <p> Eclipse also has pre-defined packages based on the type of development you want to do with Eclipse.</p> <p><a class="btn btn-warning" href="/downloads/">Download Packages </a></p> </div> <div class="col-md-6 two gs-item"> <div class="circle">2</div> <h1>Extend Eclipse</h1> <p>Eclipse Marketplace is a great source of plug-ins and product that you can add to Eclipse. Browse the online catalog or use the <a href="//marketplace.eclipse.org">Eclipse Marketplace</a> Client from within Eclipse. Look under the Eclipse Help Menu. </p> <p>Popular Plugins: </p> <ul> <li> <a href="http://marketplace.eclipse.org/content/subversive-svn-team-provider">Subversive - SVN Team Provider</a><br> <div class="drag_installbutton"> <a href="http://marketplace.eclipse.org/marketplace-client-intro?mpc_install=1139" class="drag"> <img src="/eclipse.org-common/themes/solstice/public/images/components/drag-drop/installbutton.png"> <div class="tooltip"> <h3>Drag to Install!</h3> Drag to your running Eclipse workspace. </div> </a> </div> </li> <li> <a href="http://marketplace.eclipse.org/content/eclipse-color-theme">Eclipse Color Theme</a><br> <div class="drag_installbutton"> <a href="http://marketplace.eclipse.org/marketplace-client-intro?mpc_install=27025" class="drag"> <img src="/eclipse.org-common/themes/solstice/public/images/components/drag-drop/installbutton.png"> <div class="tooltip"> <h3>Drag to Install!</h3> Drag to your running Eclipse workspace. </div> </a> </div> </li> <li> <a href="http://marketplace.eclipse.org/content/maven-integration-eclipse-juno-and-newer">Maven Integration for Eclipse</a><br> <div class="drag_installbutton"> <a href="http://marketplace.eclipse.org/marketplace-client-intro?mpc_install=252" class="drag"> <img src="/eclipse.org-common/themes/solstice/public/images/components/drag-drop/installbutton.png"> <div class="tooltip"> <h3>Drag to Install!</h3> Drag to your running Eclipse workspace. </div> </a> </div> </li> <li> <a href="http://marketplace.eclipse.org/content/pydev-python-ide-eclipse">PyDev</a><br> <div class="drag_installbutton"> <a href="http://marketplace.eclipse.org/marketplace-client-intro?mpc_install=114" class="drag"> <img src="/eclipse.org-common/themes/solstice/public/images/components/drag-drop/installbutton.png"> <div class="tooltip"> <h3>Drag to Install!</h3> Drag to your running Eclipse workspace. </div> </a> </div> </li> </ul> <p><a class="btn btn-info" href="//marketplace.eclipse.org">Marketplace</a></p> </div> <div class="col-md-6 three gs-item"> <div class="circle">3</div> <h1>Documentation</h1> <p>These are a few of the popular getting-started documents for someone new to Eclipse: </p> <ul> <li>Getting Started with the <a href="http://help.eclipse.org/kepler/nav/0">Eclipse Workbench</a></li> <li>Getting Started with <a href="http://help.eclipse.org/kepler/nav/1">Java development</a></li> <li>All online <a href="http://help.eclipse.org/kepler/index.jsp">Documentation</a></li> </ul> </div> <div class="col-md-6 four gs-item"> <div class="circle">4</div> <h1>Getting Help</h1> <ul> <li>There are many online sources of help in the Eclipse community. First thing to do is <a href="https://dev.eclipse.org/site_login/createaccount.php">create an account</a> so you can use them.</li> <li>Our <a href="http://eclipse.org/forums/">forums</a> are great places to ask questions, especially the <a href="http://www.eclipse.org/forums/index.php/f/89/">newcomer forum</a>.</li> <li>Open bugs and feature requests at <a href="https://bugs.eclipse.org/bugs/">bugzilla</a>.</li> <li><a href="https://wiki.eclipse.org/IRC">IRC channels</a> are active for some projects.</li> <li>Project <a href="https://dev.eclipse.org/mailman/listinfo">mailing list</a> are good source of what is going on in the project.</li> </ul> </div> </div> </div>

Toolbar Menu

Code

<div class="toolbar-menu"> <div class="container"> <div class="row"> <div class="col-md-24"> <ol class="breadcrumb"> <li><i class="fa fa-angle-double-right orange fa-fw"></i> <a class="active" href="/downloads/index.php">Packages</a></li> <li><a href="/downloads/java8/">Java&trade; 8 Support</a></li> </ol> </div> </div> </div> </div>

Bootstrap example

Carousel

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

Code

<div class="block-box block-box-classic"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img width="100%" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+" alt="Image 1"> <div class="carousel-caption"> </div> </div> <div class="item"> <img width="100%" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==" alt="Image 2"> <div class="carousel-caption"> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>