blog-tutorial-post-template

Tutorials

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 and only 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. ^_-

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software