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

Initiate a theme

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

  • NULL (default theme)
  • solstice
  • eclipse_ide
  • quicksilver

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:


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

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:


  <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


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

Default layout

Thin layout (Bug #437384)

Barebone layout*

Eclipse_ide

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

Block-box

Content block mainly used in the right sidebar area. The .block-box-classic class is optional.

Block Title

Content goes here...

Code

<div class="sideitem">
  <h6>Block Title</h6>
  <div class="content">
    <p>Content goes here...</p>
  </div>
</div>

Breadcrumbs

The $App Class should generate a breadcrumb for you.

Code

<section class="default-breadcrumbs hidden-print breadcrumbs-default-margin" id="breadcrumb">
  <div class="container">
    <h3 class="sr-only">Breadcrumbs</h3>
    <div class="row">
      <div class="col-sm-24">
        <ol class="breadcrumb">
          <li><a href="https://www.eclipse.org/">Home</a></li>
          <li><a href="https://www.eclipse.org/projects/">Projects</a></li>
          <li><a href="https://www.eclipse.org/eclipse.org-common">eclipse.org-common</a></li>
          <li class="active">Solstice documentation</li>
        </ol>
      </div>
    </div>
  </div>
</section>

Call For Action Button link

Update or replace the CFA buttonin the header of solstice.

PHP Code

<?php

  $variables = array();

  // CFA Link - Big orange button in header
  $variables['btn_cfa'] = array(
    'hide' => FALSE, // Optional - Hide the CFA button.
    'html' => '', // Optional - Replace CFA html and insert custom HTML.
    'class' => 'btn btn-huge btn-warning', // Optional - Replace class on CFA link.
    'href' => '//www.eclipse.org/downloads/', // Optional - Replace href on CFA link.
    'text' => '<i class="fa fa-download"></i> Download' // Optional - Replace text of CFA link.
  );

  // Set Solstice theme variables (Array)
  $App->setThemeVariables($variables);

HTML Output

<div class="float-right hidden-xs" id="btn-call-for-action"><a href="https://www.eclipse.org/sponsor/" class="btn btn-huge btn-info"><i class="fa fa-star"></i> Sponsor</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.

Code

<div class="drag_installbutton">
  <a href="http://marketplace.eclipse.org/marketplace-client-intro?mpc_install=252" class="drag">
    <img src="/eclipse.org-common/themes/solstice/public/images/components/drag-drop/installbutton.png">
     <div class="tooltip"><h3>Drag to Install!</h3>Drag to your running Eclipse workspace.</div>
  </a>
</div>

Header Nav

Custom header navigation for project pages.

For more information:
Bug 436108 - Update navigation buttons for Documentation, Download, Getting Involved and Support for project pages.

PHP Code

<?php
  // Initialize $variables.
  $variables = array();
  $links = array();

  $links[] = array(
    'icon' => 'fa-download', // Required
    'url' => '/downloads/', // Required
    'title' => 'Download', // Required
    //'target' => '_blank', // Optional
    'text' => 'Eclipse Distribution, Update Site, Dropins' // Optional
  );

  $links[] = array(
    'icon' => 'fa-users', // Required
    'url' => '/users/', // Required
    'title' => 'Geting Involved', // Required
    //'target' => '_blank', // Optional
    'text' => 'CVS, Workspace Setup, Wiki, Committers' // Optional
  );

  $links[] = array(
    'icon' => 'fa-book', // Required
    'url' => 'http://help.eclipse.org/luna/index.jsp', // Required
    'title' => 'Documentation', // Required
    //'target' => '_blank', // Optional
    'text' => 'Tutorials, Examples, Videos, Online Reference' // Optional
  );

  $links[] = array(
    'icon' => 'fa-support', // Required
    'url' => '/forums/', // Required
    'title' => 'Support', // Required
    //'target' => '_blank', // Optional
    'text' => 'Bug Tracker, Newsgroup Professional Support' // Optional
  );

  $variables['header_nav'] = array(
    'links' =>  $links, // Required
    'logo' => array( // Required
      'src' => '/eclipse.org-common/themes/solstice/public/images/logo/eclipse-800x188.png', // Required
      'alt' => 'The Eclipse Foundation', // Optional
      'url' => 'http://www.eclipse.org', // Optional
      //'target' => '_blank', // Optional
      'width' => '100%', // Optional
      'height' => 'auto' // Optional
     ),
  );

  // Set Solstice theme variables (Array)
  $App->setThemeVariables($variables);

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-common/themes/solstice/public/images/logo/eclipse-800x188.png" alt="The Eclipse Foundation" width="100%" height="auto" 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

Code

<div class="row header-row background-charcoal">
  <div class="col-md-16 header-row float-right right">
    <span id="descriptionText">Eclipse Luna (4.4) Release</span> for
    <select id="osSelect">
      <option value="win32">Windows</option>
      <option value="linux" selected="selected">Linux</option>
      <option value="macosx">Mac OS X (Cocoa)</option>
    </select>
  </div>
</div>

Highlight

Sign up to our Newsletter

A fresh new issue delivered monthly

Code

<div class="featured-footer featured-footer-newsletter background-secondary">
  <div class="container">
    <p><i data-feather="mail" stroke-width="1"></i></p>
    <h2>Sign up to our Newsletter</h2>
    <p>A fresh new issue delivered monthly</p>
    <form action="https://www.eclipse.org/sponsor/process.php" method="post" target="_blank">
      <div class="form-group">
        <input type="hidden" name="type" value="newsletter">
        <input type="email" value="" name="email" class="textfield-underline form-control" id="mce-EMAIL" placeholder="Email">
      </div>
      <input type="submit" value="Subscribe" name="subscribe" class="button btn btn-warning">
    </form>
  </div>
</div>

Landing-well

Page Title

Code

<?php
ob_start();
?&rt;

<div class="jumbotron featured-jumbotron padding-top-60">
  <div class="container">
    <div class="row">
      <div class="col-md-20 col-md-offset-2 col-sm-18 col-sm-offset-3">
        <h1>Page Title</h1>
      </div>
    </div>
  </div>
</div>
<?php
$extra_header_html = ob_get_clean();
$Theme->setExtraHeaderHtml($extra_header_html);

News list

Announcements

Community News

Code

<div class="news-list news-list-match-height">
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-2 col-md-12 news-list-col padding-bottom-50">
        <div class="news-list-icon text-center">
          <i data-feather="activity" stroke-width="1"></i>
        </div>
        <h2 class="text-center">Announcements</h2>
        <ul class="news-list-media list-unstyled">
          <li>
            <a href="#" class="media media-link">
            <p class="media-date">2018/04/17</p>
            <h4 class="media-heading">Title</h4>
            <p class="media-text">This is some text.</p></a>
          </li>
        </ul>
        <ul class="list-inline news-list-links">
          <li class="news-list-links-view-all"><a
            href="/community/news/eclipsenews.php"
          >View all</a></li>
          <li class="news-list-links-rss"><a
            href="https://newsroom.eclipse.org/rss/news/eclipse_org/announcements.xml"
            title="Subscribe to our RSS-feed"
          >Subscribe to our RSS-feed <i class="fa fa-rss"></i></a></li>
        </ul>
      </div>
      <div class="col-lg-10 col-md-12 news-list-col padding-bottom-50">
        <div class="news-list-icon text-center">
          <i data-feather="activity" stroke-width="1"></i>
        </div>
        <h2 class="text-center">Community News</h2>
        <ul class="news-list-media list-unstyled">
          <li>
            <a href="#" class="media media-link">
            <p class="media-date">2018/04/17</p>
            <h4 class="media-heading">Title</h4>
            <p class="media-text">This is some text.</p></a>
          </li>
        </ul>
        <ul class="list-inline news-list-links">
          <li class="news-list-links-view-all"><a
            href="/community/news/eclipseinthenews.php"
          >View all</a></li>
          <li class="news-list-links-rss"><a
            href="https://newsroom.eclipse.org/rss/news/eclipse_org/community-news.xml"
            title="Subscribe to our RSS-feed"
          >Subscribe to our RSS-feed <i class="fa fa-rss"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

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

Code

<div class="step-by-step">
  <div class="container">
    <div class="row intro">
      <div class="col-xs-24">
        <h2>Participate &amp; Contribute</h2>
        <p>Get involved in Eclipse projects to help contribute to their success.<br/>
        We welcome users and adopters as part of the community.</p>
      </div>
    </div>
    <div class="row step-by-step-timeline">
      <div class="col-sm-6 step">
        <a class="step-icon" href="/contribute"><i data-feather="help-circle" stroke-width="1"></i></a>
        <p><a href="/contribute" class="btn btn-info">How to contribute</a></p>
      </div>
      <div class="col-sm-6 step">
        <a class="step-icon" href="/projects/handbook/#starting"><i data-feather="zap" stroke-width="1"></i></a>
        <p><a href="/projects/handbook/#starting" class="btn btn-info">Start a new project</a></p>
      </div>
      <div class="col-sm-6 step">
        <a class="step-icon" href="/projects/handbook"><i data-feather="book-open" stroke-width="1"></i></a>
        <p><a href="/projects/handbook" class="btn btn-info">Running a project</a></p>
      </div>
      <div class="col-sm-6 step">
        <a class="step-icon" href="/projects/project_activity.php"><i data-feather="activity" stroke-width="1"></i></a>
        <p><a href="/projects/project_activity.php" class="btn btn-info">Project Activity</a></p>
      </div>
    </div>
  </div>
</div>

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:

Marketplace

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.

Code

<div class="timeline">
  <div class="row">
    <div class="col-md-6 one gs-item">
      <div class="circle">1</div>
      <h1 class="fw-600">Getting Started</h1>
      <p>You can download the standard version of Eclipse that contains the basic bits
        for any Java developer to start coding in Java.
      </p>
      <p><a class="btn btn-warning" href="https://www.eclipse.org/downloads/packages/eclipse-standard-44/lunar">Download</a></p>
      <!-- /downloads/packages/eclipse-standard-432/keplersr2 -->
      <hr>
      <p> Eclipse also has pre-defined packages based on the type of development you want to do with Eclipse.</p>
      <p><a class="btn btn-warning" href="/downloads/">Download Packages </a></p>
    </div>
    <div class="col-md-6 two  gs-item">
      <div class="circle">2</div>
      <h1>Extend Eclipse</h1>
      <p>Eclipse Marketplace is a great source of plug-ins and product that you can add to Eclipse.
        Browse the online catalog or use the <a href="//marketplace.eclipse.org">Eclipse Marketplace</a>
        Client from within Eclipse. Look under the Eclipse Help Menu.
      </p>
      <p>Popular Plugins: </p>
      <ul>
        <li>
          <a href="http://marketplace.eclipse.org/content/subversive-svn-team-provider">Subversive - SVN Team Provider</a><br>
          <div class="drag_installbutton">
            <a href="http://marketplace.eclipse.org/marketplace-client-intro?mpc_install=1139" class="drag">
              <img src="/eclipse.org-common/themes/solstice/public/images/components/drag-drop/installbutton.png">
              <div class="tooltip">
                <h3>Drag to Install!</h3>
                Drag to your running Eclipse workspace.
              </div>
            </a>
          </div>
        </li>
        <li>
          <a href="http://marketplace.eclipse.org/content/eclipse-color-theme">Eclipse Color Theme</a><br>
          <div class="drag_installbutton">
            <a href="http://marketplace.eclipse.org/marketplace-client-intro?mpc_install=27025" class="drag">
              <img src="/eclipse.org-common/themes/solstice/public/images/components/drag-drop/installbutton.png">
              <div class="tooltip">
                <h3>Drag to Install!</h3>
                Drag to your running Eclipse workspace.
              </div>
            </a>
          </div>
        </li>
        <li>
          <a href="http://marketplace.eclipse.org/content/maven-integration-eclipse-juno-and-newer">Maven Integration for Eclipse</a><br>
          <div class="drag_installbutton">
            <a href="http://marketplace.eclipse.org/marketplace-client-intro?mpc_install=252" class="drag">
              <img src="/eclipse.org-common/themes/solstice/public/images/components/drag-drop/installbutton.png">
              <div class="tooltip">
                <h3>Drag to Install!</h3>
                Drag to your running Eclipse workspace.
              </div>
            </a>
          </div>
        </li>
        <li>
          <a href="http://marketplace.eclipse.org/content/pydev-python-ide-eclipse">PyDev</a><br>
          <div class="drag_installbutton">
            <a href="http://marketplace.eclipse.org/marketplace-client-intro?mpc_install=114" class="drag">
              <img src="/eclipse.org-common/themes/solstice/public/images/components/drag-drop/installbutton.png">
              <div class="tooltip">
                <h3>Drag to Install!</h3>
                Drag to your running Eclipse workspace.
              </div>
            </a>
          </div>
        </li>
      </ul>
      <p><a class="btn btn-info" href="//marketplace.eclipse.org">Marketplace</a></p>
    </div>
    <div class="col-md-6 three gs-item">
      <div class="circle">3</div>
      <h1>Documentation</h1>
      <p>These are a few of the popular getting-started documents for someone new to Eclipse: </p>
      <ul>
        <li>Getting Started with the <a href="http://help.eclipse.org/kepler/nav/0">Eclipse Workbench</a></li>
        <li>Getting Started with <a href="http://help.eclipse.org/kepler/nav/1">Java development</a></li>
        <li>All online <a href="http://help.eclipse.org/kepler/index.jsp">Documentation</a></li>
      </ul>
    </div>
    <div class="col-md-6 four gs-item">
      <div class="circle">4</div>
      <h1>Getting Help</h1>
      <ul>
        <li>There are many online sources of help in the Eclipse community. First thing to do is <a href="https://dev.eclipse.org/site_login/createaccount.php">create an account</a> so you can use them.</li>
        <li>Our <a href="http://eclipse.org/forums/">forums</a> are great places to ask questions, especially the <a href="http://www.eclipse.org/forums/index.php/f/89/">newcomer forum</a>.</li>
        <li>Open bugs and feature requests at <a href="https://bugs.eclipse.org/bugs/">bugzilla</a>.</li>
        <li><a href="https://wiki.eclipse.org/IRC">IRC channels</a> are active for some projects.</li>
        <li>Project <a href="https://dev.eclipse.org/mailman/listinfo">mailing list</a> are good source of what is going on in the project.</li>
      </ul>
    </div>
  </div>
</div>

Toolbar Menu

  1. Packages
  2. Java™ 8 Support

Code

<div class="toolbar-menu">
  <div class="container">
    <div class="row">
      <div class="col-md-24">
        <ol class="breadcrumb">
          <li><i class="fa fa-angle-double-right orange fa-fw"></i> <a class="active" href="/downloads/index.php">Packages</a></li>
          <li><a href="/downloads/java8/">Java&trade; 8 Support</a></li>
        </ol>
      </div>
    </div>
  </div>
</div>

Embedding Youtube videos

What is the Embedding Youtube 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

With Solstice

<head>
  <script>
    // Use defaults
    eclipseFdnVideos.replace();

    // Customize
    eclipseFdnVideos.replace({
      selector: ".eclipsefdn-video",
      resolution: "16by9",
      cookie: {
        name: "eclipse_cookieconsent_status",
        value: "allow"
      }
    });
  </script>
</head>
<body>
  <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>
  -->
</body>

Without Solstice

If you are not using the Eclipse Foundation look and feel, you can still load our Embedding Youtube videos plugin like the following example:

<head>
  <script src="//www.eclipse.org/eclipse.org-common/themes/solstice/public/javascript/eclipsefdn.videos.min.js"></script>
  <link href="//www.eclipse.org/eclipse.org-common/themes/solstice/public/stylesheets/eclipsefdn-video.min.css" rel="stylesheet" type="text/css">

  <script>
    // Use defaults
    eclipseFdnVideos.replace();

    // Customize
    eclipseFdnVideos.replace({
      selector: ".eclipsefdn-video",
      resolution: "16by9",
      cookie: {
        name: "eclipse_cookieconsent_status",
        value: "allow"
      }
    });
  </script>
</head>
<body>
  <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>
  -->
</body>

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:

Bootstrap example

Carousel

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

Code

<div class="block-box block-box-classic">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img width="100%" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+" alt="Image 1">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img width="100%" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==" alt="Image 2">
      <div class="carousel-caption">
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Back to the top