Corners Manual

Corners stack

corners_settings.png


Corner
The corner where you want the button and modal to position themselves on your web page. The choices are Top - Left, Top - Right, Bottom - Left and Bottom - Right.

Open Link
Enabling this will cause all button clicks to open specified link instead of opening modal.

Link URL
The URL the user will be taken to after clicking the button. Requires Open Link (above) to be  enabled.


Button Settings

Button Text
The text used in the Corners button. Leave blank if you want to just use the icon only. This text will be hidden in mobile screens to conserve space. Please design with this in mind.

Button Icon
The Font Awesome icon that will be used in the Corners button. You can see a full listing of all the possible icons available at http://fontawesome.io/icons/

Icon Size
The size the icon will be displayed in the button.

Icon Animation
Use rotate to get any icon to rotate, and use pulse to have it rotate with 8 steps. Works well with Spinner, Refresh, and Cog icons.

Fixed Width
Sets icon at a fixed width. Great to use when different icon widths throw off alignment.

Button Colors
The colors used for the button's Bkgrd ( background ), Border and Text.

Button Border
Set the buttons Border Width and Border Radius ( rounded corners ).

Button Padding
The padding inside the button for top, right, bottom and left.

Button Margin
The margin outside the button for top, right, bottom and left. Use this setting to  position your button(s) exactly how you want them in the corner.  

Button Font
The font family to use on Button Text.

Button Weight
The font weight to use on Button Text. You can use values like 400, 500, 600, bold, bolder, etc...

Button Font Size
The font size to use on Button Text.

Button Z-index
The z-index ( the stack order of an element ) of the button. The default should suffice, but this setting allows you to customize in case of third-party incompatibility ( i.e. button is hidden behind another item with higher z-index ).


Modal Settings 

Modal Colors
The colors used for the modal's Bkgrd ( background ), Border and Text.

Modal Border
Set the modal's Border Width and Border Radius ( rounded corners ).

Modal Max
The maximum width and height the modal can grow to. In a mobile screen, the width is always 100%

Modal Padding
The padding inside the modal for top, right, bottom and left.

Modal Margin
The margin outside the modal for top, right, bottom and left. Use this setting to  position your modal(s) exactly how you want them in the corner.  

Modal Z-index
The z-index ( the stack order of an element ) of the modal. The default should suffice, but this setting allows you to customize in case of third-party incompatibility ( i.e. modal is hidden behind another item with higher z-index ).

Modal Effect
The animation effect used when displaying the modal.
The following effects are available...

  • Fade in and Scale
  • Slide In (right)
  • Slide In (bottom)
  • Newspaper
  • Fall
  • Side Fall
  • 3D Flip (horizontal)
  • 3D Flip (vertical)
  • 3D Sign
  • Super Scaled
  • 3D Slit
  • 3D Rotate Bottom
  • 3D Rotate In Left

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk