praxisnetau/silverstripe-moderno-admin

A SilverStripe module to give the CMS a more modern, flat appearance.

SilverStripe Moderno Admin

An extensive reskin of the SilverStripe 3.1 CMS admin interface

A SilverStripe module to give the CMS a more modern, flat appearance, while endeavouring to keep with the spirit of the original look and feel., _(*1)

NOTE: this module is for SilverStripe v3 only and is no longer being actively developed. For a SilverStripe v4 alternative, please consider the SilverWare Admin module, which is the spiritual successor to Moderno for SS4., _(*2)

Requires

• SilverStripe 3.1 or newer, SilverStripe v4 is not supported

Features

• branding settings for app name, app link, logo and loading images
• site config panel with color picker fields
• resizable site tree
• Flat, modern, minimalist look and feel
• Uses Font Awesome for most icons
• Extension allowing CMS menu items to use Font Awesome icons by name
• SVG SilverStripe logo
• Reskinned TinyMCE editor
• Uses the Google Font 'Roboto' for UI elements

Installation

Composer:

require: "praxisnetau/silverstripe-moderno-admin": "~1.1"

Manual:

To install this module manually, clone or download the repo, copy it to your document root ensuring the folder is called moderno-admin and finally run a /dev/build., _(*3)

Usage

Resizable Site Tree:

Moderno includes a JavaScript enhancement for LeftAndMain which allows you to resize the site tree. Simply grab the right edge of the tree and drag to resize. The width is saved using a cookie and should be persisted between page refreshes and Ajax loads., _(*4)

Font Awesome for CMS menu items:

You can now use Font Awesome icons for your CMS menu items (e.g. ModelAdmin classes) without writing your own custom CSS. To do this, find the name of the Font Awesome icon you want to use for your class, and define the private static $awesome_icon on your class:, _(*5)

private static $awesome_icon = "fa-calendar";

You can also define icons for classes using the YAML config system, for example:, _(*6)

MyClassName:
  awesome_icon: fa-calendar

The fa- prefix for icon names is optional, and may be safely omitted., _(*7)

It's a good idea to include both the regular $menu_icon and $awesome_icon attributes for compatibility, for example:, _(*8)

private static $menu_icon    = "mymodule/images/icons/calendar.png";
private static $awesome_icon = "fa-calendar";

Remember to ?flush after adding $awesome_icon to your class to update the CMS interface., _(*9)

Contribution

This module started as a simple CSS file of tweaks that quickly got way out of hand. :( There is plenty of room for improvement if you felt inclined to do so!, _(*10)

Screenshots

, _(*11)

, _(*12)

, _(*13)

Attribution

• Uses some icons by Yusuke Kamiyamane. Licensed under a Creative Commons Attribution 3.0 License.
• Uses Font Awesome by Dave Gandy.