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

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>

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:

Back to the top