Settings (Edit Block Form)

The settings should be pretty self-explanatory, I'll update this page if there's anything that's tripping people up.

Tip: When you insert the Block-A-Button block, the whole of its parent element (e.g. every block in the same Layout Cell, Stack or Area as the Block-A-Button) will be given the overlay & button. Click here to see a visual example.

Customise the text and link of your button, choose from any of the pre-set button and overlay styles (just click on them to add the appropriate class names to the 'Class(es)' fields).

Tip: To really make sure you get noticed, set horizontal position to Fill, vertical position to Middle and check the "Increase Font Size?" box. Configure appearance as you otherwise would.

Advanced Customisation

To customise the appearance of the overlay and buttons you can apply pre-existing classes (e.g. from your theme) or overide the defaults.

You can also use C5's design settings (select the 'Design' menu item from the list which appears when you click on the block-a-button in "edit mode") to customise some aspects of the button and overlay's appearance.

Reading through blockabutton.css (in /packages/block_a_button/blocks/block_a_button/css/) is the best starting point for customising the appearance of the button and overlay. There are a couple of examples in there as well as all the styles available in the editor.

Customising the block-a-button-overlay class allows the overlay to be tweaked to your liking.

Tip: Try using CSS3 transformations on your custom button and overlay classes and corresponding :hover modifiers - your imagination is the limit!

FAQ

• The overlay is expanding to a larger area than I expected...
  On page load, the overlay covers the parent element (i.e. the element which contains the Block-A-Button block). This is so that you can combine multiple blocks together under a single overlay. Click here for step-by-step screenshots for fixing this.
• My text colour (set in 'Design' window) is not showing up...
  Add cust-txt-clr to 'Button Class(es)' or click 'from Design' under 'Text Colour', also see the next question:
• Setting text alignment or [other property] in the 'Design' window is not working properly...
  Please use the Horizontal and Vertical Position settings in the 'Edit' window. Many of the settings in the 'Design' window conflict with the way Block-A-Button works, and setting properties like margin, padding, positioning or alignment is likely to cause display problems.
• When does Block-A-Button use custom settings from the 'Design' window?
  If an area with a C5 custom 'Design' contains  only the block-a-button itself and no other elements, then the button will "steal" the container on load and take on the styles itself. If there is more than just the block-a-button inside the 'Design'ed container, it assumes the styles apply to the group as it is normally displayed, and its appearance on mouse-over is entire set up using the 'Edit' window (which is the preferred method).
• My block-a-button doesn't expand to fill the full area I would like...
  If the overlay is covering a small area which is within the area you would like it to cover; increase the value of the 'Go Up # Levels' field. Increase it by 1 and see if this works, otherwise continue to increase it until the overlay appears covering your intended area when you view the page (the button does not expand in 'Edit' mode).
• I can't get my block-a-button to cover the right area - altering the "Go Up # Levels" field makes it too big or too small...
  Layouts and Stacks can both be used to confine the Block-A-Button block alongsides the element(s) it will overlay.
• I want bigger or smaller text
  There are some preset button sizes, however you may wish for more flexibility. Block-A-Button includes Dave Rupert's fitText - to scale your text check the 'Increase Font Size' box under  'Size & Position'. If the text is still too small, try setting the value of 'Font Scaling' under 'Advanced Settings' to a number a bit less than one. 0.8 is bigger than 1 and 0.5 is really big! If the text is too big, setting this to a number above one will shrink it down.