Sticky Navs

Font Awesome Icons

Font Awesome (Free)

Activating Font Awesome is necessary for the icons of this stack to function. To avoid heavy load times Font Awesome was not included in Sticky Navs, but rather made as a separate and completely free stack (included in your zip file). This stack must be dragged onto the page for the icons to work.

After this is added, the icons can be changed by selecting each individual navigation section. The icon text commands can be found here:

http://fortawesome.github.io/Font-Awesome/icons/


Creating “Inner” list item sections

Simple use RapidWeaver’s built-in list item tool.

HTML Lists Tool

Create a basic unordered list.

Basic Unordered List

When using the “Slide Open” theme you should create a single line of text prior to creating your unordered list. This gives the user something to click on to open the unordered list. If you create the unordered list first and then the single line of text RapidWeaver’s auto-formatting will wrap the text in an additional and unnecessary unordered list tag that will create visual problems… in other words you must create the line of text first before the unordered list or you’ll simply have to start over.


Creating Links

Link Maker Breaker

Couldn’t be easier – just use RapidWeaver’s built-in link maker/breaker (middle icon makes, right button breaks).


Definition of Terms

General Controls

Theme : Choose between 2 built-in themes (Tooltips or Slide Open).

Animation On : Only available for the “Slide Open” theme, this option can disable the sliding open animation effect. If disabled the text next to the Font Awesome icon will be displayed an open regardless of hovering or clicking.

Right Side : Selecting this option will display the navigation section on the right hand side (left by default).

Move to Bottom: Selecting this option will display the navigation section to the bottom (top by default).

Open on Click : By default the navigation menu will open on hover, but selecting this will require a click instead.

Inner on Click : This option is only available for the “Slide Open” theme and is selected by default. Disabling will not require the user to click to see the 2nd tier navigation section, but will activate on hover instead.

Text align : Set to “Center” by default, this can be changed to Left, Right, or Justify. Changing the alignment is ideal at times depending on if your menu is on the left or right hand side. Additional padding may be useful in a span tag as well depending on whether or not certain icons have less or more width to them. You can wrap your text like this as an example:

1
<span style="padding-left: 2px;">Your Text</span>

Pop Out Width : Width of the text section that pops out after the icons are hovered/clicked.

Distance : Distance of the stack from the top/bottom of the page.

Animation Speed : Millisecond speed of animation on click/hover.

Inner Anim Speed : Millisecond speed of animation for the inner lists on click/hover.

Border Radius : The roundness of the edges.

B Radius Inner :  The roundness of the edges for the inner sections (if they are added).

Font Size : Pixel size of the font (includes Font Awesome icons).

Vertical Padding : List item padding from top & bottom.

Horiz. Padding : Left & Right padding of the icon.

Text Icon Padding : Distance of text from the Font Awesome icon.

Color Controls

Background : Background color of the main section where icons are located.

Bg (hover) : Background color that appears on hovering over each icon section.

Border : Color of the border of the main section.

Icon : Color of the Font Awesome icons.

Icon (hover) : Color of the Font Awesome icons upon hover.

Text : Color of the text.

Text (hover) : Color of the text upon mouse hover.

Pop Out Bg : Background color of pop out sections for Theme 1 (not available/visible for Theme 2).

Pop Out Inner : Background color for each line item in inner sections.

PO Inner Hover : Background color for each line item in the inner sections upon hover events.

Middle Borders : Off by default, checking it will create borders between the Font Awesome icons. You can control the color for the top and the bottom colors.

Border Inner On : This will wrap inner list item sections with a border, which you can control the color of.

Mid Borders Inner : Like the ‘Middle Borders’ option, this does the same, only for the Inner List Item Sections.

Advanced

Z-index : You can manually adjust the z-index plane in the chance that the amount is not enough or if you have something else that you wish to have pop up over the fixed navs (i.e. Lightboxes), in which case you can reduce the z-index. Z-index is an arbitrary number that simply is place above or below by numerical weight, so higher numbers are above lower numbers.

Cursor Hand (text only) : Selecting this option is only useful if you uncheck the next option and will only turn the mouse into a cursor if they hover over the text, which includes the Font Awesome icons. Links are only attached to text sections, so this basically would make the text and icons have the cursor over them.

Cursor Hand (all) : This is selected by default and places the hand over everything in the stack, which does make some since as everything has an effect if hovered over or clicked on, assuming you have placed links in the text… I’m guessing that’s safe to assume since that’s the entire purpose of the stack :P.

Sticky Nav Menu Items (Inner Section)

Font Awesome : set to fa-gear by default, this input field can be changed to any Font Awesome icon – full list here:

http://fortawesome.github.io/Font-Awesome/icons/

Arrow Top % : Percentage Distance from top for the arrow icon (Theme “Tooltips” only). Centered (50%) by default, which may not be as appropriate if inner sections are created.

Padding Top, Bottom, Left, Right : The padding distance of the text from the relevant sections.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

XL

Here is a customer review/tutorial on Ice Box by William Winter

Basic Setup:

Step 1:

Double Click the XL stack to install it.

Step 2:

Restart RapidWeaver so that all changes take place.

Step 3:

Drag an XL stack onto your page.


Definition of terms:

Full Screen – General Options:

Button Style:
Select either square or arrow buttons, or choose custom to use your own images.
Color:
Change the color of the square and arrow buttons.
Go Fullscreen/Go Normal:
Go Fullscreen – Select an image to display while in normal (small screen) mode which, when clicked, enters fullscreen mode.
Go Normal – Select an image to display while in fullscreen mode which, when clicked, exits fullscreen mode.
Size:
Sets the width and height of the buttons in pixels.
Padding:
Controls the distance of the buttons from the bottom right corner in pixels.
Error Message:
If the users browser does not support fullscreen mode, and they try to go fullscreen, they will receive an alert message with whatever text you place here. Default text is “Sorry, your browser doesn’t support fullscreen mode”.

Full Screen – Advanced Options:

Hide/Show Button:
When checked, the button will only appear when the mouse is within the distance specified in ‘Mouse Distance’. When unchecked, the buttons will always be visible.
Mouse Distance:
When the mouse is this distance away from the full screen button, the button will fade out. But when the mouse is within this distance of the button, the button fades in.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

Awesome Maps

Basic Setup

Awesome Maps comes with 2 separate stacks that are use together, a container stack and an inner stack.

Awesome Maps Container

The container stack is titled “Google Maps Container” and is the first stack that needs to be placed.

Awesome Maps Inner

The inner stack is titled “Google Maps Location” and is placed inside of the container stack. You can place as many of these as you like inside the container.

Finding Coordinates

I recommend the use of the web app MyGeoPosition.com though there are dozens of similar tools available on the web. I chose to use this as the way to create locations as it is much more accurate and allows users to change the location if an address/geo position tools is not accurate. At this website you can simply add your address/location and the Google API will provide you with the Latitude & Longitude of the location.

Be sure to set a Latitude & Longitude for every inner stack include a default one for the container stack.

Container Settings

General Options

Roadmap Customization : This option is only available for the Roadmap ‘Map Type’ and turning this on will remove the ‘Map Types’ drop down menu from the options. Turning this on will open the ‘Custom Title’ option (next option), but more significantly will create an option in the colors section at the bottom titled ‘Custom Map Colors,’ which allows you control over the maps various colors.

Custom Title : This is the text that will display in the top right of the map for your custom map unless the ‘Map Type Control On’ option is turned off (in the options below).

Map Types : There are 4 maps types in Google Maps. All of these are available and include Roadmap (default), Hybrid, Satellite, and Terrain.

Title Header Tag : You can set the location title to any header tag (1-6). h4 is the default.

Expanded Title : The header tag setting for the expanded title – by default the title that appears on the right hand side of the map.

Default Latitude : The latitude coordinates that are displayed when the map first loads. This should be the same as one of the latitude coordinates of one of the inner stacks.

Default Longitude : The longitude coordinates that are displayed when the map first loads. This should be the same as one of the longitude coordinates of one of the inner stacks.

Center on Click : This is turned off by default and locations will load on Hover. If this selected the locations will no longer load on hover, but rather when the user clicks the location title.

Pointer on Hover : If this box is checked the mouse marker will change to “pointer”/hand when hovering over the location.

Scrollwheel Zoom On : By default users can scroll in and out of the map using their mouses’ scroll wheel. Unchecking this box will remove that feature, though users can still zoom in/out using the manual controls.

Hide Description : Checking this box will remove the long description section.

Zoom : This controls the zoom level of the map (higher numbers zoom in more, lower numbers zoom out more).

Zoom on Click : This controls the zoom level if the user clicks on the location on the map.

Active Marker : By default the Google maps marker icon is used, though adding a new image in here will replace the marker to any other marker/image you wish to use.

Animate Icon (bounce) : Turning on this option will cause markers to quickly and subtly bounce (animate) into their location when the Title is hovered/selected.


Sizing & Spacing

Static Widths : By default widths are set to percentages for a responsive layout (adjusts to screen size). Changing this to static widths changes the measures to set pixel widths that will not adjust to screen size. List width refers to the location titles and small descriptions, Map width refers to the Google Maps section, Desc width refers to the Large description section.

Map Height : The height of your Google maps section – does not effect the height of other sections.

List … Pad : Places padding (space inside) depending on the position listed for the Title & Small description container. There are controls for top, right, bottom, left.

List … Marg : Places margin (space outside) spacing depending on the position listed for the Title & Small description container. There are controls for top, right, bottom, left.

Desc … Pad/Marg : Padding & Margin controls for the Large description area. There are controls for vertical (Vert) and horizontal (Horiz).


Colors & Styling

Active Title : Controls the color of the active title (hovered or clicked).

Transparency On : By default this is checked and by unchecking you can then add background color, border color, and border width to the List (title & small description) and Large description sections. Having this checked will not effect the ability to change the Map’s border width and color.

Title Tab Shadows On : Selecting this allows you to control the container shadow for the List (title & small description) section.

Desc Shadows On : Selecting this allows you to control the container shadow for the Large description section.

Map Shadows On : Selecting this allows you to control the container shadow for the Map section.

Custom Map Colors : This option is only available if ‘Roadmap Customization’ is selected (the very first checkbox). Activating this will allow you to change the colors for the map’s features including Highways, Arterial Roads, Local Roads, Water, Transit Lines, Transit Stations, Land (man made), Land (natural).


Controls Displayed

Pan Control On : Unselecting will remove circle with arrows (left, right, up, down) in the top left of the map.

Zoom Control On : Unselecting will remove the zoom control on the left side (has a plus and minus button and draggable slider).

Map Type Control On : Unselecting will remove the Map Type options located in the top right. If using a custom map design users can use this section to switch to default Google Maps, so you may wish to disable this in that circumstance or simply to make the map less busy.

Scale Control On : Unselecting will remove the scale icon in the bottom left just to the right of “Google.”

Street View Control : Unselecting will remove the icon in the top left with a person (allows for street view).

Overview Map Control On : Unselecting will remove the arrow icon in the bottom right.


Advanced

API Address : This is an advanced option and unlikely to be of use for most users. Their are text instruction above it that show the API Address that must be used if running Google Maps on a Secure Socket Layer (SSL).

  • http – maps.google.com
  • https – maps-api-ssl.google.com

API Key On : In most cases you do not need this option turned on and doing so simply allows Google to detect usage. If your map gets a ton of traffic Google may require you to pay fees depending on usage, but in most cases this is not necessary. For more details read Google’s Documentation here.

Key : This field appears only when the API Key On option is checked. You enter your key in the field and end it with the ‘&’ symbol – this is needed for other URL commands that follow the key.


Usage in Lightboxes

Many lightboxes (containers that pop up and typically everything behind them is dimmed) will append content outside of stacks causing duplicate API calls in Awesome Maps. To fix this all you need to do is break the call in Awesome Maps and then manually call in the API.

API Address

Locate the API Address field and delete everything inside.

Then manually call in the API by placing the following code into your Page Info > Header section:

1
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

Font Awesome

The Font Awesome stack is free and you can download it here.

Font Awesome is a stack that allows you to use Font Awesome icons on any Stacks page. This is simply a importing tool to activate the use of Font Awesome. Some themes already have Font Awesome built-in, in which case you won’t need to add this to the page.

Setup

Font Awesome Importer Stack

1. Drag Font Awesome onto the Stacks page anywhere (it won’t display in preview or when the site is published). This allows you to start using Font Awesome.

Snippet File

2. Drag the Font Awesome snippet (or copy and paste it from below) into any text or html stack. Then change the class fa-medkit to any Font Awesome icon class name you wish to use – see full list here.

<i class="fa fa-medkit"></i>

 

Important Note: Pay close attention to the quotation symbols. RapidWeaver’s auto formatting will sometimes change straight quotation symbols into curly ones . Curly quotes do not work inside HTML code. In order to replace the curly quotes with the correct straight quotes you can select and delete them and then retype them in. Alternatively, whenever you select all of the code and apply Ignore Formatting to HTML code it will automatically change the curly quotes to straight quotes.

ignore formatting

Adjust Icon Size

To change the size of the icon you can use the code below, just adjust the font-size px value.

<i style="font-size:16px" class="fa fa-medkit"></i>

Note: Don’t forget to check to make sure your quotation marks are straight and not curly as mentioned in the Setup note above.

Add an HTML link

If you would like to add a link to the icon, you can use the code from below. In addition to changing the icon class name, you will just need to place the URL you want to link to in the href value.

<a href="http://yourlinkhere.com"><i style="font-size:16px" class="fa fa-medkit"></i></a>

Note: Don’t forget to check to make sure your quotation marks are straight and not curly as mentioned in the Setup note above.

Quotation Mark Issue Example

There is a common issue caused by RapidWeaver’s auto-formatting where quotation marks are changed.

RW Auto Formatting Quotations

In the gif above you’ll notice how the quotation mark on the right hand side is straight at first, but then when the letters next to it are changed, it turns into a curly quotation mark (even though Ignore Formatting has been enabled).

As mentioned before, in order to replace the curly quotes with the correct straight quotes you can select and delete them and then retype them in. Alternatively, whenever you select all of the code and apply Ignore Formatting (Keyboard Shortcut: cmd  . )to HTML code it will automatically change the curly quotes to straight quotes.

 

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

Parallax Flight 2

How To Setup Parallax Flight and Parallax Flight 2

Step 1: Create a new Stacks page.

Screen Shot 2013-11-14 at 2.34.52 PM

Step 2: If you want to create a one page site with the included Theme Wrap Stack, drag and drop the stack into your editor. This will overwrite the theme you have selected. (If you just want to use the standalone stack inside of another theme skip to step 4)

Parallax Flight wrap

Step 3: You can now adjust some of the settings for the theme. Leave your mouse pointer over a setting to get a description of what it does.

Step 4: Drag and drop Parallax Flight or Parallax Flight 2 into the Theme Wrap Stack or into the editor if you are not using the Theme Wrap Stack.

Screen Shot 2013-11-14 at 2.35.41 PM
Parallax Flight Container

Step 5: Add any content or other stacks into the Parallax Flight section. If you do not wish to add content, you can use the “Y Padding” Setting to adjust the vertical size of the stack. In the example below I have added a 3 column stack with text in the right column.

Step 6: Select Parallax Flight to begin adding your background images. Locate the image or images you would like to use as a background.

Step 7: (Parallax Flight 2) Drag and drop your images into the Background and Foreground sections (Foreground images need to be PNG files with transparent parts, the Foreground image is optional). You can now adjust the start and stop positions of your background, foreground, and content sections. Each of the three sections have x and y values for start and stop. You can enter any value followed by “px” (pixel) do not leave any spaces between the number and “px” (Example: 340px). These input fields also accept the value “center”. This allows the images to be horizontally or vertically centered, however the start and stop position must both have the value “center” for it to work (Example: Start x = center start y = 0px, Stop x = center stop y = 600px). If you need help visualizing where the images will be at start and stop use the Preview Option.

Screen Shot 2014-10-16 at 2.47.42 PM

The “Fixed” checkbox will ignore your start and stop values and force the image to be fixed position while the page is scrolled (Note: This option is not compatible with mobile devices).

The “Repeat” Checkbox will make your image repeat in all directions, this is useful if you are using an pattern image.

Step 7: (Parallax Flight) Drag and drop your images into the Background and Foreground sections (Foreground images need to be PNG files with transparent parts, the Foreground image is optional). You can now adjust the scroll speed of each image. Set a pixel value equal to how far you would like the image to move as a visitor scrolls down your page. If you set the value to 300px, the image will move once it is visible in the browser window until it has moved 300px by the time the stack is no longer visible in the window. If you are creating a landscape, you want the objects that are supposed to appear farther away to scroll slower that things that are closer, the lower your pixel value the slower your image will move. I recommend adding padding to the top and bottom of the Parallax Stack using the “Y Padding” slider. This will increase the view-port of the background images you have added. If you are using a pattern click on the pattern checkbox to have the image repeat. You can also reverse the direction of the scroll by selecting the Reverse option.

Screen Shot 2013-11-14 at 2.49.09 PM

 

Those who are not using the Theme Wrap stack can enable the “Force Full Width” option to make the stack fit the width of the browser window. *This may not be compatible with all themes

Optional: (Parallax Flight) You can adjust the start and ending positions of the Stacks you add to Parallax Flight in x and y values. In the example below I have set the start y position of the content to negative 1000px. This will cause the content to be 1000px to the left of the browser window and will not be visible at first. Since I have not adjusted the ending position the content will slide in to view as the visitor scrolls down the website.

Screen Shot 2013-11-14 at 2.54.15 PM

Step 9: If you preview your page at this point you will notice that the parallax is set up but the site does not have enough content for you to scroll. If you can’t scroll then the parallax effect is lost.

So we need to create more Parallax Flight sections to make our page longer. I recommend adding padding to the tops and bottoms of each section you add to help give your page length.

If you are using the Page Wrap Stack it is important for you to make sure each new section is inside of a new Parallax Flight Stack. This will allow the theme to locate where to scroll when users click on the navigation buttons.

Parallax Flight Wrap
> Parallax Flight
>    Content and other Stacks
> Parallax Flight
>    Content and other Stacks
> Parallax Flight
>    Content and other Stacks
> Parallax Flight
>    Content and other Stacks

For sections that you do not want to have a parallax background, use the background option to give it a solid color.

Screen Shot 2013-11-14 at 2.52.41 PM

Step 10: After you have added enough sections, you can preview the site and adjust settings until you get your desired look. If you are using the Theme Wrap Stack your navigation items will automatically link to your Parallax Stack sections in order. You can change the titles of each section by selecting them in the editor.

Additional Options (Parallax Flight 2)

Start Point Most of the time you will want to leave this option on default. This option is only for when Parallax Flight is visible when the site is loaded (Its located at the top of your page). By default Parallax Flight starts to animate as soon as the top of the image enters into the browser window, but since the image is already in the window on load, the animation will start half way through. So if Parallax Flight is at the top of your site set the Start Point to “Top”. If it is not at the top of the site but still visible on load you can select “Center”.

Loading Color This color options lets you set the color of the background. This color will only display while the images load and fades out after Parallax Flight has finished loading.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

ourGlass

Setup:

    1. Drag the ourGlass stack onto your page.

      ourGlass Stack Rapidweaver

    1. Drag any of the preload stacks (or whatever you’d like to display while the content is loading) into the “Loading Animation” area.

      ourGlass Stack Rapidweaver

    1. Drag and drop the content to be loaded into the “Content” area, it can be text, images, stacks, etc…

      ourGlass Stack Rapidweaver

    1. Choose between Hide/Show to instantly display content when it’s ready, or Fade In/Fade Out to transition the preloaded out and the content in smoothly, rather than suddenly.

      ourGlass Stack Rapidweaver

    1. Hide Loading Animation will only make changes inside of Stack’s edit mode, it won’t change anything in preview mode, or once your site is live on a server. If you’re using a lot of animations, edit mode may get bogged down by it so “Hide Loading Animation” will help to make Stacks run a little faster.

 

  1. Most of the customization options will be found in the preload stack.

Definition of terms:

Most of the preload stacks have size, colors, and reverse:

ourGlass Stack Rapidweaver

Size:

Controls the width and height in pixels, different preload stacks have different minimum and maximum sizes available.

Colors:

Each preload stack has a different # of colors to control. They all use Rapidweaver’s built in color picker.

Reverse Animation:

Some preload stacks spin, others move top to bottom, whatever the case, checking this box reverses the animation direction. So spinning clockwise would become spinning counter-clockwise if this box is checked.

Some of the preload stacks have special controls not found in the others:

ourGlass Stack Rapidweaver
ourGlass Stack Rapidweaver

Thickness:

Found in preloadGyro and preloadPlus. Controls the width of the circle’s borders in Gyro, and the width of the lines in Plus.

# of Circles:

Found in preloadGyro. Choose between 0-50 circles spinning around in random directions.

Select Animation:

Found in preloadRetro. Choose between three different spinner animations within one stack.

One:

ourGlass Stack Rapidweaver

Two:

ourGlass Stack Rapidweaver

Three:

ourGlass Stack Rapidweaver

Tips and Tricks:

  1. You can use one ourGlass stack for each image or content section to load individual sections independently of each other.
  2. Or try putting all of your page’s content into one ourGlass stack to have all of your content load at once.
  3. Put text describing an image into the “Loading Animation” section, and an image into the “Content” section. This way if an image is large or taking a while to load, the user can see a description while the image finishes loading.
  4. Use a custom gif or other animation in the “Loading Animation” section.

Changelog

v1.2.0 (April 29, 2014)

  • Customization option for minimum fade out duration added
  • Customization option to delay duration before fade animation added
  • Individual animations are now re-grouped under “1LD Stacks – ourGlass Animations” (these are updated under the individual animations)

v1.1.1

  • Solved Several Theme Conflicts
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

Ice Box

Here is a customer review/tutorial on Ice Box by William Winter

Basic Use

Place the Ice Box Container to open a new Ice Box section.

Note that if you want more than one instance of Ice Box to run on a page a single container must wrap around all of the inner Ice Box stacks (you cannot have two separate containers).

Ice Box Container

Place the Ice Box Inner inside the container. Place additional inner pieces for every individual picture.

Ice Box Inner

For all general customization options and fade control options select the container. For inner controls (i.e. Thumbnail image, Large image, Alt tags, description) select the individual inner container. If you’re not sure what a customization options does please use the following definition of terms.

Definition of Terms

General Options

  • Link Images: Active by default this option causes images to connect with each other in order so that the navigation images will work. If disabled the navigation icons are removed.
  • Vache: Active by default this option allows users to click anywhere outside of the image to exit. If you place no Exit/Close icon then users can still exit easily, but if this option is disabled it’s best to include an Exit/Close icon.
  • Overlay Opacity: This sets the opacity of the overlay (background color that appears behind the image). 1.0 will remove any transparency, where 0 will make it completely transparent.
  • Overlay Color: This sets the color of the background color that appears behind the image and in front of the rest of the web page.
  • Text: This sets the color of the text that appears for each individual image (description and number order).
  • Left Image: The left arrow navigation icon (note that this will not appear if it is the first image).
  • Right Image: The right arrow navigation icon (note that this will not appear if it is the last image).
  • Close Image: The close image located in the top left of the image (not entirely necessary when Vache is active).
  • Loading Image: The loading image which displays if the image is loading.

Fade Durations

  • Fade in Overlay: Controls the fade in speed (millaseconds) for the Overlay (background color behind the image).
  • Fade in Image: Controls the fade in image speed (millaseconds) for the image(s).
  • Fade Out Image: Controls the fade out image speed (millaseconds) for image(s) most noticeable when transitioning between images.

Inner Controls

  • Thumbnail: This is the smaller thumbnail image that is displayed to the user before being clicked on.
  • Large Image: This is the larger image that appears after the thumbnail has been clicked on.
  • Description: This is the text that displays below the larger image (field does accept HTML).
  • Image Alt Tag: This is the alternate text that is available for the image and is primarily added only for SEO purposes.
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

Icon Connect

General Controls of Icon Connect 

Number of icon to choose from.

select from 1 -4 icons to have displayed.

Icon numbers


Hover effects:

selected from the 7 hover effects.

iconConnect Hover

 


Alignment Setting:

select from Left,middle and right.

icon Connect Alignment

 


Icon setup

Preset icons:

Select from the 25 different icons. The icons are setup in order from 1-4.

Screen Shot 2013-10-04 at 12.05.48 PM

 

Links will be entered in the URL:

enter the link in where it says “Enter Link Here”. Link you social media sites or any other site.

URL

 

Custom Icons:

Select the custom icon setting then select the icon from you computer.

Custom Icon

Changelog

v2.2.1 (April 28, 2014)

  • Added option to open links in new window

v2.2.0

  • gutter control
  • size control
  • newly vectored icons
  • coin flip effect
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

cleanBinders

Adding Font Awesome to Individual Binder Tabs

If you prefer not to add the same Font Awesome icon to all the Binder Tabs, but prefer to assign unique icons to each individual tab then do not select “Font Awesome On” in the customization options, but rather manually install Font Awesome and insert into the Binder Tabs manually (the next 2 steps).

Step 1. Install Font Awesome as outline in this tutorial.

Step 2. For step 5 place the HTML code inside the Binder Tabs text.

Definition of Terms

General Controls

  • Theme: Folder Tabs, Detached Tabs, Contained Tabs, Minimalist Thin. Controls the general theme/look of the stack. Depending on the selected theme some options may not be available or may not have an effect.
  • Binder Tab Width: Default, Small, Large, Largest. Controls the size of the tabs in comparison to the main content area, so the large setting will create a larger tab, but respectfully a smaller content area.
  • Font Awesome On. If turned on you will activate font awesome’s use in the stack’s tabs, though Font Awesome must be installed separately. A tutorial on how to install Font Awesome can be found here.
    • Right Side. This option places the Font Awesome Icon on the right hand side instead of the default left.
    • Font Awesome: Use this field to select the Font Awesome Icon, you can ignore the ‘icon-‘ part.
  • Tabs on Right Side. Turning this on will move the tabs to the right hand side instead of their default placement on the left.
  • Tab Text on Right Side. By default the text is aligned to the left, though selecting this option will have the text align to the right.
  • Tab Count: By default is 4, though can range from 1 – 20.
  • Tab Font Size. Controls the pixel size of the tab font.
  • Content Font Size. Controls the pixel size of the content font.
  • Border Radius. Controls the roundness of the corners (zero turns it off)
  • Tab Margin. Controls the spacing between the tabs.
  • Tab Line Height. Controls the size of the line height in the tabs.
  • Animate On. If this option is active you can control the next option, which is the speed of the animation. Otherwise, tab content will be displayed immediately on click with no animation.
    • Animation Speed: Normal, Slow, Fast. Basic speed options (Normal = 400 millaseconds (ms), Flow = 600ms, Fast = 200ms).
  • Static Height On. This option allows the user to control a set height for the stack. Otherwise, the height will adjust depending on the content.
    • Static Height: Sets the pixel height of the stack.

Background Color Controls

  • Tab Gradient On. Turns the gradient colors and controls on.
    • Gradient Fade Out. Controls the percentage the gradient ranges across the tab.
  • Tab Transparency. Turns the background color off for the tabs.
  • Content Transparency. Turns the background color off for the content area.
  • Main Background. Background color for the main content area and the active tab in the ‘Folder Tabs’ theme.
  • Active Tab. Not available for the ‘Folder Tabs’ theme, this sets the color of the active tab. This option has no effect when the gradient is turned on.
  • Active Tab Hover. Not available for the ‘Folder Tabs’ theme, this sets the color of the active tab when hovered over. This option has no effect when the gradient is turned on.
  • Inactive Tab. Background color for any/all inactive tabs.
  • Inactive Tab Hov. Background color when inactive tabs are hovered over.
  • Active Gradient. The gradient color for the active tab.
  • Inactive Gradient. The gradient color for the inactive tabs.
  • Active Tab Fade. The color the gradient fades into for the active tab.
  • Inactive Tab Fade. The color the gradient fades into for the inactive tabs.

Border Color Controls

  • Border Transparency. Turns the borders off.
  • Subtle Tab Embed On. Turns on the inner border that has a slight ’embed’ appearance to it. The color option that is made available when this is turned on will not have any effect in the ‘Folder Tabs’ theme (uses background color from the content section).
  • Main Border. Sets the color for the main border of the stack.
  • Inactive. Sets the border color for inactive tabs.
  • Inactive Hover. Sets the border color for inactive tabs when hovered over.
  • Embed Color. Sets the subtle embed color for the ‘Contained’ & ‘Detatched’ Tab themes.

Text Color Controls

  • Inherit Text Styling. Turns styling for text in this stack off.
  • Inherit Link Styling. Turns styling for links in this stack off.
  • Active Tab Text. Color for the text inside the active tab
  • A Tab (Hover). Color for the text inside the active tab when hovered over.
  • Inactive Tab Text. Color for the text inside inactive tabs.
  • I Text Hover. Color for the text inside inactive tabs when hovered over.
  • Content Color. Color of text in the content section.
  • Content Links. Color of links inside the content section.
  • C Links Hover. Color of the links inside the content section when hovered over.

Advanced

  • Collapsible. If selected this makes the content section able to be completely collapsed. Otherwise, one tab must always be active.
  • 1st Active Tab. By default this is set to the first tab, though if you prefer to have a tab other than the first active when the page is loaded you can change it to any of the others.
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

Parallax Orbit

Tips and Tricks:

Introduction:

Parallax Orbit was coded very efficiently to reduce the amount of work the browser needs to do.
But when you’re dealing with multiple images, javaScript can’t make the images load faster.
Here are some tips for using Parallax Orbit, as well as improving performance.

(for a definition of terms, scroll down to ‘General Controls’)

1. Resizing images with Photoshop

Once you have your image in photoshop, go to Image>>Image Size.

Parallax Orbit RapidWeaver Stack

Resize Image

A window will pop up that looks like this:

Parallax Orbit RapidWeaver Stack

Resize Image Window

First, make sure that you have the link selected:

Parallax Orbit RapidWeaver Stack

Selected

Parallax Orbit RapidWeaver Stack

Not Selected

This ensures that the aspect ratio is maintained while resizing.
Change the size of the image with your desired unit of measurement (usually pixels).
If you’re making the image smaller, then under ‘Resample:’ select ‘Bicubic Sharper (reduction)’.
I don’t recommend making the image larger, as this can significantly reduce image quality.
Click OK to resize the image.

2. Saving images with Photoshop

Once you have your image in photoshop, go to File>>Save For Web.

Parallax Orbit RapidWeaver Stack

Save for Web

Next, a window will pop up that looks like this:

Parallax Orbit RapidWeaver Stack

Save for Web Window

We want to select PNG-24, this is higher quality than jpeg but it loads faster as well.
If your image has transparency, then check the ‘transparency’ checkbox.
Interlaced means that when someone views your page, they’ll see a blurry image at first, and as it loads it will become higher resolution. Rather than loading from top to bottom. I recommend checking this box.
You can leave ‘Embed Color Profile’ unchecked.
Make sure that ‘Convert to sRGB’ is checked. it should be by default.
Under ‘Metadata’, select none.
Last, click ‘Save…’ at the bottom and choose a directory to save it to.

3. Big-Medium-Small Images

Parallax Orbit automatically uses whatever images are available, and ignores blank images.

Parallax Orbit RapidWeaver Stack

(NOTE: I have customized my Rapidweaver, so it may look slightly different)

So you can add a ‘Big Image’, but leave medium and small empty, and it will automatically use the ‘Big Image’ for all screens.

4. Layering Transparent images

In a Rapidweaver Stacks page, simply drag and drop the Parallax Orbit Stack onto your page (doesn’t matter where).

Parallax Orbit RapidWeaver Stack

Icon

Next, Drag another Parallax Orbit Stack onto your page.

Parallax Orbit RapidWeaver Stack

Edit Mode, Right Order

(NOTE: The Moon is above the background.)

Now let’s get the settings right for each stack:

Parallax Orbit RapidWeaver Stack

Settings

Since we have the Moon Image above the Stary Background, we will get the desired result in preview mode:

Parallax Orbit RapidWeaver Stack

Preview Mode, Right Order

If we reverse the order in edit mode, so that the background image is above the moon image:

Parallax Orbit RapidWeaver Stack

Edit Mode, Wrong Order

Then we get the following result in preview mode:

Parallax Orbit RapidWeaver Stack

Preview Mode, Wrong Order

So when one stack is placed above another in edit mode, it will also be placed in front of the other stack in preview mode.


General Controls:

Big Image:

Loads a large image for large displays.
(any full screen images should be at least 2000px wide in order not to show the edges of the image)

Medium Image:

Loads a medium image for Screens between 650px-1024px wide.
(any full screen images should be at least 1500px wide in order not to show the edges of the image)

Small Image:

Loads a small image for Screens smaller than 650px wide.
(any full screen images should be at least 1000px wide in order not to show the edges of the image)

Speed:

Controls how fast the image moves relative to the tilt/mouse position. The higher the number, the faster it moves. To prevent any image movement, set at 0.


Advanced Controls:

Full Screen:

Ensures that the image is always wide enough to cover the screen.
(this will stretch images that are too small to be full screen)

Tile the Images:

This will repeat the image in the x and y directions. This is useful for patterns and textures.

Invert X Direction:

When checked, moving the mouse to the Right will move the image to the Left and moving the mouse to the Left will move the image to the Right.
When NOT checked, moving the mouse to the Right will move the image to the Right and moving the mouse to the Left will move the image to the Left.
(Recommended to be checked in most cases)

Invert Y Direction:

When checked, moving the mouse Up will move the image Down and moving the mouse Down will move the image Up.
When NOT checked, moving the mouse Up will move the image Up and moving the mouse Down will move the image Down.
(Recommended to be checked in most cases)

X axis +:

This allows you to offset the image on the X axis in pixels. So positive numbers offset the image to the Right, and negative numbers offset the image to the Left.

Y axis +:

This allows you to offset the image on the Y axis in pixels. So positive numbers offset the image Down, and negative numbers offset the image Up.

Hide Images in Edit-Mode:

This setting hides the images in Edit mode in Rapidweaver, but has no affect on the way your page looks in preview mode, or live on a server.
Hiding the images can improve performance when editing a page with lots of content.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

cleanSearch

A Brief Overview:

cleanSearch is actually two stacks that work together. The first is the search bar. It contains all of the customization options, and controls the text input field, as well as an icon, and the drop-down suggestions. The second is the content area, this is what the stack searches through to find matches with the entered text.

Getting Started:

1. Drag and drop the search bar stack and the search content stack on your page, be sure not to place the search bar inside of the content area. You can place each stack anywhere on your page, they don’t need to be next to eachother.

2. Next, place the content that you want to be searchable, inside of the content area. cleanSearch treats nested elements and stacks as one single item. So if you put Stack A inside of Stack B, it will treat Stack A as a part of Stack B. If you want Stack A and Stack B to be individual items, place them each within the content area, but not within another stack or with one inside of the other.

Here’s a visual representation:
cleanTut-01a

3. Select the search bar stack, in the customization options, go to ‘CleanSearch – Icon Styles’ and make sure that the box at the top titled ‘icon on’ is checked (it should be checked by default). Once this box is checked, you will see an area at the top of the stack in preview mode under ‘Icon:’ where it is possible to drag and drop stacks. You can either use images, text, or other stacks to display an icon next to the search bar. In the preview page for this stack, I am using a font awesome icon:
<i class=”icon-search”></i>
which looks like this –
if you want to use font awesome, your theme must support it. Azgard, the theme I used for my preview page, comes with font awesome built in. For more about font-awesome go here.

4. Now you can start customizing and designing this stack to fit the theme of your page! it’s a simple set-up, but it can accomplish some pretty incredible results.


Definition of Terms:

CleanSearch – General Controls

display text:

The text that you type in here will be displayed
inside the search bar until you start typing. If
you don’t want it to display anything, insert a
space. Rapidweaver wont let you leave the field
empty.

max-width:

The width of the search bar is set to 100%, but you can set the maximum width in pixels. So if the page scales smaller, the search bar will resize to fit, but it wont go larger than the amount you set.

height:

Sets the height of the search bar in pixels.


CleanSearch – Advanced Controls

limit characters/max characters:

Sets the total number of characters aloud to be entered into the search bar. This can be turned off by unchecking the ‘limit characters’ check box.

ignore capitals:

If checked, the search will treat upper-case, and lower-case letters the same. So ‘cLeaN SEArcH’ is the same as ‘cleanSeArCh’. However, if this is unchecked, it will pay attention to the case of each letter. So if you type ‘cleanSearch’ it will not recognize ‘CLEANsearch’ as a valid match.

center text:

this will center the text within the search bar section of this stack.

search options:

Rearrange will move the most relevant matches to the top, and the least relevant to the bottom, as you type. Hide/Show will hide all irrelevant elements, and show all matches.


CleanSearch – Auto Complete

auto-complete:

Checking this will allow you to create a list of words to suggest as the user types. The drop down list will only suggest the words/phrases that match what the user types.

suggestions:

Enter all possible words and/or phrases that you would like to suggest to users who search your page. Add these as a comma separated list. Here are some examples:

1. products, about us, blog, blog-posts, magic, pizza
2. products,about us,blog,blog-posts,magic,pizza
3. products , about us , blog , blog-posts , magic , pizza

It will automatically eliminate extra spaces next to commas, but it wont get rid of spaces in between words.


CleanSearch – Font Styles

font-size:

This will control the font within the search bar.

font-color:

This controls the color of the text that users type.

display-color:

This controls the color of the text that is displayed before the user types in the search bar.


CleanSearch – Icon Styles

icon on:

This gives you the ability to add an icon to the left or right of the search bar. You can either use an image, text, or other stacks as the icon.

icon-position:

Choose to display the icon either on the left or right side of the search bar.

icon-width:

Choose how wide you want the icon area to be. Be sure that whatever text, images, or stacks you use for the icon either fit within the icon area, or are responsive. Choosing an icon width of 50px, with an image that is 100px wide will result in the image being cut off.


CleanSearch – Search Bar Styles

background color:

Change the background color of the search bar(text input area) with Rapidweaver’s native color picker.

border color:

Change the border color of the search bar(text input area) with Rapidweaver’s native color picker.

border width:

Change the border width in pixels, or leave at 0 for no border.

rounded corners:

round the corners of the search bar in pixels, or leave at 0 for sharp 90degree corners.


CleanSearch – Auto Complete Styles

Note: If you have auto-complete turned off, these styles will not do anything.

drop down styles:

If checked, the below styles will take effect. If left unchecked, no styles will be applied to the drop down menu, and the theme’s defaults will take over.


These styles are for the auto-complete drop down menu.

background:

Change the background color of the drop down menu(containing the suggestion words/phrases) with Rapidweaver’s native color picker.

border:

Change the border color of the drop down menu(containing the suggestion words/phrases) with Rapidweaver’s native color picker.

border width:

Change the border width in pixels, or leave at 0 for no border.


These styles are for the items within the auto-complete drop down menu.

item font:

Change the font color of the drop down menu items with Rapidweaver’s native color picker.

border:

Change the border color for each of the drop down menu items with Rapidweaver’s native color picker.

border width:

Change the border width in pixels, or leave at 0 for no border.

item font-size:

Control the font-size in pixels for each of the drop down menu items.


These styles are for the active(selected) items within the auto-complete drop down menu.

active font:

Change the font color of the active(selected) drop down menu item with Rapidweaver’s native color picker.

border:

Change the border color for the active(selected) drop down menu item with Rapidweaver’s native color picker.

border width:

Change the border width in pixels for the active(selected) item, or leave at 0 for no border.

item font-size:

Control the font-size in pixels for the active(selected) drop down menu item.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

Phantom

How to Setup Phantom (Version 3.0.0)

Screen Shot 2016-02-12 at 12.46.49 PM

1. Before adding Phantom to your stacks page, you must first add the included Font-Awesome Stack to any spot on the stacks page (this stack is only visible in edit mode and enables the Font Awesome icon library). The container stack, simply titled ‘Phantom’,  can then be placed into the stack’s editor wherever you would like it to display.

Note: For some reason, RapidWeaver’s Edit mode has trouble loading in images in when changes are made. When using the Knob/Dial version of Phantom, sometimes the knob graphics will not display properly while in edit mode only. If this happens, you must switch to preview mode to get a look at how the knob and background panel will appear.

font awesome stack

2. In Phantom’s settings panel navigate to the section titled “Titles & Icons” (If you are not using the Knob/Dial mode, the title and icons are found in the Phantom stack itself in the stacks editor). You will see default titles and icons for each of the seven categories (arranged by their position on the knob’s background panel). You can change the titles to whatever you would like (spaces between words are allowed, for example “My Favorites”). To change the icons just replace the default icon classnames with the classnames of the Font Awesome icons you want to use. Font Awesome classnames can be found at http://fontawesome.io/icons. Example:  To use the “bus” icon you would type “bus” into the Icon field.

Screen Shot 2016-02-12 at 12.57.48 PM

3. Now you can add your sortable content using the Phantom Element stack. This stack is placed inside the “Drop stacks here” section of the Phantom stack. Once you have added your first element stack, go to the settings panel. In the field labeled “Title” you will see the default value “All”. This means that whatever content is placed inside this element stack will display for every category, no matter which one is selected. However, in my example I want this element to only display when the “Info” titled category is selected, so I would replace “All” with “Info”. Lets say I also want this element to display when the “Featured” category is selected so I would add a comma and type “Featured” (do not leave any spaces between the words and commas).

Screen Shot 2016-02-12 at 1.13.01 PM

4. You will also see a field titled “Sort Order” in the settings panel of the Phantom Element stack. This will allow you to sort your elements in descending order (Higher numbers will display first). By default this field has a date format  in case you wanted to sort by date, this can be removed however and replaced by a simple numbering system. Under that option you have a width setting. You can either declare a specific pixel width or enable “Percentage Width”.

Note: If you enable the percentage width option you will need to select the Phantom stack and in its settings panel under the heading “Advanced Settings” enable “Percentage Mode”. This will then allow you to choose between two modes titled “Fourths” and “Thirds”. If you are using the widths 100%, 75%, 50%, and 25% you will need to use the “Fourths” mode. If you use the 100%, 66%, and 33% widths you will need to use the “Thirds” mode. These modes help Phantom keep your elements aligned and sorted correctly in the “masonry” effect. You should not mix pixel width elements (300px for example) with percentage width elements inside the same Phantom stack. Phantom may have trouble calculating the positions of the elements for the “masonry” effect.

5. Repeat steps 3 & 4 until you have added all the content you wish to add.

Definition of Terms

Knob/Dial – Turned on by default, the Knob/Dial is an animated graphic menu that is useful for creating one page websites with a unique loading effect. You can us the buttons mode by disabling this option. The buttons mode is more useful as a sorting section used inside of a page. Think of it as a responsive and animated tab-like layout section.

Knob/Dial Appearance:

  • Menu items: Choose to display 2-7 icons with sortable categories.
  • Dial/Knob: Choose a theme for the knob.
  • Background: Choose a theme for the knob’s background panel. The option “Custom/Inherit Default Background” will allow you to set your own color or pattern for the background panel. Just adjust Phantom’s “Background” Settings.

Screen Shot 2016-02-12 at 1.49.26 PM

  • Show Titles: Controls if text is shown in the sorting menu. This option is turned on by default, unchecking it will display only the icons.
  • Only On Hover: This option displays if Show Titles has been enabled. Turning this on will hide the titles and only show them when the mouse has hovered over the icon.
  • Font Size: Adjust the size of the titles.
  • Icon Size: Adjust the size of the icons.
  • Optional Logo: Allows you to add a logo image to the background panel.

Knob/Dial Off (button) Appearance:

  • Theme: These options switch the visual style of the navigation/sorting menu.
  • Alignments: this will allow you to align the buttons the left, right, or center.
  • Menu items: By default this is set to 3, but can range from 0 – 10.
  • X & Y Padding: These settings control how much space is inside the buttons.

Knob/Dial Colors:

  • Icons/Titles: Change the default color of the icons and titles. To adjust individual icon and title color see the section title “Changing icon colors” below.
  • Opacity: Sets a percentage opacity for the titles to allow them to blend with the background panel.
  • Active Color: The color of the bullet/dot when a category is active.
  • Hover Color: The color of the bullet/dot when a category is mouse hovered.
  • Enable Hover Color: If disabled, the bullets/dots will not highlight when hovered.
  • Colors Apply to Icons: If enabled, the bull