Alert Particle Documentation

  • Tony
  • 8 April 2020
  • No comments
  • Docs
Display success, warning and error messages with Close button and cookie based. See how Alert can be designed beautifully on Demo Page.

# Heading Package contents

Files Description
jlalert.yaml Contains the Alert particle settings.
jlalert.html.twig The Twig file to pull information, settings.
js.cookie.min.js Contains the JavaScript to handle the cookie.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Alert particle requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Alert particle (i.e: Home) -> Layout tab -> Drag and drop the Alert Particle from Particles panel (left corner) to the section you want to display the particle.

Settings

Settings Description
Title Customize the title.
Content Customize the content of alert.
Alert Style Settings Common settings for Alert
Style Select the Alert style.
Close Button Enable or disable close button of alert.
Expires Date Visibility duration until a notification disappears. Use 0 to remove the timeout duration.
Content Style Settings Common settings for Content
Style Select a predefined content style.
Margin Top Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
CSS Classes CSS class name for the particle.

Style Tab

Settings Description
Title Style Settings Common settings for Title Style
Color Customize the title color.
Font size Customize the title text font size.
Transform The following options will transform text into uppercased, capitalized or lowercased characters.
Description Settings Common settings for Description
Color Customize the description color.
Font size Customize the description text font size.
Transform The following options will transform text into uppercased, capitalized or lowercased characters.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Comments

Leave a Reply

You must be logged in to post a comment.