Show Settings
Show Settings
The Show Settings section is where you can control when your notification will appear on the page, as well as select the animation that you want to use.
Show Type
The show type option allows you to select how and when your Notice notification will appear on the page. There are four options to choose from:
- Open on Start
- Open on Timer
- Open on Scroll to
- Open on Notice Trigger Only
Each type will be explained below:
Open on Start
The Open on Start type simply makes the notification appear as soon as the page finishes loading. This is the default type and is useful when you want your users to see your notification right away.
Open on Timer
The Open on Timer type allows you to show your notification after a certain amount of time has passed. Once you select this option you will see that an input field appears, for you to input the amount of time to wait before the notification is show. The timer works in Milliseconds, meaning 1000ms = 1s.
Open on Scroll to
The Open on Scroll to type will show the notification as soon as the user scrolls to the position where the notification is placed on your stacks page. No need to do anything special here, just place the notification on the stacks page where you want it to appear, and set it to the Open on Scroll to type.
Open on Notice Trigger Only
The Notice Stack comes with a sub-stack called the Notice Trigger, which allows you to trigger your notification when some other content on your page is clicked. It's a simpler container that you can use to wrap content. It works with buttons, images, text, anything you can think of.
The Open on Notice Trigger Only type is useful when you do not want your Notice notification to appear automatically, but you only want it to appear after a trigger is clicked. In these situations, select this option.
You can read more about the Notice Trigger stack at the very bottom of the tutorial page.
Show Animation
The show animation list is simply a list full of awesome animations used for displaying your Notice notification!!! There is a huge list and they are all really fun and entertaining. Play around and find one that you like.
Hide Settings
Hide Settings
The Show Settings section is where you can control when your notification will appear on the page, as well as select the animation that you want to use.
Hide Type
The hide type option allows you to select how and when your Notice notification will disappear from the page. There are only two options to choose from:
- Hide Manually
- Hide on Timer
Each type will be explained below:
Hide Manually
By default the "Hide Manually" type is selected. This simply means that the notification will remain open until the user manually clicks the Close Button (X) at the top, or the "Close" action at the bottom of the notification.
Hide on Timer
The Hide on Timer option allows you to hide your notification after a certain amount of time has passed. The timer works in Milliseconds, meaning 1000ms = 1s.
Hide Animation
The hide animation list is simply a list full of awesome animations used for hiding your Notice notification!!! There is a huge list and they are all really fun and entertaining. Play around and find one that you like.
Main Notification
Main Notification Settings
The Main Notification Settings section is where you will set up the majority of layout, content, and styling options for your notification.
Content Type
The Notice stack allows you to choose from two content types:
- Text / Icons (Built in content with controls)
- Stacks (Add your own content entirely)
Text / Icons
By default the Notice stack content is set to text / icon. You will find as soon as you open the stack that you can edit the notification text, and you can add an Icon using the settings.
We've included a lot of settings for customizing the Text / Icon for your notification already. You can create a wide variety of notifications using the built in content provided.
Stacks
If text and and Icon are simply not enough for you, we've added the ability to add stacks content to the notification instead. You can literally create anything you can imagine with stacks content. Just like our example page, you will see we've made some very creative notifications.
Fill Mode
The fill mode option will allow you to select the width of your Notification. It can be full width, a fixed pixel width, or a percentage width. All notifications will scale to fit mobile devices, therefore this width is really the "Maximum" width of the notification.
Z-Index
Yes, we have allowed full range of the z-index for the Notice stack. No more z-index conflicts, if you need to raise or lower the z-index of your stack, please do so.
The z-index controls the layer on which the notification appears, therefore if your notification is appears below some content that it should be on-top of, then you should raise the z-index, and vise-versa.
Position Vert (vertical positioning)
The Position Vert option allows you to choose how your Notification will be aligned vertically to the page. You can choose to align the notification to the:
- Top of the page
- Center of the page
- Bottom of the page
NOTE: If you choose to align your notification to the vertical center of the page, animations will not work. : ( Unfortunately this is just the nature of web development at the moment. No need to worry though, we were able to create a default fade-in/fade-out effect for vertically centered notifications. That way, it isn't completely boring. : )
If you select Top, or Bottom for the vertical positioning, you will find that an input box appears that will allow you to set the offset from the top/bottom of the page respectively.
Position Horiz (horizontal positioning)
The Position Horiz option allows you to choose how your Notification will be aligned horizontall to the page. You can choose to align the notification to the:
- Left of the page
- Center of the page
- Right of the page
Side Margin
The Side Margin option includes two input fields; one for setting the left margin of your notification, and one for setting the right margin.
For notifications that are flush with the edge of the page, leave these options set to 0.
For notifications that you would like to be spaced out from the sides of the page, increase these values accordingly.
Padding & Radius
The padding option simply allows you to set the inner padding of the notification.
The radius option allows you to control the roundness of your notifications corners.
Content Width
The content width option allows you to choose the maximum width of your notifications inner content.
In some cases you will not want your inner text to space the entire width of the notification, in these cases you can decrease the size of the inner content.
By default inner content will not be longer than 960px, but you can change this to whatever you'd like.
Background
The background option allows you to set a custom background for your notification, you can choose between:
- None (no background)
- Solid Color (a single color)
- Gradient (a gradient between two colors, including the direction)
- Image (an image of your choice, the sizing is up to you)
Border
The border option is straight-forward and simply allows you to add a border to your notification, you can control the weight, color, and style of the border.
Shadow
The shadow option allows you to add a box shadow to your notification. You can choose the color and other basic box-shadow properties such as x and y offsets, blur, and spread distance.
Main Notification > Text
Main Notification > Text
The Main Notification > Text section is where you will find basic settings to control text properties such as fonts, font-sizes, line-heights, text color, text alignment, etc.
These options are are fairly straightforward, therefore we won't explain all of them. The only important thing that you need to know is how to add custom fonts, which you can read below.
Text Font
We've included a bunch of preset fonts with Notice, as well as the ability to add custom fonts!
Simply choose the font that you want to use, or select "Custom" to add your own.
If you select "Custom" you will find that two new input fields appear. One is for the URL of the font that you want to import from the web, and the other is for the Name of the font.
For example, if you want to use the font "Nunito" from Google Web Fonts, then you would set the URL input to:
"https://fonts.googleapis.com/css?family=Nunito:300,400,600,700" (without the quotations)
and then you would set the Font Name input to:
Nunito (without the quotations)
This will now set the font to Nunito from Google Web Fonts. ^^
Main Notification > Icon
Main Notification > Icon
Here you will find the ability to add custom icons, as well as edit the icon font, icon positioning, size, coloring etc.
Notification Icon (checkbox)
By default an icon is not used with the Notice stack, though adding one is really easy! Simply check this option and you will see that an icon appears in your notification. : )
Icon Font
We've included three of the major icon fonts on the web: Google Material Icons, Font-Awesome Icons, and Ionicons.
Icon Font
Once you select the Icon Font that you desire, you must then enter the specific code for that icon.
Each Icon font has their own format for writing icon codes, which we will explain below:
- Google Material Icons ( https://material.io/icons/ )
Material icons use underscores to separate words. For example if you want to use the "account circle" icon on their website, you should enter "account_circle" into the icon code field.
- Fontawesome Icons( http://fontawesome.io/icons/ )
Fontawesome Icons use dahses to separate words. For example if you want to use the "address book" icon on their website, you should enter "address-book" into the icon code field.
NOTE: you do not need to add the "fa" before the icon code, as we handle this for you.
- Ionicon Icons( http://ionicons.com/ )
Ionicons also use dashes to separate words. Their website provides an easy way of copying and pasting icon codes, simply click on the icon that you want, and the code will appear. You can then copy this code directly and paste it into the icon field. For example, paste "ion-clock" into the field for the Ionicon clock icon.
Icon Position
With the Notice stack, you can choose to position your icon in two ways:
- Side (Left or Right)
- Top (with Left, Right, Center alignment options)
Side
If you select Side, the default option, you will see that another dropdown appears allowing you to align the icon to the Left or to the right of your notification.
Top
If you select Top, the default option, you will see that another dropdown appears allowing you to align the icon to the Left, to the Center, or to the Right of the notification.
Icon Spacing
We've including the ability to add custom spacing around your icon, this is because all icons are different, and it allows you to create a wide variety of styles!
You can control the Top, Bottom, Left, and Right spacing around your icon.
Icon Color
Here you can simply set the color of your notifications icon. Opacity is also enabled which is great for creating flat style design colors.
Main Notification > Close Button
Main Notification > Close Button
The close button refers to the (X) in the top right hand corner of the notification. This is a standard practice for closing popups on the web. There is only one option for the close button, and that is choosing whether to use it or not. Read more below.
Show Top Close Button
This checkbox allows you to choose whether or not you want to use the top close button (X). By default the close button will appear, and it will match the color of your notifications text.
Because we've also included custom action buttons, including a close action, we've included the ability to hide the top close button (X), just in case. That way you don't have to have 2 close buttons in your notification. This way, you can mix and match.
Main Notification > Action Buttons
Main Notification > Action Buttons
With Notice, we have added an awesome feature creating your own action button to your notification! This allows your user to take action after reading the notification! You can link to a separate page, or a section on the same page with a custom button! You can customize the colors, text content, etc. Read more below...
Show Action Button (checkbox)
By default, the Notice stack does not use Action Buttons, if you want to add the action buttons to your notification, simply check this option, and they will magically appear ^_-.
After they appear, you will find that if you double click on the right-hand button that reads "Custom Action Text", you can customize it to say anything that you'd like.
Link
The link option in this section is the url where the user will be directed to after clicking on the "Custom" action button.
Button Height
Here you can simply set the size of your action buttons. To keep things simple and clean, all you have to do is set the height, and all of the spacing, alignment, responsiveness, etc. will be taken care of! Great huh?! : )
Button Border
The Action buttons have a subtle border that separates them from the notification, you can customize the color and opacity of this border using this color picker.
Custom Action Button Colors (checkbox)
By default Action Buttons will have the same background and text color as the rest of your notification. This makes it easy for creating quick notifications.
That being said, in some cases you may want to set a custom background and text color for your action buttons. If you want to do so, simply check this option, and more color pickers will appear.
You can set the general color of both action buttons, and then you can also individually set the hover background/text of the Close action and Custom action individually.
Advanced Settings
Advanced Settings
Oh boy, it looks like the basic functionally just wasn't enough for you... That's okay, hopefully these advanced features will suit your needs.
Trigger ID
We've included a simply trigger stack with Notice called Notice Trigger. This stack can be used to wrap content on your page, so that when the user clicks on that content, your Notice notification will appear! Awesome sauce... ^.^
In the advanced settings you will find an input called "Trigger ID". This is where you can give your notification a custom ID that you can use to trigger with a Notice Trigger.
When you drag a Notice Trigger stack onto the page, you will find that there is an ID field for connecting your trigger to a particular Notice notification. Simply type in the same ID that you used with your notification, and the two will be connected!!!!!
Maximum Height
Responsiveness on the web is hard... There is such a wide variety of content out there, that it is nearly impossible to predict what our users will use.
By default all notifications will stop growing at 70% of the browser windows height, and the remaining content will be scrollable.
There may be some special cases where you want to increase or decrease this height, and thus we've included this as an advanced feature. Although, 70% is a very standard height that will fit all devices.
Activate Cookies
The Activate Cookies option can be used for only showing your Notice notification to a user if they haven't already seen it. This option might be useful for preventing your users from getting annoyed if they often visit your website.
If you check this option, it will create a cookie that detects whether or not the notification has already been seen before, if it has been seen, then the notification will no longer appear.
If you uncheck this option, the notification will return back to its default show behavior.
Position Absolute
This feature is mainly for development purposes, but it is used to set notifications absolutely positioned to their container, rather than the fixed to the page itself. We can't see any specific reason for using this option, but if you find a use for it, let us know. ^_-
