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?

- Bootstrap v3.3.7
- Font Awesome v4.7.0
- Feather v4.7.0
- jQuery v2.1.1
- Solstice Assets (Less files & images)
- Yamm3 (Yet another megamenu for Bootstrap 3)

## Getting Started

- Committer and Contributor Hangout Series -- Eclipse Website Refresh
- Read the documentation for Bootstrap & jQuery
- How to use Phoenix

## 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.

Donate

#### 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.

### Drag to Install!

Drag to your running Eclipse workspace.

#### 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

### Governance

Eclipse Working Groups allow for individuals and organizations to collaborate under a vendor neutral governance model

Learn more

©

### Intellectual Property Management

The Eclipse Foundation implements the best IP Management required for open source development

Learn more

### Development Process

Eclipse Working Groups use the proven Eclipse Development process that facilitates open development across distributed teams

Learn more

### Infrastructure

The Eclipse Foundation hosts an open source development forge that is essential to any open collaboration

Learn more

### Ecosystem Development

Eclipse Foundation staff are available to help build a community for the collaboration through events, online webinars, and other community programs

Learn more

### Research@Eclipse

The Eclipse Foundation participates in many government funded industry research projects

Learn more

##### 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

### Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

### Consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

### Magna

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

### Tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

### Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

### Adipiscing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

##### 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

# Page Title

### News list

## Announcements

- 2018/04/17

  #### Title

  This is some text.

- View all
- Subscribe to our RSS-feed

## Community News

- 2018/04/17

  #### Title

  This is some text.

- View all
- Subscribe to our RSS-feed

### 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.

How to contribute

Start a new project

Running a project

Project Activity

### 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

2

# Extend Eclipse

Eclipse Marketplace is a great source of plug-ins and product that you can add to Eclipse. Browse the online catalog or use the Eclipse Marketplace Client from within Eclipse. Look under the Eclipse Help Menu.

Popular Plugins:

- Subversive - SVN Team Provider

  ### Drag to Install!

  Drag to your running Eclipse workspace.
- Eclipse Color Theme

  ### Drag to Install!

  Drag to your running Eclipse workspace.
- Maven Integration for Eclipse

  ### Drag to Install!

  Drag to your running Eclipse workspace.
- PyDev

  ### Drag to Install!

  Drag to your running Eclipse workspace.

Marketplace

3

# Documentation

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

- Getting Started with the Eclipse Workbench
- Getting Started with Java development
- All online Documentation

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

Your Content
Your Content
Your Content
Your Content
Your Content
Your Content
Your Content

### Rss Feeds

Back to the top