*I busted my headset, so this video is temporarily lacking audio (will replace soon).

Phantom ContainerContainer Controls

Simply Titled ‘Phantom’ this container stack must first be placed. Afterwards, the Phantom Element stack is placed inside and sequentially placed one below each other again and again for as long as you like.

Definition of Terms

Show Icon Chart – displays the Font Awesome icons and the affiliated text that is used to activate them. Alternatively, you can visit Font Awesome’s site for the list, though if you do be sure to exclude ‘icon-’ in choosing the text as that is already built in. There site is here.

Knob/Dial – Turned off by default, this option allows users to switch from the basic themes to a dial/knob theme as seen on the onelittledesigner.com home page.

Knob/Dial Off options:

  • Theme: Buttons, Flat, Round. These options switch the visual style of the navigation/sorting menu.
  • Menu items: By default this is set to 3, but can range from 0 – 10.
  • Font Size: Controls the size of the font in the sorting menu (default is 15px).
  • 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.

Knob/Dial On options:

  • Dial/Knob: Metalic, White Knob, Black Knob, White Knob 2, Flat White Dial, Flat Black Dial (6 themes total).
  • Background: Metalic, White – Textured, Black – Textured, White – Flat, Black – Flat, None (6 themes total).
  • 5 Sections are then introduced based on their position around the dial knob. Each have an icon field that controls the Font Awesome icon used. The positions are semantically intuitive and are listed as: Left Title (bottom left), Top Left Title, Top Title, Top Right Title, Right Title (bottom right). The top button will be the “Show All” button.

Icons/Titles - White & Black options.

Opacity - Sets a percentage opacity for the titles.

Button – Color control for the button (this option is not available for the dial/knob theme).

Active Button – Color control for the active button.

Percentage Mode – Phantom is already responsive, though the layout can be set to percentage based columns. If activated the following option is available.

Mode – This sets the percentage based columns into thirds or fourths. Inner elements can then take up more than one column, though this is dicussed in more detail below.

Pantom ElementInner Element Controls

Definition of Terms

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 Container Element (located at the very bottom of the customization options). When selected the ‘Width’ option will be replaced by a new ‘Width’ drop down menu.

  • Width (percentages): 1/4 (25%), 1/3 (33%), 2/4 (50%), 2/3 (66%), 3/4 (75%), 1/1 (100%). NOTE, you must select a percentage width as it relates to the ‘Mode’ you selected in the Phantom Container Element. Example, if you selected ‘thirds’ then the width can be 1/3, 2/3, or 1/1. If you selected fourths you must select either 1/4, 2/4, 3/4, or 1/1.

Matching Sorting Menu Titles

Phantom Matching Sorting Menu Titles

Note, the 3 sorting menu items up top. These are the default settings, though each ‘Title’ must match the ‘Title’ given to the inner elements.

Using ‘All’

If you name any of the Titles ‘All’ then that will automatically show every option. The ‘inner elements’ start with ‘All’ in their fields, though this does not need to remain (we’ve built in this functionality).

Here is an example of them matching up:

Phantom Titles Matching

On our demo page you saw 3 colors matching: blue, orange, purple. Since purple has both blue and orange in it the title would be: Blue,Orange,Purple

That would allow Purple to come up in both Blue and Orange while also being selectable in its own unique Title.

Using Custom Icons

Step 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;
}

Changelog

v1.5.0 (October 25, 2013)

  • Added font size control to the Knob/Dial version
  • The Knob/Dial can now also display titles
  • The Knob/Dial has an option to display titles only on mouse hover
  • You can use custom icon images in both the button and Knob/Dial version of the stack, more info will be added to the tutorial page
  • The Knob/Dial is no longer limited to 5 items, you can now add between 2 and 5 items
  • You can now increase the size for the icons and titles to 30px
  • The Buttons version now allows you to adjust the padding and spacing of the buttons
  • Fixed various small bugs

v1.0.3 (September 17, 2013)

  • Removed jQuery Conflicts, increasing compatibility with other stacks
  • Fixed a bug that caused the page length to appear large after sorting to a category with only a few elements