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 bullets/dots/ will no longer highlight, and the icons will instead.

Knob/Dial Off (button)  Colors:

  • Button: The color of the inactive buttons.
  • Active Button: The color of the button when a category is active.

Advanced Settings:

  • Secondary Phantom: Enable this option if you have more than one Phantom on a page. For the first Phantom stack placed on the page however, this option should be disabled because one needs to act as the primary stack. This helps reduce load times.
  • External Links: Set a link to any of the Knob/Dial categories to have that icon redirect to another page. Note: You may want to add a Phantom Element stack with a loading message linked to the category with a external link. When the icon/category is selected, Phantom will still sort the elements and the external link take time to load. 
  • Percentage Mode: This option will 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.
  • Responsive Settings:  Enabling this option will allow you to declare specific responsive breakpoints and allow you to set a max width for the overall content for those specific breakpoints. By default, when this option is disabled, the content width will fill the full width of wherever it is placed.

Inner Element Controls:

  • Title: This sets the title that matches the navigation menu title. The title is case sensitive. To set the inner element to multiple titles separate titles by a comma and do not include any spaces.
  • Width: This sets the container width of the inner element by pixels.
  • Percentage Width: This option will only have effect if the ‘Percentage Mode’ is selected in the Phantom stack .

Changing icon colors

Phantom comes with a CSS snippet (also found below) that you can use to change the colors of specific icons and titles. This snippet can be placed into the Page Inspector > HTML > CSS section if you want to apply the styles to a single page or inside the Settings > Code > Site-wide CSS section if you would like to apply the styles to the entire website.

/* Phantom Advanced CSS
Place this snippet in the Page Inspector > HTML > CSS section if you would like to modify a single page. If you would instead like to modify all pages together, place this snippet in the Settings > Code > Site-wide CSS section.
===============
SPECIFIC ICON COLORS
Use Hexadecimal Color Values. These values can be found in the Color Picker > Color Sliders > RGB Sliders section. The value will appear after you have selected the color you wish to use.
Example:
To change the first page’s icon color from red (#DC5350) to teal (#19979) you would change #icon-1’s “color: #DC5350;” to “color: #19979;”
================ */
.left-icon i {
  color: #FFFFFF !important;
}
.middle-left-icon i {
  color: #DC5350 !important;
}
.top-left-icon i {
  color: #F07B30 !important;
}
.top-icon i {
  color: #F9D246 !important;
}
.top-right-icon i {
  color: #5DB862 !important;
}
.middle-right-icon i {
  color: #3795CF !important;
}
.right-icon i {
  color: #842FC4 !important;
}
/* ===============
SPECIFIC Title COLORS
================ */
.left-icon div {
 color: #FFFFFF !important;
}
.middle-left-icon div {
 color: #DC5350 !important;
}
.top-left-icon div {
 color: #F07B30 !important;
}
.top-icon div {
 color: #F9D246 !important;
}
.top-right-icon div {
 color: #5DB862 !important;
}
.middle-right-icon div {
 color: #3795CF !important;
}
.right-icon div {
 color: #842FC4 !important;
}

How to use custom icons

1. Add your icon images to the Resources section of RapidWeaver and rename the files “custom1” all the way up to “custom10” if you are using 10 images.

Phantom Custom Icons

Step 2: Place each corresponding image name into the Icon Title box until you have linked each icon image to the correct Title.

Phantom Custom Icons

Step 3: Copy and paste the code below into the Page Inspector > Header > CSS section.

.fa-custom1 {
	background-image: url(%resource(custom1.png)%) !important;
}
.fa-custom2 {
	background-image: url(%resource(custom2.png)%) !important;
}
.fa-custom3 {
	background-image: url(%resource(custom3.png)%) !important;
}
.fa-custom4 {
	background-image: url(%resource(custom4.png)%) !important;
}
.fa-custom5 {
	background-image: url(%resource(custom5.png)%) !important;
}
.fa-custom6 {
	background-image: url(%resource(custom6.png)%) !important;
}
.fa-custom7 {
	background-image: url(%resource(custom7.png)%) !important;
}
.fa-custom8 {
	background-image: url(%resource(custom8.png)%) !important;
}
.fa-custom9 {
	background-image: url(%resource(custom9.png)%) !important;
}
.fa-custom10 {
	background-image: url(%resource(custom10.png)%) !important;
}

Phantom Custom Icons

Step 3: Double check that your files are named correctly (The name and the extension of each file is case sensitive). Preview and you are complete.

Note that this example assumes you are using png files. If you are using jpeg or jpg files you will need to edit the copy and paste code. Just change the .png extensions to match the file type you are using for the icons.

Example:

.fa-custom1 {
	background-image: url(%resource(custom1.jpeg)%) !important;
}
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

Augment Reflect

Definition of Terms

  • Opacity: Controls the transparency of the reflection (higher numbers is less transparency)
  • Distance: Controls the distance of the reflection

Changelog

v1.1.0 (February 7, 2014)

  • Image section changed to open stacks section (%slice%) so image stacks can be used (i.e. Lightboxes)

v1.0.3 (September 18, 2013)

  • New Icons
  • Group changed to ‘1LD Stacks’

v1.0.1 (August 16, 2013)

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

Pop Box

Setup

pop box content

There are four empty stack slots available when you add Pop Box to the editor. First you will want to place a stack into the “Target Stack” slot. This stack can be text, button stack, or anything else. When a user clicks on this stack the pop up window/box will display.

After you have set up the target stack, you can then start to add content in the remaining three slots. A demonstration of what the pop up window/box will display at the top in edit mode, however you will want to switch to preview mode to get an idea of what it will look like with your added content.

Options

Initialization Options

Initialize – Choose to have the pop up appear after the target stack has been clicked or automatically after a defined amount of time has elapsed.

Style Options

Pop Box Theme – Choose between 6 different themes that change the appearance of the pop up window/box.

Use Percentage Widths – Enable this to have the width of the pop up window/box be declared as a percentage instead of a pixel value.

Outer Padding – This adjusts the space to the inside parameter of the entire pop up window/box.

Inner Padding – This adjusts the space between the Header, Main, and Footer sections.

Border Radius – Use this slider to add rounded corners to the pop up window/box. Note: You must have the Header and Footer enabled for the rounded corners to display.

Border Thickness – Use this slider to add a border around the pop up window/box.

Header On – Disable this option to hide the header for the pop up window/box.

Footer On – Disable this option to hide the footer for the pop up window/box.

Z-index – You can adjust this number to a higher or lower value if you have issues with theme or stack and the pop up is displaying below or above something it should not be.

Close Button – Choose from three different methods (icon, image, text) for visitor