USER MANUAL BY JOE WORKMAN
h t t p : / / j o e w o r k m a n . n e t • © 2 0 1 0 A s p e c t S e r v i c e s , L L C • September 15, 2010 • Version 1.2
The Styled Stack is the utility stack of all utility stacks! It’s a generic stack container that gives you the ability to style pretty much every aspect of it. You can... • Apply border styles (dashed, dotted, etc.) to each side of the stack. • Add a totally customizable drop shadow. • Add rounded corners with full control over each corner’s radius. • Add a background color. • Chose from 48 out of the box backgrounds! • Add your own custom background image if none of the supplied images float your boat. You will find that the Styled stack is so versatile that you will keep using it over and over again. That’s why it will be right at the top of your Stacks library below all of the default Stacks. The Styled Stack utilizes the standard frameworks and works very well in all of the major browsers: Safari, Firefox & even Internet Explorer (additional steps needed for CSS3 effects). It even works great in a mobile browser like on your iPhone! Pictures are worth a thousand words so for a live demo and support for Gyro please refer to the following sites: Styled Stack Product Page: http://joeworkman.net/products/styled-stack Styled Stack Support: http://joeworkman.net/support
Usage & Settings Basic Setup
1. When you drag your Styled Stack out, you will see the above stack appear on your page. 2. Now simply drag whatever content you want into the stack. This is a simple container that will accept any sort of content that you would like to put into it. 3. Now go into the settings HUD and apply the styles that you may want. Please refer to the Stack Setting section below for details on each setting. 4. See the Appendix on how to get the CSS3 effects working in Internet Explorer!!! 5. Now preview and enjoy! For an overview of the remaining settings please refer to the Stack Settings section below.
Stack Settings The Styled Stack makes full use of all the default stacks settings at the top of the HUD. Please refer to the Stacks documentation for assistance with these settings. Top/Bottom/Right/Left Border: This setting specifies the border style for each side of the stack. These values can be different. The available values are: none, solid, dashed, dotted, double, grove, ridge, inset, & outset. Radius Sliders (4): There are a total of 4 sliders that can customize the radius for each individual border. Shadow: The color of the shadow. Shadow X-Pos: The horizontal positioning of the shadow. Shadow Y-Pos: The vertical positioning of the shadow. Shadow Size: The number of pixels of the shadow. NOTE: You may need to increase margins on the stack depending on the size of your Shadow. Shadow on Hover Border: The shadow will only display if the block is hovered over. BG Theme: Choose up to 48 different backgrounds. Choose 0 for no background. See below for samples. Background Repeat-X: The setting will add a repeatx property to the background image when requested. Show Custom BG Image: Show the image well for a custom bg image in edit mode. ! 4
Styled Stack Background
Appendix CSS3 for Internet Explorer There is an awesome new CSS script out there for IE that allows limited support for CSS3 effects! Its called PIE. (http://css3pie.com). We have been working hard on trying to get PIE to work in our stack without any intervention from you, the user. There are a few roadblocks that we have come up against the prevents that. So you will have to take the following steps in order to get the CSS3 effects in this stack to work in IE.
1. Get a copy of the PIE.htc script from the Styled Stack dmg. It is contained within the PIE folder. 2. Use your favorite file transfer app (ForkLift, Transmit, etc.) to upload this file to the root of your web server. You should be able to access it from your domain like so: http://joeworkman.net/PIE.htc 3. Thatâ€™s it you are done and ready to support CSS3 in IE!!
NOTE: This will not enable support for CSS3 across the board on your site. The developer will need to add support for this into his theme/plugin/stack.
Version History Version 1.2 -- 09/15/2010 1. Fixed issues where PIE was not properly rendering CSS3 effects in IE. 2. Added Auto-Update capabilities. 3. Added tooltips to each Setting in the HUD. Version 1.1 -- 09/08/2010 1. Fixed an issue with nested styled stacks with a custom background. 2. Fixed issue where images assets folder conflicts with other stacks.
Version 1.0 -- 07/30/2010 1. Initial Release.