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 visitors to close the pop up window/box.

Close On Background Click – When this option is enabled, users can click on the background behind the pop up window/box to close it. If disabled, users must use the close button method you have selected above or the pop up will not close. Note: The escape key will always close the pop up window/box regardless if this option is enabled or not. This is to prevent the user from getting stuck with the pop up open and unable to figure out any other way to close it.

Responsive Options

Tablet Break – If the browser window width is less than this value, the pop up window/box will use the defined tablet width and height.

Tablet Width – Define the width of the pop up window/box for tablet sized browser windows.

Tablet Height – Define the height of the pop up window/box for tablet sized browser windows.

Mobile Break – If the browser window width is less than this value, the pop up window/box will use the defined mobile width and height.

Mobile Width – Define the width of the pop up window/box for mobile sized browser windows.

Mobile Height – Define the height of the pop up window/box for mobile sized browser windows.

Edit mode Display Issue when upgrading old versions to 3.0.0+

An update to the way the stack handles the close button can cause a display error in edit mode for some users. If Pop Box’s content is non selectable in edit mode it’s possible the “Close Button” value has been reset. This can be remedied by choosing a new value and switching it back to the value you want to use.

close button reset

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

Simple Position

Go to Simple Headers Pro

Definition of Terms

  • Position: Relative, Absolute, Fixed. Absolutely positioned elements will display as they relate to Relatively positioned elements. Fixed elements will display outside of all elements.
  • Vertical Position: Top, Bottom. Places the object in the vertical starting point – the distance is then controlled with the values below.
  • Horizontal Position: Left, Right. Places the object in the horizontal starting point – the distance is then controlled with the values below.
  • Vertical Value & Horizontal Value. The pixel distance from the vertical and horizontal positions selected.
  • Z Index. The Z plane value, which is an arbitrary value only weighted according to other Z Indexes and controls the distance above/below other absolutely or fixed elements.
  • Control Size. Width and Height are inherited by default, though you can control these further by selecting the checkbox as shown on the right.
  • Width & Height. These are pixel values for the element and only work if the Control Size option is selected.

Changelog

v1.0.1 (October 29, 2013)

  • Grouping changed back to ‘1LD Stacks’
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

Facebook Connect

Adding a Moderator (comments)

Step 1:

Install the snippet provided with this stack in the Inspector > Header > Header section. Then close and restart rapidweaver.

Facebook Snippet Head Location

Step 2:

Next, open up your snippets by clicking snippets here:

RapidWeaver 6 Snippets

This will bring up another pop up window that looks like this:

Facebook Connect Snippet

Step 3:

Drag the “facebookConnect – Admin” snippet over into the header as seen in the screenshot in Step 1.

Step 4:

Now we need to replace “FACEBOOK USER ID” with your actual user ID. I’ve built a tool for finding your Facebook User ID here: Facebook ID Tool.

If you are logged into Facebook, it will automatically show you your user id. If not, it will prompt you to login, but if you don’t log in, you can still type in your Facebook username (or someone else’s) to get the user ID. There are also instructions on the actual site.

Step 5:

Now just copy and paste your Facebook User ID into the snippet, and it should look something like this:
<meta property=”fb:admins” content=”1234567890″/>

Comments

Comments remain on whatever page your assign them too and can be removed by moderators. If commenters select the “Show on Facebook page” checkbox and make a comment it will only appear on their personal page and not on your Facebook page.

Theme:

Light or Dark theme available. This changes the background color and text color of your Facebook comments section.

URL:

This should be the URL for the site that the comments stack will be on. So for instance, if there were a facebookConnect comment stack on this page, the URL would be – http://forum.onelittledesigner.com/tutorials/kb/facebook-connect

Sort Posts By:

Chronological and reverse Chronological will display the comments in the order they were submitted and reverse order, respectively. Social will boost comments that have more likes and replies to the top.

Show # of Posts:

This option controls the number of comments that are displayed when the page first loads, then at the bottom there will be a button for viewing more comments.

Max-Width:

Allows you to define a maximum width for this stack. If left empty, it will always scale to 100% of the width of it’s containing element.

Buttons

Like, Send, and Follow Button Check Boxes:

Checking a box will show the button, and leaving a box unchecked will remove that button from the page.

Like/Send URL:

This should be the URL of the page that the stack is on, as this will cause them to like and/or send your actual website.

Follow URL:

This should be the URL of your own personal Facebook profile page. Business pages to not support the “follow” feature, only personal Facebook pages. You must turn on the ability for people to follow you @www.facebook.com/about/follow.

Theme:

Light or Dark theme available. This changes the background color and text color of your Facebook buttons.

Show Faces:

Checking the box will show your friends profile pictures who have liked or followed this page. Leaving it unchecked will only display text with no images for your buttons.

Layout:

Layouts include Standard, Button Count & Box Count. Each have a slightly unique look to them and take up different amounts of spacing.

Button Order:

Side by Side will display the buttons horizontally, Up and Down will display the buttons vertically.

Font:

You can choose which font you would like the text to display in. Default is Tahoma, the font used on Facebook.

Like Verb:

The Like button can either say “Like” or “Recommend”.

Width:

Allows you to define a maximum width for this stack. This does not effect the size of the images, only the length of the text. This is most useful for the Standard Layout, with Side by Side.

Embed Post

Embedding posts allows you to place any public Facebook post on any website page.

Embed Facebook Post

Select the down arrow on the top right side of the post you wish to embed and select the option (if it’s not available then the post has been made private and can only be viewed on Facebook).

Embed Page

To embed a Facebook page simply select the URL of that page and place it in the URL input field.

Show Page Cover is selected by default and shows the cover image of the Facebook page.

Show Faces will show people the visitor knows who also likes/follows that Facebook page.

Show Latest Post will show your most recent post.

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

Augment Mobile

The major options in Augment Mobile are:

  • Devices
    • phone
    • tablet
  • Orientation
    • portrait
    • landscape
  • Color
    • black
    • white

Augment Mobile Options

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

Augment Cube

General Controls

Cube Size:
Controls the width and height of each side of the cube in pixels. You can use the preview cube to see the size. As you resize your screen, it automatically changes the size of augment cube to fit. So the value you put in to the cube size field is multiplied by 4 for the full size cube.

Opacity
This controls how see-through or solid the cube is. Note that this will also control the opacity of any content within the cube. If you want to control the opacity of the cube while keeping the content solid, you can go down to the ‘Background Color’ and ‘Border Color’ controls.

Advanced Controls

Perspective:
Perspective is similar to zooming in and out, it doesn’t change the size of the cube, but it does change how large it seems by altering the distortion. For instance, if the value is set all the way at 2000, it’s like zooming in and setting the value at 200 is like zooming out.

Content Overflow:
If the content that you want to put into the cube goes longer than the height of the cube, you can define what happens. It’s set to Auto by default which will only add a scroll bar if the content is too long. Setting it to Scroll will always have a scrollbar even if the content is not longer than the height of the cube. Setting it to Hidden will hide the content and not allow a scrollbar. Setting it to Visible will allow the content to keep going off of the cube without a scroll bar so that it’s all visible.

Background Color:

You can control the amount of red, green, and blue individually to adjust the color for the cube and see the results in the preview (So if red is set to 255, green is set to 0, and blue is set to 255, it will be purple). Then checking the transparency check box will allow the background color to be see through. Use the Opacity slider to control how see-through it is.

Border Color:

This works exactly like the background color except it controls the color of the border.

Parallax

Parallax rotation causes each cube to rotate however fast or slow you want while the user scrolls down the page. This feature can be turned on or off, and you can control the speed of the rotation with the ‘rotation speed’ slider. 1 is very slow, 20 is very fast.


The Buttons

Button Height:

Controls the height of the buttons in pixels. The reason there’s not a width slider is because you can just go to the layout tab to control the size of the whole button section.

Button Color:

Use RapidWeaver’s Color picker to select the background color of the buttons.

Border Type:

Choose between each type of border possible with css. Or for no border, select No Border.

Border Width:

Pretty self explanatory. This controls the width of the border in pixels.

Border Color:

Use RapidWeaver’s Color picker to select the border color of the buttons.


Hover Controls:

The hover controls are all a repeat of the other controls. They control how the buttons look while a user hovers over them.

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

Augment Slide

Installing Augment Slide

Upon uploading your Augment Slide Stack, open up your “Stack Elements” option. You should be able to see your new Stack added:

Augment Slide Icon

Drag & drop the Stack onto your RapidWeaver page.

*If you want to preview the Augment Slide caption on its development page, simply right click on the targeted Stack. Adjust the width of the caption for optimal distinctiveness between Stack placement.


Configuring Augment Slide

The Augment Slide Stack offers a few options to maximize design potential and individuality:

Slide Type:

  • Slide Type: Define the positioning type of caption.

Caption Styles:

  • Caption Color: Adjust the color of the caption.
  • Caption Font Color: Adjust the font color of the caption.
  • Line Height: Adjust the line height of the caption.
  • Width: Adjust the width of the caption.

Caption Padding:

  • Left Padding: Adjust the left padding of the caption.
  • Right Padding: Adjust the right padding of the caption.
  • Top Padding: Adjust the top padding of the caption.
  • Bottom Padding: Adjust the bottom padding of the caption.

Changelog

v1.2.4 (June 25, 2014)

  • Fixed grouping error
  • Fixed icon issue

v1.2.3 (June 23, 2014)

  • Customization options now number-based
  • Stack Edit Mode organized

v1.2.2 (January 13, 2014)

  • New icons for backend
  • Changed grouping to ‘1LD Stacks’

v1.2.0 (July 5, 2013)

  • SPARKLE ready
  • Slide effect occurs on touch events for touchscreen devices

v1.1.0 (June 3, 2013)

  • Preview fix on RapidWeaver development page, i.e. secondary-clicking function no longer necessary
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

Augment Pic

Screen Shot 2013-12-20 at 1.36.54 PM

Augment Pic General

Width: allows for width control

Height: allows for height control

Circle: This will turn the image into a circle. “for best results make the image a circle”

Transition Speed:  Select from 1 to 10 seconds.

Screen Shot 2013-12-20 at 1.37.15 PM

Filters

“note: Make sure that you select the filters in both (Augment Pic Filter & Augment Pic Filter Hover)”

Blur : Controls the sharpness of the image

Brightness: Makes the image brighter or darker.

Contrast: Increases and decreases the contrast of the image.

Grayscale: Allows you to make the image monochromatic.

Hue-Rotate: This will change the overal hue of the image.

Invert: Inverts the images colors.

Opacity: Controls the transparency of the image.

Rotate: Control the rotation of the image.

Saturate: Allows the image to be saturated or desaturated of color.

Sepia: Controls the amount of sepia in the image.

Zoom: Allow image to be zoomed in.

 

Screen Shot 2013-12-20 at 1.38.34 PM

Filter

Animations: Select the type of animation you want to use.

Full Size: The option for having a full size caption.

Centered Adjuster: Activates once the Full Size is selected. This will all you to center the content in your caption from the top.

Background: This is turn on the background of the caption.

Transparent: This will make the background either solid of opaque.

Background Color: This will allow you to select that color that you want the caption to be.

Margin Top: This controls the margin for the top “can be used for centering as well”

Margin Bottom: This controls the margin for the bottom “can be used for centering as well”

 

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

Augment Flip

Setup (V2.5.0+)

After adding Augment Flip to your Stacks page you will see two “Drop stacks here” sections. Any content added to the top section will display as the front of the stack. Any content added to the bottom section will be hidden on the back of the stack until it has been flipped. By default, the stack will flip by clicking anywhere on the stack. To customize the stack, refer to the settings breakdown below.

Note: Because of some structure changes to Augment Flip, when updating from an older version you will need to reset the Flip Type & Flip Mode values for the animation to function correctly.

Settings

General

Flip Type – This option setts which animation the stack will use when flipping to the back side and uses the same animation for the flip returning to the front side in reverse.

Speed – This value, set it milliseconds, changes the how long the animation takes to flip the stack.

Round Corners – Increase the value to add rounded corners to the front and back of the stack. Note: This option is mostly only useful when the front and back background colors have been enabled.

Z-index – This value specifies the pile order of the stack. A higher value is always in front of a stack with a lower value.

Match Front & Back Size – This will force the front and back to match in width and height. Both the front and back will take the dimensions of the larger side.

Animation Shadows – This options will add shadows as the animation is happing to give the animation more depth.

Front & Back

Flip Mode – This sets the method used to make the stack flip over. “Icon” will place an icon in the upper right corner that will flip the stack when clicked. “Click” will flip the stack if any part of the stack is clicked. “Custom Image” will place an image you add to the upper right corner that will flip the stack when clicked. “Hover” will cause the stack to flip when the mouse is above the stack. “Hover Off”, only available in the Back settings, will cause the stack to flip when the mouse is no longer above the stack. “None”, only available in the Back settings, will disable the flip so that once the stack is flipped from the front to the back, it will always stay flipped.

Enable Background Color – Allows you to set a background color to the stack.

Max Width – By default Augment Flip will fill the entire width of the container you place it in. Adjust this value if you don’t want the width to be greater than a certain pixel value.

Max Height – By default Augment Flip’s height will be determined by the contents. Adjust this value if you don’t want the height to be greater than a certain pixel value.

 

 

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

cleanAccordion

Set Up

  1. Double Click to Install both the cleanAccordionCont.stack and cleanAccordionInner.stack.
  2. Drag & Drop the cleanAccordion stack into a Stacks page.
  3. By default, there will already be one Content Panel inside cleanAccordion, give it a title in the top section.
  4. Add a description – for this you need to drag a content stack (text,html,image, etc.) into the “Drop Stacks here” section below the panel title.
  5. Select the Content Panel element for customization options – make yours look sweet!
  6. Press the blue add panel button to add more Content Panels.

Creating Links That Open Specific Panels

You have an option to create a “Link Title” per accordion. This title is what you will use when creating links that start cleanAccordion open to a specific panel. By default the “Link Title” is “article”.

article links

To create a link, first get the URL of the page cleanAccordion is placed on. In our example we will use http://onelittledesigner.com/rapidweaver-stack/cleanAccordion/ (cleanAccordion’s preview page). At then end of the link place a ? (question mark) followed by the “Link Title”(“article” for this example), an = (equals sign), and a number (representing the position of the panel you want to open).

http://onelittledesigner.com/rapidweaver-stack/cleanAccordion/?article=5

When this link is clicked on, the page will open and the cleanAccordion with the Link Title “article” will open to panel #5. Click the example link above and you will notice the middle cleanAccordion on the preview page is open to panel #5.

Setting tabs as links

Click on the individual tab that you want to edit. Switch the default Slider option to “Link On (Slider Off).” Then in the URL Option field enter the URL you wish to link to. This will eliminate the sliding effect and instead use the link you wish to send users to.

Using Icons

To use Icons you must first drag and drop the Font Awesome stack into the Stacks page.

To see the full list of icons please go the Font Awesome Website Here. Simply find the icon you wish to use and type it’s name in the field located in the customization options for the Content Panel. Previous versions required a single icon given to all accordion tabs, but with this version you can choose a different icon for each individual tab. Simple select the Content Panel and the field can be found on the right in the customization options section, which will display “icon-plus” by default.

Change Icon (+) Location & Size

Altering the location and size of the rotating icon can be done using the following jQuery code, which must be placed in RapidWeaver’s Edit Mode in the Page Info > Header > JavaScript section. This option was not built in as the option would be confusing to majority of users, though it is still very handy in certain styled websites, particularly those that use very large fonts inside the cleanAccordion.

The following code demonstrates the stack’s default settings. ‘Top’ adjusts the distance from the top, ‘left’ adjusts the distance from the left, and ‘font-size’ adjusts the font-size of the icon. You can replace these values for pixel, percentage, em, and ex values. Note that if you increase the distance from the top you must include a value, such as px.

1
2
3
4
5
6
7
$(document).ready(function() {
     $('.plusIcon').css({
          'top' : '0', 
          'left' : '12px', 
          'font-size': '200%'
     });
});

Using the Custom/Blank Theme

custom theme

Setting the Theme to “Blank / Custom” will remove all of the styling for the accordion (title as well as the panel content). This will allow you to create your own custom design by using any content stacks (text, html, images, other 3rd-party stacks, etc…) and styling them. In order to use a custom title for the panel you will need to click on the Content Panel stack and enable the “Custom Title” option, otherwise it will only allow you to use un-styled text.

custom title

I want those cool dashed lines in the demo

  • Navigate to your Page Inspector
  • Go to Header » CSS

Insert this awesome code:

1
dl.accordion {border-style: dashed;}

Video Tutorial (v1.3.8)

This tutorial is for an older version of the stack but may still prove to be useful for some.

 

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

cleanLists

Note, this video uses cleanResponse, which has sense been replaced by Responsive Grids.

Basic Setup

cleanLists Types

cleanLists is built with 3 different types available that are common in lists and pricing tables. By default it is set to list items (headers and buttons are available commonly placed at the top or bottom of a pricing chart).

HTML Lists Tool

If ‘List Item’ is selected you can then proceed to use RapidWeaver’s built-in list item tool.

cleanLists Resources Stack

Modern Pics & Web Symbols are stored as a separate stack in cleanLists 2.0+. Simply drag and drop it to the top of the page and these fonts are made available – this is to reduce load time for cleanLists by placing only a single instance of the font files.

Font Awesome Importer Stack

Font Awesome is another stack packaged separately that is not part of cleanLists Resources simply because it is used in so many other stacks of mine. Use of Font Awesome is the same – simply drag and drop to the top of your stacks page.

Terminology

General Controls

  • Section Type: List item, header, button.List items (default) are for individual list points that receive most of the styling options and color options – most significantly the bullets.
  • List Bullets: Square, Circle, Modern Pics, Web Symbols, Off, Inherit. These are bullet list-item choices and will only work for list item section types. Squares & Circles are small container objects with borders that display them as either a square or circle. Modern Pics & Web Symbols are font-based icons and controlled below by the “Web Font Symbol” section.
  • Web Font Symbol: this field is used to control the web font symbol and works only in list item section types, and the list bullets “Modern pics” and “web symbols.” Simply type the character shown on the “Glyphs” tab to match with the symbol. You can match these web symbols using the cleanLists Resources stack (comes package in version 2.0+).
  • Bullet Size (px) controls the pixel size of bullets. When used on the Square or Circle List Bullet note that there is a 1px border around, so if set to 10px size it would be 12px width and 12px height.
  • Font Size (px) controls the size of fonts in the list item and button section types.
  • Header Size (px) controls the size of the header section type (note that the Header Tag below controls the HTML wrapping).
  • Button URL: Place button URL / links in this field – do not place them by highlighting the text and using the link icon in the top left.
  • Button Themes: Off, Simple, Soft. This section controls pre-set styling (aka themes) of the button section. Soft is a minimal setting and will not receive all the button color controls, where the Simple button will.
  • Header Tag controls the HTML heading tag, i.e. <h1>.
  • Padding Top & Padding Bottom control the padding below and above the line and can be used to make all section types larger. This option is also built into stacks, though I added it here as well for quicker use.
  • Text Padding Left controls the distance of the text from the left side (side of bullet icon)
  • List Icon Top & Left control the distance of the bullet icon from the side. By default they have been set for smaller fonts (12-14px) and may need to be adjusted for larger fonts. Increasing Top will move the bullet down, increasing Left will move the bullet to the right.
  • Header Center centers the text in header section types. Uncheck and header will move left.
  • Pointer (Hand) causes the mouse to be a pointer (hand) when hovering the section.

Color Controls

  • Background On creates a background color for the section. Unchecking will turn the background off, thus the background behind the table will be visible.
  • Background controls the color of the background.
  • Alt Bg On turns on the alternating background color for list item section types.
  • Alt Bg Odd sets the alternating background color to occur every other line item. Unchecking the box will set the alternating background color to even.
  • Bg Alternate controls the color of alternating backgrounds, assuming it is turned on.
  • Bg Hover On allows for the hovering background color for list item section types.
  • Bg Hover controls the color of the hover in list item section types.
  • Text & Text Hover controls the colors and hover colors for all basic text in that section.
  • Links & Links Hover control the colors and hover colors for all links in that section.
  • Bullets & Bullets Hovers controls the colors for bullet icons in list item section types.
  • Button Bg & Bg Hover control the background and background hover colors for button section types (does not work for Soft buttons).
  • Button Border & Border Hover control the border and border hover colors for the simple button types.

cleanLists Resources (2.0 +)

cleanLists Resources Stack

To better assist in development ease and speed version 2.0+ comes with an optional additional stack to assist and show the icons associated with some of the built-in icons. These are also separated so that they only need to be loaded once instead of over and over again with each instance of the stack.

cleanLists Resources

Increasing Distance from Icons & Text

The built-in “Text Padding Left” slider can increase/decrease this distance, though the max is 50 pixels. If you would like to increase this distance you can you can manually increase this by adding code in the Page Info > Header > CSS section.

1
.cleanLists li {padding-left: 100px !important;}

Adjust the 100px to whatever value you wish to use.

Remove Underlines from List Items

In some themes an error is occurring causing list items text to have underlines. Fortunately, you can remove this simply by inserting the following code in the Page Info > Header > CSS section.

1
2
3
.cleanLists ul a li, .cleanLists a, .cleanLists ul a li:hover, .cleanLists a:hover {
     text-decoration: none !important;
}

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

cleanQuotes

Basic Use

cleanQuotes comes with 2 Stacks.

One is a Containing stack (use this to create a cleanQuotes section).

cleanQuotes Stack

The other is an Inner stack (drop this inside cleanQuotes Container section to create individual Testimonial sections). Be certain to place each inner section directly below or above each other and not inside one another or outside the Containing stack (these will break the stack from working properly).

cleanQuotes Inner Stacks

Each of these sections can be customized. The container section will control customization for that entire cleanQuotes section. The inner section will control customization options only for that individual testimonial.

Built-in Quote Icons (v 1.0+)

The built-in quotation icons can only be inserted in the Customization Options when using the Quote Box theme. All other themes must manually insert them, which can be done by simply dragging and dropping them in. You can float the quote icon left or right by using the Edit Image icon and choosing Float Image Left (or Right).

You can easily create your own as well with a simple word software – change the font and color to whatever you desire and type CMD + Shift + 4 and highlight the quotation symbol.

Adding Custom Images (v1.0+)

The Quote Box Theme, by default, will display a quotation image in the upper left corner of the testimonial. There are 5 built-in quotations that are displayed, though you can add your own image if you choose to do so.For the URL’s to be displayed on your images you will need to have published your website at least one time – if not these steps can be performed after your first publish.

1. Upload the image into the Resources section of RapidWeaver’s Edit Mode.
2. Click the image and select the clipboard icon (this will copy the URL to your clipboard)
3. Paste the URL (CMD+V) into the Custom Image section under General Controls in the cleanQuotes Container section (Make sure the Custom Image Icon checkbox has a check mark as well).

cleanQuotes Author Icon

*This process is the same for the “Author Icon URL” option inside individual testimonial sections.

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

Simple Divider

Customization within Divider Themes

Two different themes are avialable:

  • Subtle Emboss (default)
  • Solid

Simple Divider Customization Options

When Subtle Emboss is selected the “Emboss Top” and “Emboss Bottom” options below will be used. When “Solid” is selected the “Solid Height” and “Solid Color” will be used.

The “Emboss Top” and “Emboss Bottom” options control the color for the top and bottom line of the divider.

The “Solid Height” controls the height of the “Solid” theme divider and the “Solid Color” controls the color of it.

Changelog

v1.4.0 (May 12, 2014)

  • Added height control (this allows for two lines to be separated in distance)
  • Transparency option
  • Option to add an image (must adjust height to match)

v1.3.4 (October 29, 2013)

  • Group changed back to ‘1LD Stacks’

v1.3.3 (September 24, 2013)

  • Removed Unnecessary Asset Call & Files
  • Spacing Control Over Both Top & Bottom
  • Customization Section Improved

v1.2.0 (July 1, 2013)

  • SPARKLE ready

v1.1.0 (February 7, 2013)

  • Added “Emboss Style” control – emboss line options added: solid, dashes, dots.
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/3/">
RSS

JuiceBox

Note: JuiceBox has been discontinued and replaced by the stack Ice Box.

[Click here to download a demo file.]

 

Basic Setup:

Step 1:

Double Click the juiceBox_Container and juiceBox_Inner stacks to install them.

Step 2:

Restart RapidWeaver so that all changes take place.

Step 3:

Drag a juiceBox Container onto your page.

Step 4:

Drag and drop at least one juiceBox Inner stack into the Container.

Step 5:

Drag any stacks, images, or text into the thumbnail area and fullscreen area.

Note:

A gallery will be organized by juiceBox Containers. You should not put a Container inside of another Container. However, you may put any other stacks inside of a juiceBox Container.


Definition of terms:

juiceBox Container:

FullScreen Background:

Color:
Determines the color of the background overlay that pops up when you click on an image.
Opacity:
Determines the transparency of the background overlay that pops up when you click on an image.
0 for completely transparent, 100 for completely opaque.
Animations:
When checked, animations are turned on. When unchecked, animations are turned off.

Button Options:

Button Styles:
Choose which set of buttons you’d like to use, you will see the buttons change in preview mode as you select them.
Color1:
For all ‘flat’ buttons, this will determine the color of the buttons, for all ‘gradient’ buttons it will determine the outer color.
Color2:
For all ‘gradient’ buttons it will determine the inner color.
Opacity:
Determines the transparency of the buttons.
0 for completely transparent, 100 for completely opaque.
Hover Opacity:
Determines the transparency of the buttons when the mouse hovers over them.
0 for completely transparent, 100 for completely opaque.
Size Units:
Control the size of the buttons with either pixels or percentages.
Close Size:
Control the size of the Close button with the specified units.
Navigation Size:
Control the size of the Navigation buttons with the specified units.

juiceBox Inner:

General Options:

Override Settings:
When checked, copies all the customization options of this juiceBox inner to every other juiceBox inner on the page. Saves a lot of time when all of your images need the same treatment.
Hide Thumbnail Preview:
When checked, hides the thumbnail preview in edit mode, does not affect live mode. Saves space in edit mode, and increases performance.
Hide FullScreen Preview:
When checked, hides the fullscreen preview in edit mode, does not affect live mode. Saves space in edit mode, and increases performance.

Thumbnail Options:

Size Units:
Control the size of the thumbnail with either pixels or percentages.
Auto Width:
When checked, the ‘Width’ is ignored and the thumbnail expands as content fills it.
Auto Height:
When checked, the ‘Height’ is ignored and the thumbnail expands as content fills it.
Width:
Controls the width of the thumbnail in the specified units.
Height:
Controls the height of the thumbnail in the specified units.
Units(min/max):
Control the min and max size of the thumbnail with either pixels or percentages.
Max-Width:
Sets the maximum allowed width for the thumbnail. If ‘Width’ is set to 90%, ‘Max-Width’ is set to 800px, and the screen is 1440px wide, the thumbnail will not be 1296px(90% of 1440) instead it will stop expanding at 800px.
Max-Height:
Sets the maximum allowed height for the thumbnail. If ‘Height’ is set to 90%, ‘Max-Height’ is set to 200px, and the content is 500px tall, the thumbnail will not be 450px(90% of 500) instead it will stop expanding at 200px.
Min-Width:
Sets the minimum allowed width for the thumbnail. If ‘Width’ is set to 100px, but ‘Min-Width’ is set to 200px, the thumbnail will be 200px wide.
Min-Height:
Sets the minimum allowed height for the thumbnail. If ‘Height’ is set to 100px, but ‘Min-Height’ is set to 200px, the thumbnail will be 200px tall.

FullScreen Options:

Size Units:
Control the size of the fullscreen with either pixels or percentages.
Auto Width:
When checked, the ‘Width’ is ignored and the fullscreen expands as content fills it.
Auto Height:
When checked, the ‘Height’ is ignored and the fullscreen expands as content fills it.
Width:
Controls the width of the fullscreen in the specified units.
Height:
Controls the height of the fullscreen in the specified units.
Units(min/max):
Control the min and max size of the fullscreen with either pixels or percentages.
Max-Width:
Sets the maximum allowed width for the fullscreen. If ‘Width’ is set to 90%, ‘Max-Width’ is set to 800px, and the screen is 1440px wide, the fullscreen will not be 1296px(90% of 1440) instead it will stop expanding at 800px.
Max-Height:
Sets the maximum allowed height for the fullscreen. If ‘Height’ is set to 90%, ‘Max-Height’ is set to 200px, and the content is 500px tall, the fullscreen will not be 450px(90% of 500) instead it will stop expanding at 200px.
Min-Width:
Sets the minimum allowed width for the fullscreen. If ‘Width’ is set to 100px, but ‘Min-Width’ is set to 200px, the fullscreen will be 200px wide.
Min-Height:
Sets the minimum allowed height for the fullscreen. If ‘Height’ is set to 100px, but ‘Min-Height’ is set to 200px, the fullscreen will be 200px tall.

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