Skip to content
An extension of font-awesome-picker that replaces the icons with colours.
JavaScript CSS PHP Shell
Branch: master
Clone or download
Pull request Compare This branch is 1 commit ahead of peavers:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_config
code First commit; Jul 27, 2015
css Update color-swabs.css Apr 14, 2016
images/screens Readme formatting; Jul 28, 2015
js Typo in docs Jul 28, 2015
.editorconfig
.gitattributes
.gitignore
.gitmodules Fixed example colour array being off by one; Feb 27, 2016
.php_cs Fixed example colour array being off by one; Feb 27, 2016
.scrutinizer.yml Added standard Scrutinizer config Feb 16, 2016
LICENSE Default license Jul 28, 2015
_config.php First commit; Jul 27, 2015
composer.json Update composer.json Aug 13, 2019
grunt-menu.sh Fixed example colour array being off by one; Feb 27, 2016
readme.md Readme formatting ...again. Jul 28, 2015

readme.md

Synopsis

An extension of font-awesome-picker that replaces the icons with colours.

Features

  • Easily pick colour swabs to be used anywhere in the frontend
  • Can filter on colour name
  • Almost no development/lines of code required to add new colours

Installation

Composer

Ideally composer will be used to install this module. composer require "moe/color-swab:@stable"

Screen shots

Color swab view

Color swabs

Filter view

Filter

Usage

A basic working example, include the following to any class you want the field on;

    private static $db = array(
        'MenuBackgroundColor' => 'Varchar(255)',
    );

    public function getCMSFields()
    {
        $fields = parent::getCMSFields();

        $fields->addFieldsToTab('Root.Main', array(
            ColorSwabField::create('MenuBackgroundColor', 'Megamenu background colour')
        ));

        return $fields;
    }

Then simply include in the template in a class element

    <nav class="{$MenuBackgroundColor}">[...]</nav>  

The controller extension should make sure you've got access to the colour swabs so you don't need to double up the CSS file.

Add/Change colours

To modify the choice of colours you need to change two files.

  • js/color-swabs.js
  • css/color-swabs.css

For example: To add the colour black make the following changes

// js/color-swabs.js    
    var colorSwabs = [
        //[...]
        'black-500'
    ];
/* css/color-swabs.css */
    .color-black-500 {
        background: #000000;
    }

Want icons instead of colours?

Got you covered, checkout font-awesome!

Libraries used/modified

  • Font Awesome Icon Picker
You can’t perform that action at this time.