Plugin screenshot thumbnail 1/2
Plugin screenshot thumbnail 2/2

We've recently acquired this from the Supercool team. Read our blog post for more details.

A treasure trove of shiny buttons for you to make use of in your Craft control panel.

Buttons, Colours, Text Size and Stars

Buttons

Triggers

Usage

We provide the following types of button fields:

  • Buttons
  • Colours
  • Text Size
  • Stars
  • Width
  • Triggers (thanks @lindseydiloreto)

Make your own button group with optional labels and icons. We’ve provided you with a set of icons for common use cases but any image can be used.

Display as graphic

Toggle this on and Button Box will not restrict the height of the buttons to allow for larger images. For example you might want to allow the user to choose a layout:

graphical buttons

Display full width

If you check this Button Box will allow the button group to flow full width, useful for allowing larger graphics to be more responsive.

Button Options

all the buttons

  • Option label: The name of your option (e.g. ‘Male’, ‘Female’, ‘On’, ‘Off’, ‘Cat’, or ‘Dog’)
  • Show label?: Hide the label on output.
  • Value: This appears in your template.
  • Image URL: The path to your image. Image URLs are relative to your @webroot e.g. /images/align-left.png is http://site.test/images/align-left.png. Icons work best when they are 30 x 20px or less.
  • Default: Optionally choose one row to define as your default option for users.

Provided images

We have provided some sample icons for common scenarios.

ImageFilename
align centeralign-center.png
align leftalign-left.png
align rightalign-right.png
gridgrid.png
sliderslider.png
bold texttext-bold.png
light texttext-light.png
text boxtext-box.png
texttext.png
1 columncol-1.png
2 columnscol-2.png
3 columnscol-3.png
1 text columntext-col-1.png
2 text columnstext-col-2.png
3 text columnstext-col-3.png

Colours (with a 'U')

Create a select drop-down of colours.

text size

  • Option Label: Name of your colour (e.g. 'Grey', 'Orange', or 'Mountain Honey Dew')
  • Value: This appears in your template and will most likely be a CSS class name
  • Valid CSS Colour: This creates the preview colour and just needs to be valid CSS (i.e. CSS colour names, Hex, RGB or RGBA values should all work for you).
  • Default: Optionally choose one row to define as your default option for users.

Text Size

Give your users some preset text sizes.

text size

  • Option label: Give your size a name e.g. (e.g. ‘Normal’, ‘Large’, or ‘Small print’)
  • Value: This appears in your template and will most likely be a CSS class name, but could be a pixel or em value should you be that way inclined.
  • Pixel Size: This is the size the option will appear in your select menu – it does not necessarily need to correspond to the font-size you want to use on the front-end.
  • Default: Optionally choose one row to define as your default option for users.

Stars

Make your star ratings shine. Simply choose how many stars you’d like to make your rating. No fuss, that’s it!

star rating

(N.B. No half stars here. The laws of physics suggests that this is ridiculous)

Width

Our idea for this is to allow users to select widths or columns on a layout – you’ll most likely want to use the values as classes in your templates to line up with your CSS grid system. You are of course free to use this as you see fit and the generic nature of a row of empty boxes suggests that it could be used for a lot more – let us know what you come up with.

width

Each row you add, creates an extra box.

  • Value: This appears in your template and will most likely need to be a CSS class name.
  • Default: Optionally choose one row to define as your default option for users.
Installation Instructions

To install this plugin, copy the command above to your terminal.

Active Installs
1,961
Version
4.1.0
License
MIT
Compatibility
Craft 3, Craft 4
Last release
June 28, 2022
Categories
Activity (30 days)
1
Closed Issues
0
Open Issues
0
Merged PRs
0
Open PRs