Skip to main content

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

General Data Protection Regulation (GDPR)

The General Data Protection Regulation (GDPR), a new regulation in EU law on data protection and privacy for all individuals within the European Union becomes enforceable on 25 May 2018.

Web Analytics Tools

We will not allow committers or project leads to collect user data or track user activity on Eclipse Foundation-owned domains, since that data may be shared with the third-party companies who employ them -- an action for which our users have not given explicit consent.

Using project-specific Web Analytics Tools will be prohibited as of May 24. The Eclipse Foundation has its own Google Analytics code, which is included with the unmodified Quicksilver theme.

Google Analytics

Projects who are not using our unmodified Quicksilver theme can still include the Eclipse Foundation Google Analytics code by inserting the following code snippet in the <head> of each page:


          <!-- Google Tag Manager -->
          <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','GTM-5WLCZXC');</script>
          <!-- End Google Tag Manager -->  

Cookie Consent Banner

If you are not using the Eclipse Foundation look and feel, you can still load our cookie consent banner, which include a link to the Eclipse Foundation Private Policy, by adding the following code snippet in the <head> of each page:


          <link rel="stylesheet" type="text/css" href="//www.eclipse.org/eclipse.org-common/themes/solstice/public/stylesheets/vendor/cookieconsent/cookieconsent.min.css" />
          <script src="//www.eclipse.org/eclipse.org-common/themes/solstice/public/javascript/vendor/cookieconsent/default.min.js"></script>  

Validating Consent

If you include widgets from a 3rd party website, you might need to validate consent before you can include it:


          <?php
          if ($Theme->hasCookieConsent()) {
          //Insert widgets from a 3rd party
          }
          

Starterkit

The starterkit includes all the files required to create a standard page and also a Press Release page with Solstice. The source code is available here.

Download Starterkit


Components

  1. Block-box
  2. Breadcrumbs
  3. Bordered box
  4. Call For Action Button link
  5. Marketplace Drag and Drop install
  6. Content navigation tabs
  7. Section Highlights
  8. Header Nav
  9. Header Row
  10. Block Highlight
  11. Landing well
  12. News list
  13. Step by Step
  14. Timeline
  15. 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...


Bordered box

Sample using light theme

Sample heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample using standard theme

Distinguishing text, or header

Sample Callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Some more text

Code sample:
<div class="margin-top-30 margin-bottom-30">
  <h4>Sample using light theme</h4>
  <div class="bordered-box bordered-box-light">
    <div class="box-header background-secondary" data-mh="bb-head">
     <h2>Sample heading</h2>
    </div>
    <div class="box-body">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

<div class="margin-top-30 margin-bottom-30">
  <h4>Sample using standard theme</h4>
  <div class="bordered-box">
    <!-- Clearfix needed here to adjust for cols -->
    <div class="box-header background-secondary clearfix">
      <div class="col-xs-24 col-sm-18" data-mh="bb-head-2"><h2>Distinguishing text, or header</h2></div>
      <div class="col-xs-24 col-sm-6 background-primary vertical-align" data-mh="bb-head-2">Sample Callout</div>
    </div>
    <div class="box-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Some more text</p>
    </div>
  </div>
</div>
        

Breadcrumbs

The $App Class should generate a breadcrumb for you.


Call For Action Button link

Update or replace the CFA buttonin the header of solstice.

HTML Output

<div id="btn-call-for-action"><a href="https://www.eclipse.org/donate/" class="btn btn-huge btn-info"><i class="fa fa-star"></i> Donate</a></div>

Marketplace Drag & Drop install

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

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/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-14 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>

Content navigation tabs

One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code sample:


<div class="row content-nav-tab-toggle">
 <div class="visible-xs">
   <div class="vertical-align">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-member-levels">
       <p class="nav-label"><strong>Explore Members</strong></p>
       <div class="hamburger-wrapper">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </div>
     </button>
   </div>
 </div>
</div>

<div class="row">
  <div class="navbar-collapse collapse" id="navbar-member-levels">
    <ul class="nav nav-tabs solstice-tabs content-nav-tab" role="tablist">
      <li role="presentation" class="active">
        <a class="background-grey" href="#tab-one" data-toggle="tab" aria-controls="tab-one" role="tab">
          Tab one
        </a>
      </li>
      <li role="presentation" class="">
        <a class="background-grey" href="#tab-two" data-toggle="tab" aria-controls="tab-two" role="tab">
          Tab two
        </a>
      </li>
      <li role="presentation" class="">
        <a class="background-grey" href="#tab-three" data-toggle="tab" aria-controls="tab-three" role="tab">
          Tab three
        </a>
      </li>
      <li role="presentation">
        <a class="background-grey alt-tab-toggle" href="#showalltabs" id="showalltabs" data-content-target="#tabs-content">
        All Tabs
        </a>
      </li>
    </ul>
  </div>
</div>
<div class="content-nav-tab-body tab-content" id="tabs-content">
  <div role="tabpanel" class="tab-pane tab-pane active" id="tab-one">
    <h2 class="h3 margin-top-0">One</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div role="tabpanel" class="tab-pane tab-pane" id="tab-two">
    <h2 class="h3 margin-top-0">Two</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div role="tabpanel" class="tab-pane tab-pane" id="tab-three">
    <h2 class="h3 margin-top-0">Three</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
        

Section Highlights

Standard highlights

Code sample:

<div class="container margin-bottom-20">
 <div class="row section-highlights">
   <div class="featured-highlights-item match-height-item-by-row col-sm-8">
     <i data-feather="check" stroke-width="1"></i>
     <h3>Governance</h3>
     <p>Eclipse Working Groups allow for individuals and organizations to collaborate under a vendor neutral governance model</p>
     <p>
       <a href="about.php#wg-neutral">Learn more</a>
     </p>
   </div>
   <div class="featured-highlights-item match-height-item-by-row col-sm-8">
     <i data-feather="briefcase" stroke-width="1">©</i>
     <h3>Intellectual Property Management</h3>
     <p>The Eclipse Foundation implements the best IP Management required for open source development</p>
     <p>
       <a href="about.php#wg-ip">Learn more</a>
     </p>
   </div>
   <div class="featured-highlights-item match-height-item-by-row col-sm-8">
     <i data-feather="repeat" stroke-width="1"></i>
     <h3>Development Process</h3>
     <p>Eclipse Working Groups  use the proven Eclipse Development process that facilitates open development across distributed teams</p>
     <p>
       <a href="about.php#wg-process">Learn more</a>
     </p>
   </div>
   <div class="featured-highlights-item match-height-item-by-row col-sm-8">
     <i data-feather="cloud" stroke-width="1"></i>
     <h3>Infrastructure</h3>
     <p>The Eclipse Foundation hosts an open source development forge that is essential to any open collaboration</p>
     <p>
       <a href="about.php#wg-infra">Learn more</a>
     </p>
   </div>
   <div class="featured-highlights-item match-height-item-by-row col-sm-8">
     <i data-feather="user" stroke-width="1"></i>
     <h3>Ecosystem Development</h3>
     <p>Eclipse Foundation staff are available to help build a community for
       the collaboration through events, online webinars, and other community
       programs</p>
     <p>
       <a href="about.php#wg-eco">Learn more</a>
     </p>
   </div>
   <div class="featured-highlights-item match-height-item-by-row col-sm-8">
     <i data-feather="book" stroke-width="1"></i>
     <h3>Research@Eclipse</h3>
     <p>The Eclipse Foundation participates in many government funded industry research projects</p>
     <p>
       <a href="/org/research">Learn more</a>
     </p>
   </div>
 </div>
</div>

         

Inverted highlights

Code sample:

 <div class="row section-highlights">
  <div class="col-xs-24 col-sm-12 col-md-8 margin-bottom-20 match-height-item-by-row featured-highlights-item">
    <div class="circle-icon margin-auto">
      <i class="fa fa-file-code-o"></i>
    </div>
    <h3 class="fw-700">Sit Amet</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col-xs-24 col-sm-12 col-md-8 margin-bottom-20 match-height-item-by-row featured-highlights-item">
    <div class="circle-icon margin-auto">
      <i class="fa fa-lock"></i>
    </div>
    <h3 class="fw-700">Consectetur</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col-xs-24 col-sm-12 col-md-8 margin-bottom-20 match-height-item-by-row featured-highlights-item">
    <div class="circle-icon margin-auto">
      <i class="fa fa-lightbulb-o "></i>
    </div>
    <h3 class="fw-700">Magna</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col-xs-24 col-sm-12 col-md-8 margin-bottom-20 match-height-item-by-row featured-highlights-item">
    <div class="circle-icon margin-auto">
      <i class="fa fa-balance-scale"></i>
    </div>
    <h3 class="fw-700">Tempor</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col-xs-24 col-sm-12 col-md-8 margin-bottom-20 match-height-item-by-row featured-highlights-item">
    <div class="circle-icon margin-auto">
      <i class="fa fa-handshake-o"></i>
    </div>
    <h3 class="fw-700">Lorem</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col-xs-24 col-sm-12 col-md-8 margin-bottom-20 match-height-item-by-row featured-highlights-item">
    <div class="circle-icon margin-auto">
      <i class="fa fa-comments"></i>
    </div>
    <h3 class="fw-700">Adipiscing</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

        

Header row

@TODO

Eclipse Luna (4.4) Release for

Highlight


Landing-well


News list


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.


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.

Toolbar Menu


Bootstrap example

Carousel

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

EclipseFdn Videos

What is the EclipseFdn Videos plugin?

By inserting an <a> tag containing a video link in your HTML page, the EclipseFdn Videos plugin will convert that tag into the iframe video if the user agreed to use cookies.

Note: This plugin only supports Youtube videos for now.

Usage

HTML

<a class="eclipsefdn-video" href="https://www.youtube.com/watch?v=cnSMhgKApOg"></a>
      <!--
      <a> will be replaced with:
      <div class="eclipsefdn-video embed-responsive embed-responsive-16by9" style="height:312.1875px;"><iframe src="https://www.youtube.com/embed/cnSMhgKApOg"></iframe></div>
      -->
      <script>
      // Use defaults
      eclipseFdnVideos.replace();
      // Customize
      eclipseFdnVideos.replace({
      selector: ".eclipsefdn-video",
      resolution: "16by9",
      cookie: {
      name: "eclipse_cookieconsent_status",
      value: "allow"
      }
      });
      </script>
      

Parameters

Name Type Description
selector (optional) String By default the class "eclipsefdn-video" is being used but you can specify your own selector.
resolution (optional) String By default the resolution of the video is 16by9 but you can also choose to use the 4by3 resolution. Note that only these two resolutons are accepted.
cookie (optional) Object By default we are using the cookie name "eclipse_cookieconsent_status" and value "allow" which enables the plugin to replace the link by the iframe video only if users have given consent to use cookies. But you can choose to use your own cookie name and values.

Example:

Owl Carousel

Rss Feeds

Back to the top