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

Hang Glider

Basic Use

Step1: Take the Hang Glider Main and place it into the site.

Hang Glider

Step 2: Now take any of the Hang Glider Stacks and place them into Hang Glider Main.

 

Hang Glider Columns

 

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

Goldfish

Implementing Goldfish

1. Double click and install Goldfish.
2. Drag Goldfish into page.
3. Take the movies that you want to use and drag them into the RapidWeaver’s resource. Use the formats MP4 and OGG for the movies to work across browsers. For best results use both formats.

Goldfish Resource

4. Copy the names of the files in the resources. Put them in the correct allocated areas in the Goldfish Video input area.

Goldfish Resource Name

Goldfish Input

 

5. Make sure that you insert and image in Poster Image. This will ensure that an image will be there while the video is being loaded. This will also be the background for mobile if you are using the full screen option.

Screen Shot 2015-05-27 at 12.01.05 PM

 

Full Screen option

(Warning may run into problems with some themes ) contact out support if that happens.

1. Activate Fullscreen by selecting the option and selecting a bg overlay.

Screen Shot 2015-05-27 at 12.07.15 PM

 

2. Be sure that you have the width option set to 9000.

Screen Shot 2015-05-27 at 12.07.51 PM

 

Subtitles

1. Make sure you have you subtitle file ready, its a .vtt file. (Explanation of VTT and how to create)

2. Drag the VTT file into your Rapidweaver Resources.

Screen Shot 2015-05-27 at 12.06.39 PM

 

3. Put the file name into the captions option.

Screen Shot 2015-05-27 at 12.07.02 PM

 

4.Enjoy your new captions

Preparing for Older Browsers

1. Select an image or an embed code from a site like Youtube or Vimeo.

2. Drag the image in to the set image area.

Goldfish Img

3. Be sure to delete the default HTML if you aren’t using it.

Goldfish embed

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

Glide Slide

How to Set Up

1. Double Click to Install

2. Drag & Drop the Glide Slide stack

Glide Slide Drag and Drop

3. Drag & Drop the Glide Slide Image & Glide Slide Thumbs.

Place Glide Slide Image Stacks next to each other.

Glide Slide Image

Place Glide Slide Thumbs Stacks next to each other.

Glide Slide Thumbs

4. Drag & Drop images into the Glide Slide Image & Glide Slide Thumbs.

      if it is having trouble initiating then try turning ON and OFF the autoplay.

Glide Slide drop

Captions

Insert text or images into the caption section of the Glide Slide Image Stack.

Glide Slide Captions

It’s the area highlighted blue.

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

Cyklone Pix

Using the Images Section

Step 1: Simply drag and drop any image you want to use into the “Drop stacks here” field.

images drop stacks here

Using the Image URLs Section

Step 1: Navigate through your browser to your selected image host (like Deviant Art for instance). Locate & Right click the photos on that site you wish to use & select “copy image URL”.

Step 2: Paste the URL you copied into the “Image URLs” box of Cyklone Pix & don’t forget to add a comma [,] after every image. Repeat for every photo you wish to add.

Adjust Position & Size

To adjust the position & size of the cloud use the Layout section of the stack’s settings menu. Adjust the Detailed Padding or Margin to move the cloud left, right, or downward

layout adjust margin

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

Cyklone Links

Basic Use

Step 1: Drag the Cyklone Links into the stacks editor.

Step 2: Under the “Tags” section, enter each tag you wish to display & separate each tag with a comma (,)

cyklone links tags

Step 3: After you have entered a desirable amount of tags, insert the corresponding URLs into the “Destination URLs” section separating each URL with a comma (,). The easiest way to get a URL for your tag to link to is to navigate to the page (that you want to link to) in a browser & highlight the address & copy & paste it into the URLs section of Cyklone Links.

cyklone links urls

  • Each URL will pair up in the order you entered the tags
  • For any tag you wish not to have a link associated with, enter a hash tag (#), do not forget to add a comma after each URL or hash tag
  • Do not forget to include the HTTP part of each address (http://)

Adjust Position

To adjust the Position of the cloud use the Layout section of the Stack’s settings menu. Adjust the Detailed Padding or Margin to move the cloud left, right, or downward

layout adjust margin

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

Control Panel

Definition of Terms


General Controls

Float:
Options = right, left, none
Default = none
Float right will cause that element to be as far right as possible, and Float left will place the element as fat left as possible.

Content Overflow:
Options = Hidden, Visible, Scroll Bar
Default = Hidden
Content Overflow controls what happens when text, images, video, or other content go longer or wider than the element they are placed in. Visible will allow the content to be seen even if it’s longer or wider than the element. Hidden will cut it off at the edges of the element. Scroll Bar will automatically put a scroll bar inside of that element to allow scrolling to view the overflowing content.

Px or %:
Options = Pixels, Percents
Default = Percents
the following options (width, height, etc…) will either be sized in pixels or percent. Choosing pixels will cause that element to be sized with pixels, where as percentages will allow the element to be more fluid and responsive.

Width and Height:
Options = 0-1000
Default = blank
These are sort of self explanatory, if you chose pixels above, the width and height will be sized by pixels, if you chose percentages, it will use percentages. Leaving these fields blank will cause the element to only be displayed when there is content inside of it.

min/max-Width and min/max-Height:
Options = 0-2000
Default = blank
(advanced – okay to leave blank) Min-Width (minimum width), controls the absolute smallest width an element can have. Max-Width (maximum width), controls the absolute widest an element can be. Same concept for height. This can be useful in a situation where you’re not sure how large or small content will display on different devices, but you know that you don’t want it to be smaller or larger than a certain amount. You can use minimum and maximum width and height to make sure that your content looks good regardless of what device it’s on.


Background Color

Red, Green, Blue:
Options = 0-255
Default = 100
Each slider controls the amount of that color. The higher the number, the more of that color there will be. The colors mix to create any color you want.

Transparency and Opacity:
Options = on, off, 0-9
Default = off, 0
Checking the transparency check box will allow you to use the opacity slider to make the element see-through. Leaving the check box unchecked will keep the element completely solid, and the opacity slider wont change anything.


Borders

type:
Options = none, solid, dotted, dashed, double, inset, outset, groove, ridge
Default = none
Choose between any of the types of borders available, or choose none for no border. Use the ‘Borders’ section to control all four borders, or set each one individually (top, bottom, left, right).
NOTE: Some of the border types take the color you’ve chosen and use lighter and darker colors for different sides. So if you have black selected, and you choose inset for instance, it will look the same as a solid border. However if you lighten the color you will see the difference.

width:
Options = 0-50
Default = 0
Controls the width of the border in pixels. You can also control the width independently for each border (top, bottom, right, left).

color:
Options = Color Picker
Default = Black
Use RapidWeaver’s color picker to choose any color you want. You can also control the color independently for each border (top, bottom, right, left).


Round Corners

Pixels/Percentages:
Options = px/%
Default = %
You can choose to round the corners with percentages or pixels. Percentages will round the corners based on the width/height of the element. Pixels will give the same rounding effect regardless of size.

Top-Right, Top-Left, Bottom-Right, Bottom-Left:
Options = 0-100
Default = 0
You can control the rounding for each corner individually, and it will either round with pixels or percentages depending on which you have selected.


Rotation

X, Y, and Z axis:
Options = -180 degrees – 180 degrees
Default = 0 degrees
The x, y, and z, axis rotations are pretty straightforward, you can see in the preview which way each one rotates. The X axis goes from left-right. The Y axis goes up-down, and the Z axis goes forward-backward.

Perspective:
Options = 200-2000
Default = 1500
Using a lower value will give it more perspective, and a higher value will give it less perspective. You can also think of it as a lower value makes it seem closer, and a higher value makes it seem further away. If you’re familiar with photography, a higher value is like using a telephoto lens, where as a lower value is like using a wide angle lens.


Shadow

Horizontal, Vertical:
Options = -50px – 50px
Default = 0, 14
The horizontal slider will move the shadow left-right, and the vertical slider will move the shadow up-down.

Blur:
Options = 0px – 50px
Default = 18px
Leaving blur at 0 will give a hard edge, and setting it at a higher value will blur the edges of the shadow.

Size:
Options = -50px – 50px
Default = -14px
At 0px, the shadow will be the same size as the element. At a higher value, it will be larger than the element, and at a lower value it will be smaller than the element.

Opacity:
Options = 0-9
Default = 9
Opacity makes the shadow more or less see-through. At 0 the shadow will be completely invisible, but at 9 the shadow will be almost completely solid.


Hover Controls

On/Off:
Options = on, off
Default = on
You can turn on and off hover events. If Hover is turned on, all of the hover controls will be applied when the user hovers over that element.

All of the hover controls are exactly the same as the normal controls.


Animation

Seconds/Milliseconds:
Options = 0-10, 100-999
Default = 0, 300
This will control how long it takes for the hover controls to transition. Milliseconds are 1/1000th of a second, so 500 Milliseconds is 1/2 Second.

Easing:
Options = none, Ease In, Ease Out, Ease In and Out, Snap In-Ease Out, Ease In-Snap Out, Bounce, Bounce In-Fast Out, Fast In-Bounce Out
Default = none
An Easing function is something that controls the timeline of the transition. So if you have an element on the page that transitions from 100px to 200px, and your easing is set to bounce, first it will go less than 100, then up to 200, past 200 a bit, and back down to 200. Here’s an example page to see the result of each individual easing option.

Changelog

Version 2.0.0 (July 3, 2014)

  • Greatly improved UI
  • New Icon
  • Added auto width and height
  • pixel/percentage control for each individual width/height + min/max slider
  • Added color picker but kept the rgba sliders for opacity
  • Control all round corners simultaneously with one slider, or override it and change each one individually
  • Turn preview of rotation on and off in edit mode
  • Enable/disable shadows
  • Improved default options for most likely use case scenarios
  • Improved animation controls
  • Preview animation timing and easing in edit mode
  • Reduced total amount of code by 7kb

v1.5.0 (August 23, 2013)

  • Fixed text editing bug causing certain text editing functions to not be functional

v1.1.0 (July 2, 2013)

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

Simple Videos

Previous called “cleanVideos”

How to I import a local video file?

Depending on the video format there are a variety of ways you can import the code. Note that cleanVideos supports the 3 main formats: object, iframe, embed. You’ll see these at the beginning of the HTML.The following is an example of a code you can use to pull a video from the Resources section of your site (You would replace the “VIDEO.AVI” with the proper name of the file):

1
<object width="100%" height="100%" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="%resource(VIDEO.AVI)%" /><param name="title" value="My Cool Video" /><embed width="100%" height="100%" type="application/x-shockwave-flash" src="%resource(VIDEO.AVI)%" title="My Cool Video" />     </object>

HTML5 Videos

Simple Videos 2.0.0+ comes with a snippet file, though you can use any of the following formats in place of the one included. Note that width and height will not effect the video as it is fully responsive, so width will be set according to the containing element and height will be set according to the aspect ratio.

1
2
3
<video id="myVideo" width="600" height="400" controls="controls" poster="%resource(video.jpg)%"><source src="%resource(video.mp4)%" type="video/mp4" /><source src="%resource(video.webm)%" type="video/webM" /><source src="%resource(video.ogv)%" type="video/ogg" />
 
Your browser does not support the video tag.</video>

Changelog

v2.4.1 (December 10, 2013)

  • Embed code is moved to customization options section – to allow for easier editing for existing video HTML posts (note that this will cause existing embeds to not display so please save the embed code prior to updating)
  • Changed instructional information when the stack is placed – newer YouTube videos were not displaying due to the omission of “http:” so please be sure to make sure that is there – it can be manually typed in if missing
  • Added Maximum Height On/Off option including pixel Max Width control (if turned on)

v2.1.2 (October 29, 2013)

  • Grouping changed back to ’1LD Stacks’

v2.1.1 (July 1, 2013)

  • SPARKLE ready

v2.0.1 (June 27, 2013)

  • Changed logo and Edit Mode (backend) icons

v2.0.0 (May 21, 2013)

  • Renamed Simple Videos (cleanVideos will be a separate stack for the cleanSuite series)
  • HTML5 Support
  • HTML5 Snippet Included
  • Edit Mode UI Changes

v1.1.0 (January 4, 2013)

The cleanVideos 1.1.0 Update adds support for custom iFrames, various websites and further support in more themes (solves previous issues displaying in some themes and containers).

v1.0.2 (October 23, 2012)

Small patch for the Free cleanVideos responsive video RapidWeaver stack./p>

The patch cleans up small coding items, that were not causing conflicts, but worth giving attention. In addition, the section for inserting the video HTML now reads “Insert HTML Here” to make further clarification that it is an HTML section vs text.

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

cleanTabs

Customization Terminology

General Controls

  • Theme – controls theme style (6 options)
  • Tab Count – Total amount of tabs displayed
  • Tab Font Size – Size of font inside of tabs
  • Content Font Size – size of font inside content sections below tabs
  • Border radius – controls the rounded effect on corners (not supported in older versions of internet explorer
  • Container Width – Percentage width of cleanTabs inside its containing element
  • Minimum Width – Smallest width size that cleanTabs will allow
  • Animation On – If turned off Animation Speed control is removed
  • Animation Speed – Normal, Fast and Slow options

Color Controls

  • Border Transparency – Turn on to remove borders
  • Tab Transparency – Turn on to remove border colors
  • Content Transparency – Turn on to remove content/description section colors
  • Inherit Text Styling – Turn on to remove text color controls
  • Inherit Link Styling – Turn on to remove link color controls
  • Main Background – Background color of the active tab & content section
  • Main Border – Color of border for everything except inactive tabs
  • Active Tab Text – Color of the active tab’s text
  • A Tab (Hover) – Color of the active tab’s text when mouse hovers over it
  • Inactive Tab Text – Color of text in tabs that are not selected
  • I Text Hover – Color of the text in non-selected tabs when the mouse hovers over
  • Inactive Bg – Background color of non-selected tabs
  • I Bg Hover – Background color of non-selected tabs when the mouse hovers over
  • Inactive Border – Color of the border for non-selected tabs
  • I Border Hover – Color of inactive tab border when hovered over
  • Content Color – Color of all text in the content sections below the tabs
  • Content Links – Color of all links inside content sections
  • C Links Hover – Color of all links inside content sections when the mouse hovers over them

Advanced Controls

  • Collapsible – Turn on to allow tabs to be completely collapsed
  • 1st Active Tab – The tab that you wish to be open when the window loads (default = “1″)
  • Tabs 50% – At what pixel width the tabs will increase to 50% width (default = “768″ which is iPad Portrait and smaller)
  • Tabs 100% – At what pixel width the tabs will increase to 100% width (default = “480″ which is iPhone Landscape and smaller)
  • Control Tab Width – Turn on to ‘Control Tab Width’ (next option)
  • Tab Width Size – Control width of tabs (default is in pixels, but supports other formats such as %, em, ex).

Changing position of Tabs

cleanTabs positions Tabs to the left by default and there is currently no support for justification (width auto / percentage widths) or right alignment. You can adjust there positions though by pushing the first tab over – the other tabs will adjust accordingly. To do so use the following code in your Page Info > Header > CSS section.

1
2
3
#tab-container ul.etabs li.tab {
     margin-left: 20px;
}

You can, of course, adjust the 20px to any value that achieves the visual layout you are looking for.

Transparent Background for Theme 1

The 2.3.0 Update provides a downloadable snippet file, though you can alternatively add the code manually.

1
2
ul.etabs li.tab {background: transparent !important;}
.panel-container {background: transparent !important;}

Line 1 controls transparency to the tabs and line 2 controls transparency to the content area contained below the tabs (should you want to turn one off/on and not both).

Adding & Removing Tabs

After creating a cleanTabs section simply select (left click) the section and in the customization section on the right-hand side drag the slider called “Tab Count” left or right. By default cleanTabs is set to 4 tabs, though it can be reduced to 1 tab or increased all the way up to 12 tabs (version 2.3.0 allows for up to 20 tabs).

Adding Images to Tabs

You can manually drag images into the tab sections or you can use a web font, such as Font Awesome, which is demonstrated on the preview page (top left green tab preview).

For a complete tutorial on adding Font Awesome to your page.

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