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 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/css/vendor/cookieconsent/cookieconsent.min.css" />
                   <script src="//www.eclipse.org/eclipse.org-common/themes/solstice/public/js/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. Call For Action Button link
4. Marketplace Drag and Drop install
5. Header Nav
6. Header Row
7. Block Highlight
8. Landing well
9. News list
10. Step by Step
11. Timeline
12. 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...

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

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

Back to the top