Simple Position Pro

Definition of Terms

  • Position: Relative, Absolute, Fixed, Static, Inherit. 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 in %. This switches the position controls below into percentage instead of pixels (only available in Pro version).
  • Horizontal in %. This switches the position controls below into percentage instead of pixels (only available in Pro version).
  • Vertical Value & Horizontal Value. The pixel distance from the vertical and horizontal positions selected. If percentages are selected then that will replace the pixel measurement and the % will show in place of px.
  • 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 in percentages. These options will open a new number field for you to place your desired percentage width or height – this option will also override the pixel measurements below them (only available in Pro version).
  • Width & Height. These are pixel values for the element and only work if the Control Size option is selected.
  • Force Vertical/Horizonal Center. This option will only work on page load (not when window is resized). The option will force an Fixed or Absolute position element to center perfect either vertically, horizontally, or both (only available in Pro version).
  • Hide on click. This option will remove the element the moment it is clicked. You can still place a link and it will load before the element is removed (only available in Pro version).

Changelog

v2.0.1 (July 24, 2014)

  • Improved edit mode UI
  • New project file added to demonstration the pro version better
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/simple-series/">
RSS

Font Awesome

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

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

Setup

Font Awesome Importer Stack

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

Snippet File

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

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

 

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

ignore formatting

Adjust Icon Size

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

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

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

Add an HTML link

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

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

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

Quotation Mark Issue Example

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

RW Auto Formatting Quotations

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

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

 

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/simple-series/">
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/simple-series/">
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/simple-series/">
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/simple-series/">
RSS