Button Box

A treasure trove of shiny buttons for you to make use of

Field Types #

We’ve currently got five field-types.

  1. Buttons
  2. Colours
  3. Text Size
  4. Stars
  5. Width

Buttons #

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 can be relative e.g. /admin/resources/buttonbox/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 you with a set of images for useful things like alignment and columns. These can be found in /buttonbox/resources/images and can be referenced directly from the Image URL column in the field settings using the following pattern: /<cpTrigger>/resources/buttonbox/images/<filename> where <cpTrigger> is whatever the config value cpTrigger is set to (default: ‘admin’) and <filename> is one of the following:

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.
downloadv1.3.2