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

Initiate a theme

These are the possible parameter values you can pass into $App->getThemeClass():

Example:

<?php

$Theme = $App->getThemeClass("quicksilver");

Using Solstice

On a page using the eclipse.org-common $Theme Class, use this to make sure your page is always using the default theme:

<?php
$Theme->generatePage();

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:


  getGoogleTagManager());?>
  

Projects who are using our unmodified Quicksilver theme can use the following code:


  <?php
  $Theme->getGoogleTagManager();
  

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:


  '). PHP_EOL; ?>
  ');?>
  

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


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);

Templates

Default layout

Thin layout (Bug #437384)

Barebone layout*

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

  // List of available layout to chose from
  $acceptable_layouts = array(
    'default',
    'default-header',
    'default-footer',
    'default-fluid',
    'barebone',
    'thin',
    'thin-header',
    'default-with-footer-min',
    'thin-with-footer-min',
  );
  $Theme->setLayout($acceptable_layouts[0]);

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













Bootstrap example