Here is a collection of SilverStripe themes, styles and enhancements related to the appearance developed by eNTiDi. Every item has its own developer page so, if you want to submit bugs or feature requests, just jump to the proper section and submit a new issue.

Silverstrap Go to the developer section

Silverstrap theme screenshot

A SilverStripe theme based on the Bootstrap front-end framework. It should work out of the box on basic sites, so you can drop it into your themes folder, enable it (either programmatically by using SSViewer::set_theme('silverstrap') or by switching it in the CMS) and check how your new site look.

Features

  • Should work out of the box.
  • Out of the box support to Bootstrap responsive front end forms.
  • No dependency on SASS or Ruby. This is a plain SilverStripe theme: just unpack the tarball under themes/ and enable it.
  • Out of the box support for dynamically generated tables of contents. If you install the silverstripe-autotoc module, silverstrap will generate on the fly the table of contents of the current page (if possible) and it will present it in a .navlist on the left side. Your site will gain table of contents for free.
  • Proper support for pages nested at arbitrary levels.
  • Quite extensible and customizable. This can be done by overriding the default implementation instead of editing it: check the following section for further details.
  • Different components inclusion methods. By default external components (such as JQuery and Bootstrap) are fetched from the jsdelivr CDN network but a couple of alternate methods are provided.
  • JavaScript configuration can be overriden.

Overriding silverstrap

Let's say you want to use a custom Bootstrap CSS, such as the ones provided by Bootswatch. You can download and store it over the default CSS found in silverstrap/css/bootstrap.css. This works but it will overwrite the default CSS provided by silverstrap... and this is bad. You loose the possibility to update silverstrap with a git pull.

Instead, you can use the SilverStripe template trick used by silverstripe-treeish to override the templates without touching a byte of the original silverstrap folder:

  1. put silverstrap under themes (as usual).
  2. create a silverstrap_Page directory at the same directory level: any page of type Page (hence the whole site) will look in this directory before for every template;
  3. copy the custom bootstrap CSS in some place accessible by the web server, e.g. under themes/silverstrap_Page/css/mybootstrap.css;
  4. create themes/silverstrap_Page/templates/Includes/Bootstrap.ss and put the following template code in it:
<% require CSS(themes/silverstrap_Page/css/mybootstrap.css) %>
<% require themedCSS(bootstrap-responsive) %>
<script src="$ThemeDir/js/bootstrap.min.js"></script>

The silverstrap-cerulean project is an extension to Silverstrap that uses this very same approach to override the Bootstrap theme Silverstrap is based on with Cerulean. You can check the source code for technical details.

This trick can be used to override anything, such as to enhance the default page template, to set the favicon, to add or remove a feature or to put a watermark on every page. The templates in silverstrap are quite fragmented to make it easier to change only a single aspect.

Silverstrap  responsive form screenshots

Accessing parent pages

The default implementation provides support for custom nested levels in .navbar but does not have an easy way to access the parent pages, as commonly implemented by vanilla SilverStripe theme (Simple). In other words if you have subpages under yoursite/contacts/ you can access them but the parent page itself (that is yoursite/contacts/) is used to open the popup submenu, hence not directly accessible by a mouse click.

To alleviate the problems a Sitemap of the first two levels is put by default before the footer. This does not resolve the problem for further levels though.

To be able to access the parent pages directly from the .navbar you can override NavbarSubmenu.ss and add a fixed item at the beginning of the <ul> list, right before looping on $Children. The NavbarSubmenuAccessible.ss file does exactly that, so you should use it instead of the original template. By leveraging the override trick explained in the previous section, you can accomplish this by creating themes/silverstrap_Page/templates/Includes/NavbarItem.ss under your website directory with the following content:

<% if $Children %><% if $Parent %>
    <% include NavbarSubmenuAccessible %><% else %>
    <% include NavbarMenu %><% end_if %>
<% else %>
    <% include NavbarLink %>
<% end_if %>

Customizing JavaScript modules

silverstrap.js defines the global object silverstrap where all the default JavaScript settings are stored.

To override this settings (i.e. to change the out of the box behavior of the JavaScript modules) you should change this global object after including silverstrap.js, e.g.:

    <script src="themes/silverstrap/js/silverstrap.js></script>
    <script>
      // Disable fullscreen in fotorama
      silverstrap.fotorama.allowfullscreen = false;
      // Colorbox zoom to 50% max
      silverstrap.colorbox.maxWidth = '50%';
      silverstrap.colorbox.maxHeight = '50%';
    </script>
Silverstrap cerulean variant

Silverstrap cerulean Go to the developer section

An extension to Silverstrap that uses the Cerulean theme instead of plain Bootstrap.

Silverstripe treeish Go to the developer section

An enhancement to Simple, the default SilverStripe theme by Sara TuĊĦar Suhadolc. This is not a full featured theme because it depends on it.

This extension gives arbitrary nesting levels to submenu, required by silverstripe-gtkdoc, and add some CSS styling to accomodate silverstripe-manpage.

Installation

Check if your SilverStripe installation has Simple installed: under the themes/ directory there must be a "simple" folder. If not, grab the theme in the way you prefer and install it.

To install the treeish extension:

  1. unpack the tarball under themes/ (or perform equivalents steps via git)

    cd themes
    wget http://dev.entidi.com/p/silverstripe-treeish/source/download/master/ -O tarball.zip
    unzip tarball.zip
    
  2. rename the base directory to "simple_Page"

    mv silverstripe-treeish-master simple_Page
    

That's it. At the end, your themes directory must contain the folders simple and simple_Page.