Home

Using the FreeStack R Tumblr Limited stack

1. Contact Form Thank you We have r Fields marked with I Please correct the for Your email could not Page 20 This text will only appear after you submit your form and will only work when your Contact Plus stack s page is uploaded or published to your server directory and is live The default text is Thank you We have received your request and will reply to you soon Success Color Color picker allows you to set success text color to any color you want Default color is Black 000000 Required Text This is the line of text that will appear directly beneath the form title text Recommend keeping this to one sentence Usually the default text will be all you need for most contact form needs This will text only appear when you preview your page in Rapidweaver Default text is Fields marked with are required Required Color Color picker allows you to set success text color to any color you want Default color is Red FFOOOO Error Text This is the text that will appear at the top of the Contact Form stack if the viewer fails to fill out the form input areas correctly Default text is Please correct the form errors and try again Error Color Color picker allows you to set error text color to any color you want Default color is Red FFOOOO Failure Text This is the text that will appear at the top of the Contact Form stack if the form fails to su
2. FREESTACK RESPONSIVE Blueball Design Freestack Responsive Theme User nee V2 3 The ultimate free form respon AA site page blank theme amp stacks that any level Rapidweaver user c ie ced There s no limits to what you can create with the Blueball FreeStack Responsive theme in your RapidWeaver site Now you have complete control over your Stacks page layout design while adding in RapidWeaver s default features functionality with the drag and drop simplicity of Stacks We started out creating the revolutionary Blueball FreeStack Responsive theme with one main purpose in mind We wanted to start with a blank page in a theme that allows a flexible and responsive layout yet provides the ability to drag in stacks to enable all the default features that make RapidWeaver so straightforward to use placing each stack wherever we wanted to on a page We wanted to make it so any RapidWeaver user can create a totally responsive and flexible site without needing to use RapidWeaver s default page plugins With the Blueball FreeStack Responsive theme and stacks we think we have achieved that goal and made it simple enough that any RapidWeaver user can do it Start with a blank page End up with a stunning and unique RapidWeaver web site layout design that you wanted to create In the following pages we tell you how to do this with simple detailed instructions for the theme it s variations and each FreeStack Responsive theme st
3. For example you could use the name body_bg02 jpg Make sure you save your body background image as a jpg file or png file depending on which theme variation you plan to use on the site page 2 Drag and drop your custom image into the Resources area in RapidWeaver and select the corresponding custom body background image theme variation for it The next time you preview your site page you ll see your new custom body background image appear in place FAQ What is the best way to add a blog page into a FreeStack Responsive Stacks page Answer Use the RW Writer web app and RW Writer blog stacks Adding a blog into your stacks page is now easier than ever for you or your clients when you use RW Writer To get more information on this innovative low cost stacks blog solution for RapidWeaver go to https rwwriter com 2013 2014 Blueball Design LLC USA All Rights Reserved Page 56 Blueball FreeStack Responsive theme and stacks License and Usage details Attention Designers Please read this Usage License before incorporating any part of this Blueball FreeStack Responsive theme and stacks into your RapidWeaver site By Incorporating any part of this Blueball FreeStack Responsive theme and stacks in your own work you are agreeing to be bound by the terms of this license listed below Licensing and Usage Rights This theme template was created by the designers at blueballdesign com and is copyright 2013 2014 by Blueball De
4. Palatino Raleway Roboto Roboto Slab Rufina Source Sans Pro Trebuchet Ubuntu Verdana and Yanone Kaffeesatz Indicates Google fonts Sidebar Header Alignment Left default right and centered Footer Text Alignment Left default right and centered Links Underline Link on hover off default link off hover off and link off hover on Controls all link states on FreeStack Responsive site page unless stacks have link styling controls built into them which will override these theme variation settings 2013 2014 Blueball Design LLC USA All Rights Reserved Page 8 21 Body Background Image Options No body background image default 20 more custom body background image options Custom body image theme variations 1 through 10 are for jjpog images and 11 through 20 are for png images Please see the included Blueball_FreeStackR_CustomImgsv2 0 pdf file for more details on creating your custom body background images Custom images are now added into the Resources area in RapidWeaver and linked to automatically for you when you select the corresponding custom image theme variation 3 Body Background Image Repeat tiling Options Repeat default Repeat Horizontally and No Repeat Cover 25 Color picker options Body background color content text color link active link hover link visited headline H1 headline H2 headline H3 headline H4 headline H5 title slogan sidebar headline sidebar text si
5. 49 FreeStack R Tumblr Limited stack Pg 50 51 Table of contents Continued e FreeStack R Twitter Follow Me Button stack Pg 52 e FreeStack R Twitter Share Content Button stack Pg 53 e FreeStack R Theme FAQS insesscccnnacrnenastsssonsciunusanangeasentnasdavanmnuaneadsensanes Pg 54 56 e License and Usage Details cce Pg 57 58 e Legalese la ares ea cecs gencdacan neat esacuesausthinxs ov ehovsatsvexaestun e IEn TENTES R ES a RENE Rae Pg 58 2013 2014 Blueball Design LLC USA All Rights Reserved Page 4 What s Included In Your Blueball FreeStack Responsive Theme and Stacks Bundle Download After downloading your file double click on it to unzip your Blueball FreeStack Responsive theme folder Inside your BlueballFreeStack_Responsive_v2 3 folder you will find the FreeStack Responsive theme 22 FreeStack Responsive stacks shown below 3 readme files and 3 folders of preset background images for the body background theme variations and preset gradient background images for the nav menu stacks Blueball FreeStack Responsive rwtheme Rapidweaver theme 22 Blueball FreeStack stacks FreeStack R 2Columns stack FreeStack R 3Columns stack FreeStack R Breadcrumb stack FreeStack R Contact Plus stack FreeStack R FileShare stack FreeStack R Fixed Height stack FreeStack R Footer stack FreeStack R iFrame stack FreeStack R Image BG stack FreeStack R Image stack FreeStack R Logo stack FreeStack R MaxWi
6. Default is White FFFFFF Background Sub Current Set sub nav menu level current background color here Default is Black 000000 Border Sub Set sub nav menu level top and bottom borders color here Default is Light Gray EFEFEF 2013 2014 Blueball Design LLC USA All Rights Reserved Page 38 Using the FreeStack NavMenu Res2 stack This stack is used to create and display a responsive nav menu for your site that is generated by RapidWeaver The horizontal responsive nav menu features user supplied custom background image with multiple drop down sub menu levels and much more When the screen width is less than the user specified break point width the nav menu converts to a stylish popup nav menu for viewers to use on mobile devices Do not use this stack in the sidebar or at the bottom of the page 1 Select the FreeStack R NavMenu Res 2 stack in the Stacks elements library and drag it into position on your Stacks page 2 Set the stack s various hud controls as needed to blend in with your page layout design 3 Adjust the stack s margins padding and borders in the Stacks plugin HUD area Using the FreeStack NavMenu Res2 stack s built in HUD controls NOTE Due to the long vertical height of the stack s hud controls area have broken the hud controls image up into several smaller images to view better There are 2 sections in the FreeStack R NavMenu Res2 stack s hud controls Mobile Popup Nav Menu Settings M
7. Index Sets the z index value of the stack Default is 999 Adjust as needed to position your nav menu stack above other stacks on the page Helpful for those using lightboxes on a stack page that have lower z index values Menu Alignment Pop up menu control lets you choose between left right and center alignment for your main nav menu link elements Default is Left Align Border Radius Use the slider control to add round corners to the main parent nav menu level Default radius is Opx Opx to 16px border radius available Menu Height Use the slider control to increase or decrease the main parent nav menu level height Default height is 40px 20px to 100px height available DEFAULT NAV MENU SETTINGS Menu Font Size 1 0 75 em Font Weight Bold 7 Z Index 999 Menu Alignment Left Align 7 Border Radius gt 0 px Menu Height ee p 40 px Menu Padding e pee 14 px Down Arrow Colo White Arro Text Color Backard Color B Text Hover Backgrd Hover B Text Current Backgrd Current BE Menu Padding Use the slider control to increase or decrease the main parent nav menu links right padding Default right padding is 14px 10px up to 80px right padding available Down Arrow Image Color Select from 4 down arrow indicator images Black solid black 50 transparent White solid and white 50 transparent Default is white solid Text Color Set main nav menu active text color her
8. Mobile Logo Size 75 M Logo Align Logo Center All Rights Reserved Page 31 Mobile Units Sets the measurement unit you want used on your mobile logo size setting Select from Percentage Pixel or Em Default is set to Percentage Mobile Logo Size Slider control allows you to set the percentage size your logo image will scale down to when displayed on a smart phone or tablet screen like an iPhone or iPad for example Default is set to 75 M Logo Alignment Select from center left or right alignment Default is center This is very useful when your desktop logo is aligned to the left and you want your mobile logo to be center aligned for example Production Tip For the best display results your desktop logo image should be at 100 of the size you want it to display at on your desktop layout site page to start with Set the Mobile Logo Size setting to reduce the logo image size as needed for optimal smart phone and tablet screen display 2013 2014 Blueball Design LLC USA All Rights Reserved Page 32 Using the FreeStack R Max Width stack This stack is used to set a maximum width the contents within it will display up to in a browser window Since the FreeStack Responsive theme uses a fluid width by default this container stack allows you to set a maximum width that it will display up to while still retaining the fluidity of its page stack elements at lesser browser window widths 1 Select the FreeStack R Max
9. area in the Site Setup window under the General tab 2 Select the FreeStack R Logo stack in the Stacks elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 3 Set the breakpoint width at which your mobile logo image size will display at for smart phones and tablet display 4 Set the mobile logo size Default size is 75 Default desktop size is always 100 5 Adjust the stack s margins padding and borders in the Stacks plugin HUD area Using the FreeStack R Logo stack s built in HUD controls Logo Alignment Select from center left or right alignment Default is center Desktop Units Sets the measurement unit you want used on your desktop logo size setting Select from Percentage Pixel or Em Default is set to Percentage Image Max Size Set the maximum width the logo image will display up to on desktop layout Default is set to 100 Note if you select for Desktop Units you cannot set a number higher than 100 Mobile Breakpoint Slider control allows you to set the breakpoint width your mobile logo image size will display at on a tablet or smartphone Default is set to 600px 2013 2014 Blueball Design LLC USA FreeStack R Logo Logo Alignment Logo Center Desktop Units Percentage Image Max Size 100 LOGO MOBILE LAYOUT SETTINGS Mobile Breakpoint 7 600 px Mobile Units Percentage
10. needs 4 Adjust the stack s margins padding and borders in the Stacks plugin HUD area Using the FreeStack R File Share stack s built in HUD controls File Names 1 5 Replace the default with your download file name s These names must exactly match the download file names you added into the Resources area IMPORTANT If you are not using a link leave the default in the file name area Link Text 1 5 Replace the default text with what you want your links to say for each download file you are creating a link for If you 2013 2014 Blueball Design LLC USA Link 1 Text Link 1 Icon File 2 Name Link 2 Text Link 2 Icon File 3 Name Link 3 Text Link 3 Icon File 4 Name Link 4 Text Link 4 Icon File 5 Name Link 5 Text Link 5 Icon Text Size Line Height Link Color Hover Color Link 1 Description PDF gt N Link 2 Description PDF pod S Link 3 Description Link 4 Description PDF e Link 5 Description PDF 4 N op 0 78 em All Rights Reserved Page 22 are not using a link leave the default text there It will not appear when you preview the page or after publishing your page Link Icon 1 5 Select one of 3 available download icon images using the popup menu for each of the links you have enabled Default is set to a PDF icon image You c
11. s color picker theme variations 2013 2014 Blueball Design LLC USA All Rights Reserved Page 18 Using the FreeStack R Contact Plus stack This is a simple but very secure and highly customizable responsive contact form stack The FreeStack R Contact Plus stack features built in spam prevention measures to help prevent spam robot form submissions from happening an encryption key a csrf token and a hidden honey pot form field This form requires that the stacks page has a php file extension on its name or it will not work 1 Select the FreeStack R Contact Plus stack in the stacks library and drag it into position onto your Stacks page that you have applied the FreeStack Responsive theme to 2 Set your Contact Form stack s page name in the page inspector window This must end with php 3 Add in the needed information in the FreeStack Contact Plus stack s hud window 4 Adjust the stack s margins padding and borders in the Stacks plugin HUD area Using the FreeStack R Contact stack s built in HUD controls Email To This is the email address you want your contact form s content to be emailed to Please be sure to use a valid email address here or the form will not work correctly Form Field 1 This is the text that will appear directly above the first form field Default is is set to Name Field 1 Width Use the slider control to set the width of the form field 1 input area using percentage Default
12. up the FreeStack theme s Contents folder to add your custom images in there Make color and style adjustments to stacks on your sites pages from one place now in the FreeStack Responsive theme Based on MANY FreeStack user requests and complaints about have to adjust each individual instance of a stack on their site pages to change its font color etc we ve made this dead simple and quick to do in the FreeStack Responsive theme s new theme variations Let s say you want to change the color of the link in all instances of the FreeStack Responsive Footer stack on all 30 of your site pages Before this would have taken you a while to do Now you can do it completely from the theme variations window in the FreeStack Responsive theme by adjusting the colorpicker for the footer link active state in and then saving the change in the theme style you are using That s it Done 2013 2014 Blueball Design LLC USA All Rights Reserved Page 12 How to use the Blueball FreeStack Responsive stacks on your Stacks site page After you install the FreeStack Responsive theme s stacks into RapidWeaver you will see them in the Stacks Elements library You use the Blueball FreeStack Responsive theme stacks and add them onto a Stacks page like you would any other stack Just select it in the Stacks Elements library in the Blueball FreeStack Responsive group that appears in the right side of the RapidWeaver work area and drag it ont
13. various content stacks into it The FreeStack Max Width container stack is automatically centered horizontally in the window using the maximum width amount specified Production Tip The Min Width settings you use in both your desktop and mobile layouts in the FreeStack R Max Width stack MUST be less than the Max Width setting amounts used or your content in the stack will not display correctly 2013 2014 Blueball Design LLC USA All Rights Reserved Page 34 Using the FreeStack NavMenu Res1 stack This stack is used to create and display a responsive nav menu for your site that is generated by RapidWeaver The horizontal responsive nav menu features solid background colors with multiple drop down sub menu levels and much more When the screen width is less than the user specified break point width the nav menu converts to a stylish popup nav menu for viewers to use on mobile devices Do not use this stack in the sidebar or at the bottom of the page 1 Select the FreeStack R NavMenu Res 1 stack in the Stacks elements library and drag it into position on your Stacks page 2 Set the stack s various hud controls as needed to blend in with your page layout design 3 Adjust the stack s margins padding and borders in the Stacks plugin HUD area Using the FreeStack NavMenu Res1 stack s built in HUD controls NOTE Due to the long vertical height of the stack s hud controls area have broken the hud controls image up into
14. way to update your footer text 2013 2014 Blueball Design LLC USA All Rights Reserved Page 25 Using the FreeStack R iFrame stack This useful responsive iFrame stack allows you to easily display another web site page of your choice within it on your stacks page 1 Select the FreeStack R iFrame stack in the Stacks elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Add in the site url address of the web page you wish to display within your iFrame stack 3 Set the iFrame stack width 4 Set scroll bars to be visible or to be hidden disabled 5 Adjust the stack s margins padding and borders in the Stacks plugin HUD area Using the iFrame stack s built in HUD controls Site URL Enter the web address of the page you want to see displayed within the FreeStack R iFrame stack This must be the full absolute url path to the page Example http www domainname com pagename html iFrame Height Use the slider control to set the height of the FreeStack R iFrame stack area that Site URL Enter Page URL the remote page content will display within The default amount is set to iFrame Height e 400 px 400px Height can be adjusted from 100px tall to a maximum height of 2000px tall Set Scroll Bars Scroll Bars Set Scroll Bars Sets the scroll bars in the FreeStack R iFrame stack to be visible or hidden Default is set to visible Op
15. 0 of the screen width Default break point width is 600px 2013 2014 Blueball Design LLC USA All Rights Reserved Page 16 Production Tip To preview how the FreeStack R 3Columns stack will break at your specified break point width click on the small gear icon at the bottom left of the RapidWeaver work window go to Preview and select a browser like Safari which will open up a new window showing your page Reduce the screen width down below your break point width to see the 3Columns stack columns break and display as 1 column each M Top Padding Slider control lets you add top padding to all 3 columns for mobile layout display Default is Opx Max top padding is 100px M Right Padding Slider control lets you add right padding to all 3 columns for mobile layout display Default is Opx Max right padding is 100px M Bottom Padding Slider control lets you add bottom padding to all 3 columns for mobile layout display Default is Opx Max bottom padding is 100px FreeStack R 3Columns Width of the 3 columns is preset Just drag your content into the columns Top Padding eo 0 px Right Padding bw 0 px Bottom Padding e 0 px Left Padding pm 0 px AORTE EEETEEEIEEEELEN 3 COLUMNS MOBILE LAYOUT SETTINGS Break Point qe p 600 px saraa Mna M Top Padding 0 px M Right Padding 0 px M Bottom Paddinc O 0 px M Left Padding 0 px Yurrerearenieecegege M Left Padding Slider control lets you a
16. 014 Blueball Design LLC USA All Rights Reserved Page 44 Using the FreeStack R Styler stack This VERY useful utility container stack allows you to drag in other stacks within it position them and then you can use the FreeStack R Styler stack s hud controls to set and apply css styling to elements in those stacks contained within it that will override the FreeStack Responsive theme s css styling and any individual stack s css styling contained within it Great to use for styling specific sections on a site page outside of the FreeStack Responsive theme s default css styling 1 Select the FreeStack R Styler stack in the Stacks 2 elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Drag in other stacks within the FreeStack R Styler stack set them up and position them as needed 3 Adjust the FreeStack R Styler stacks various hud controls to what you want to use for styling the various stack elements inside the FreeStack R Styler stack Using the FreeStack R Styler stack s built in Desktop Layout HUD controls Text Color Set text color here Default is Black 000000 Content Text Size Use the slider control to enlarge or reduce the FreeStack R Styler responsive stack paragraph text size Default is 90em Line Height Slider control allows you to set text line height from Oem to 5em Default text line height is 1 2em Link Color Set link active c
17. 46 Using the FreeStack R Styler stack s built in Mobile Layout HUD controls Breakpoint Slider control allows you to set the breakpoint width at which your mobile STYLER MOBILE LAYOUT SETTINGS layout styling will be applied to your stacks content within the FreeStack R Styler stack Break Point e gt 600px Default is set to 600px M Content Text e p 0 90 em M Content Text Use the slider control to M Line Height 1 20 enlarge or reduce the mobile paragraph text Eae ae aai size Default is 90em M HTag Line Hgh gt 1 20 em M Line Height Slider control sets the mobile text line height from Oem to 5em Default text line height is 1 2em M H2 Size exe 2 00 em M H1 Size ee 2 30 em M HTag Line Height Use slider control to M H3 Size 1 60 em increase or decrease the mobile HTags headlines a line height within the FreeStack R Styler stack Default is 1 2em MHS Size 1 20 em M H4 Size pm 1 40 em M H1 Size Use the slider control to enlarge or reduce the FreeStack R Styler stack s mobile H1 headline size Default size is 2 3em M H2 Size Use the slider control to enlarge or reduce the FreeStack R Styler stack s mobile H2 headline size Default size is 2em M H3 Size Use the slider control to enlarge or reduce the FreeStack R Styler stack s mobile H3 headline size Default size is 1 6em M H4 Size Use the slider control to enlarge or reduce the FreeStack R Styler stack s mob
18. Explorer 9 Internet Explorer 10 Internet Explorer 11 Opera Android OS 2013 2014 Blueball Design LLC USA All Rights Reserved Page 7 Blueball FreeStack Responsive theme features and theme variations details The Blueball FreeStack Responsive theme is unique in it s feature set and how it works in conjunction with the included FreeStack Responsive stacks to create your site layout Theme variations Global Font Size 4 global sizing options available Small Normal default Large and X Large Font sizes are set using ems Controls and sets all font sizing 24 Content Font Styles Arvo Bitter Buenard Cabin Cardo Exo Fira Sans Georgia Helvetica default Lato Lucida Grande Montserrat Open Sans Oswald Palatino Raleway Roboto Roboto Slab Rufina Source Sans Pro Trebuchet Ubuntu Verdana and Yanone Kaffeesatz Indicates Google fonts 26 Headline Font Styles Arvo Bebas Bitter Buenard Cabin Cardo Exo Fira Sans Georgia Helvetica default Lato Lobster Lucida Grande Open Sans Oswald Palatino Raleway Roboto Roboto Slab Rufina Source Sans Pro Tangerine Trebuchet Ubuntu and Yanone Kaffeesatz indicates Google fonts Indicates font face fonts 25 Nav Menu Font Styles Arvo Bitter Buenard Cabin Cardo Exo Fira Sans Georgia Helvetica default Lato Lobster Lucida Grande Montserrat Open Sans Oswald
19. OBETO ONAE SETTINGS Mobile Menu Font Size Slider control allows you to set the popup nav menu font Mobile Menu Font gt 18px size for smart phone and tablet users depending on breakpoint set by user Default is 18px Font size 12px to 20px M Sub Bullet Style Dash Mobile Nav Title Add the title for your Nav Breakpoint m 600 px mobile nav popup menu Default is NAV Ta MENU M Sub Bullet Style Select from 4 mobile sub menu level bullet styles Dash default Arrow Dot and Plus Mobile Nav Title NAV MENU Nav Breakpont Set the window width at which the mobile nav menu layout will display at 2013 2014 Blueball Design LLC USA All Rights Reserved Page 39 Default Nav Menu Settings Main Parent Nav Menu Level Menu Font Size Use the slider control to enlarge or reduce the default nav menu font size Default is 75em Font sizes are Oem to 3em Font Weight Pop up menu control lets you choose between normal and bold font weights for your nav menu text Default font weight is bold Z Index Sets the z index value of the stack Default is 999 Adjust as needed to position your nav menu stack above other stacks on the page Helpful for those using lightboxes on a stack page that have lower z index values Menu Alignment Pop up menu control lets you choose between left right and center alignment for your main nav menu link elements Default is Left Align Border Radius Use the slider c
20. Set the Y FreeStack R Transparent background color of the FreeStack R Transparent stack Default is White Background Color FFFFFF Set Transparency qe 70 Set Transparency Use slider in control to set transparency value of ap the background color Default is 70 Transparency value ranges from 0 completely transparent color to 99 solid color BG Corner Radius Use slider control to set the corner radius of the background color div area Default is Opx Corner radius values range from Opx up to 24px Production Tip If you are using a border on your Transparent stack you must also set the Rounded Corners hud control to match the setting used in the BG Corner Radius hud control for it to display correctly and match up with your background color s corner radius Production Tip Although you can use other solid background colors White FFFFFF or Black 000000 are the most commonly used background colors where transparency opacity values are applied and will give you the most consistent transparency display results when placed over another solid background color or image 2013 2014 Blueball Design LLC USA All Rights Reserved Page 49 Using the FreeStack R Tumblr Limited stack This responsive stack displays your Tumblr blog within it You can display your Tumbir blog anywhere you want to on the page with this stack This is an excellent alternative to using RapidWeaver s default blo
21. Width stack in the Stacks elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Set the maximum width you want your stack and its content to display up to 3 Adjust the stack s margins padding and borders in the Stacks plugin HUD area Using the FreeStack R Max Width stack s built in HUD control Desktop Units Sets the measurement you want used on your desktop max and min width settings Select from Percentage Pixel or Em Default is set to Percentage Max Width Slider control allows you to set the maximum width that the FreeStack R Max Width stack and its content will display up to If you select percentage you can use up to 100 If you chose pixels you can go up to 5000px The default Max Width is set to 960px to start with Min Width Slider control allows you to set the minimum width that the FreeStack R Max Width stack and its content will display at Minimum width can be adjusted from minimum width of 100px up to a maximum width of 3000px The default Min Width is set to 320px to start with Your Min Width setting amount MUST be less than the Max Width amount 2013 2014 Blueball Design LLC USA Y FreeStack R Max Width DESKTOP LAYOUT WIDTHS Set desktop layout max and min widths Desktop Units Pixel Max Width 960 320 Min Width gt MOBILE LAYOUT WIDTHS Set mobile layout max and min widths Mobile Breakpo
22. ack We hope you enjoy using the Blueball FreeStack Responsive theme as much as we enjoyed creating it for Rapidweaver and Stacks page users Turn the page and get started now 2013 2014 Blueball Design LLC USA All Rights Reserved Page 2 Table of contents 2013 2014 Blueball Design LLC USA All Rights Reserved Page 3 Introduction Pg 2 Table of Contents Pg 3 4 What s included with your FreeStack Responsive theme Pg 5 FreeStack Responsive theme and stacks installation Pg 6 RapidWeaver and Stacks plugin requirements Pg 7 Browsers Supported Pg 7 Details on FreeStack Responsive theme features and variations Pg 8 9 Important Details to note when building your FreeStack Responsive site Pg 10 12 How to use the FreeStack Responsive theme stacks Pg 13 FreeStack R 2Columns stack Pg 14 15 FreeStack R 3Columns stack Pg 16 17 FreeStack R Breadcrumb stack Pg 19 FreeStack R Contact Plus Form stack Pg 19 21 Freestack R File Share stack Pg 22 23 FreeStack R Fixed Height stack Pg 24 FreeStack R Footer stack Pg 25 FreeStack R iFrame stack Pg 26 FreeStack R Image BG Pro stack Pg 27 28 FreeStack R Image stack Pg 29 30 FreeStack R Logo stack Pg 31 32 FreeStack R MaxWidth stack Pg 33 34 FreeStack R NavMenu Res1 stack Pg 35 38 FreeStack R NavMenu Res 2 stack Pg 39 42 FreeStack R Sidebar stack Pg 43 FreeStack R Slogan stack Pg 44 FreeStack R Styler stack Pg 45 47 FreeStack R Title stack Pg 48 FreeStack R Transparent stack Pg
23. ack s built in HUD controls ie eh sia een set the height of the FreeStack R Fixed Height stack The default amount is set Fixed Height ex 400px to 400px Fixed melon can be set from Ceea o o Opx tall to a maximum height of Ce 2000px tall Min Fixed Height Use the slider control to set the minimum fixed height of the FreeStack R Fixed Height stack that your content will display at The default amount is set to 200px Fixed height can be set from Opx tall to a maximum height of 1500px tall Production Tip If you plan to add in stacks and content that will be taller than the set height of your FreeStack R Fixed Height stack set the height to be taller initially at least twice the amount This makes it much easier to add in your stacks and content into the FreeStack R Fixed Height stack content area Once you are finished adding in your stacks and content reset the Fixed Height amount to your final desired height and preview your page You ll see your content appear within the FreeStack R Fixed Height stack with a vertical scroll bar on the right side of the stack to use to scroll down through your content You can use multiple instances of this stack on a page if needed 2013 2014 Blueball Design LLC USA All Rights Reserved Page 24 Using the FreeStack R Footer stack This stack displays the content you input into the footer area fields in the Site Setup or Page Inspector window You can display your footer area anyw
24. alldesign com and it s designers Redistribution of this RapidWeaver theme template and stacks is strictly prohibited 2 All theme and stacks files including but not limited to CSS files images files and javascript are Copyright 2013 2014 blueballdesign com and Blueball Design LLC USA 3 UNLESS OTHERWISE AGREED TO BY THE PARTIES IN WRITING THIS DESIGN IS OFFERED BY THE COPYRIGHT HOLDER AS IS AND ANY REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE MATERIALS EXPRESS IMPLIED STATUTORY OR OTHERWISE INCLUDING WITHOUT LIMITATION WARRANTIES OF TITLE MERCHANTABILITY FITNESS FOR A PARTICULAR PURPOSE NONINFRINGEMENT OR THE ABSENCE OF LATENT OR OTHER DEFECTS ACCURACY OR THE PRESENCE OR ABSENCE OF ERRORS WHETHER OR NOT DISCOVERABLE ARE DISCLAIMED 4 EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW IN NO EVENT WILL THE COPYRIGHT HOLDER BE LIABLE ON ANY LEGAL THEORY FOR ANY SPECIAL INCIDENTAL CONSEQUENTIAL PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THIS THEME OR STACKS EVEN IF THE COPYRIGHT HOLDER HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES 2013 2014 Blueball Design LLC USA All Rights Reserved Page 58
25. an choose from PDF Download Arrow and Word Doc icon images If you are not using a link leave the default selection in place Icon images will not appear when you preview the page or after publishing your page for inactive links Text Size Use the slider control to enlarge or reduce the FreeStack R FileShare responsive stack link text size Default is 78em Line Height Slider control allows you to set text line height from Oem to 5em Default link text line height is 1 1em Link Color Color picker sets link color to any color you want Default color is Red CD180D Link Hover Color Color picker sets link hover color to any color you want Default color is Gray 555555 2013 2014 Blueball Design LLC USA All Rights Reserved Page 23 Using the FreeStack R Fixed Height stack This stack is a simple but extremely useful one to use to display content within it at a set fixed height If your content stacks within it extend beyond the set height a vertical scroll bar will appear on the right side of the stack for the viewer to use to scroll down through your content 1 Select the FreeStack R Fixed Height stack in the Stacks elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Set the height amount in the height hud control field 3 Adjust the stack s margins padding and borders in the Stacks plugin HUD area Using the FreeStack R Fixed Height st
26. at will display Default is 3 If the total height of the posts exceeds the Tumblr Height specified scroll bars will automatically display allowing you to scroll through the posts in full Title Size Use the slider control to enlarge or reduce your Tumblr title size Default size is 1 8em Title Line Hght Slider control allows you to set the title line height from Oem to 5em Default title line height is 1em Title Color Set your Tumblr blog entry headline color here Adjust as needed Default is Black 000000 Post Text Size Use the slider control to enlarge or reduce Tumblr post text font size Default is 78em Available size range is from Oem up to 5em Text Line Hght Use slider control to increase or decrease the Tumblr post text line height Default is 1 2em Post Text Color Set your Tumblr blog entry text color here Adjust as needed Default is Black 000000 Link Color Set Tumblr blog entry link active color here Default is standard Blue OOOOFF Link Hover Color Set Tumblr blog entry link hover color here Default is standard Red FFOOOO Link Visit Color Set Tumblr blog entry link visited text color here Default is standard Purple 800080 Divider Color Set the divider border color that separates the individual Tumblr blog posts here Default is Gray CCCCCC Production Tip When creating your Tumblr blog post add in the title and then in the first line of the main text post area add in the date in a smaller italic
27. ax Size 75 2013 2014 Blueball Design LLC USA All Rights Reserved Page 29 Mobile Units Sets the measurement you want used on your mobile setting Select from Percentage Pixel or Em Default is set to Percentage M Image Max Size Set the maximum width the image will display up to on mobile layout Default is set to 75 Note if you select for Desktop Units you cannot set a number higher than 100 M Image Min Size Set the minimum width the image will display at on mobile layout Default is set to 40 Note if you select for Desktop Units you cannot set a number higher than 100 Your minimum width size HAS to be set smaller than your maximum width size Production Tip Make sure your FreeStack R Image stack s width is set to Fill default or Fluid You cannot set a fixed width on the stack if you want the image within to be responsive and scale down correctly Production Tip For the best display results your desktop image should be at 100 of the size you want it to display at on your desktop layout site page to start with Set the Mobile Image Size setting to reduce the image size as needed for optimal smart phone and tablet screen display 2013 2014 Blueball Design LLC USA All Rights Reserved Page 30 Using the FreeStack R Logo stack This stack is used to display the logo image that you add into Rapidweaver s Site Setup window area 1 Drag and drop your logo image into the Site Logo image well
28. bmit Default text is Your email could not be sent Try again later Text Color Color picker allows you to set form label text color to any color you want Default color is Black 000000 Field Border Color Color picker allows you to set the border color around the form s input areas to any color you want Default color is Gray 555555 Field Background Color Color picker allows you to set the background color of the form s input field areas to any color you want Default color is White FFFFFF 2013 2014 Blueball Design LLC USA All Rights Reserved Page 21 Using the FreeStack R File Share stack This is a very useful stack for anyone wanting to add up to 5 downloadable files to a Stacks 2 page and create links for them for a viewer to click on to download the files with It creates download links whose text you input vw FreeStack R FileShare File 1 Name with 1 of 3 user selectable file icon images offset to the left of the link Don t need 5 links The links not used are automatically deleted by the stack on preview or when published 1 Select the FreeStack R FileShare stack in the Stacks elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Add your download files to the Resources area in the page inspector window noting what the names of the files are exactly 3 Set up the stack s hud controls as need to fit your layout
29. cou nt Alt Text After on Twitter Button Color Blue Button Color There are 3 Twitter button images available Use the pop up menu control to choose what color button you want to use in your Blue FreeStack R Twitter Button stack on your site page You have 3 button color choices blue silver and black Default is set to blue Button examples Silver are shown to the right Note button images are not actual size and are just for example only here Black FOLLOW ME ON Ewitter FOLLOW ME ON twitter 2013 2014 Blueball Design LLC USA All Rights Reserved Page 52 Using the FreeStack R Twitter Share stack This stack adds and displays a Tweet button image that is linked to your Twitter account page This Tweet button will let your site viewers share your content on Twitter and see the number of times the content was shared on Twitter You can display this Twitter Share button image anywhere you want to on the page with this stack 1 Select the FreeStack R Twitter Share stack in the Stacks 2 elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Add your Twitter account name button type and button size using the FreeStack R Twitter Share stack s hud controls 3 Adjust the stack s margins padding and borders in the Stacks plugin hud area Using the Twitter R Share stack s built in HUD controls Twitter Name Add yo
30. cture and to build responsive site layouts with Some are carried over from the original FreeStack theme and many were deleted Most are new and specific to the FreeStack Responsive theme How come can only tile body background images 3 ways in the FreeStack Responsive theme To allow your background image to display best across all platforms and screen sizes you can only tile a custom body background image using either repeat default repeat x horizontal tiling or the new no repeat cover option for those who ve asked for full screen background image By default all body background images are positioned from the top left corner of the screen except for the no repeat cover option where the image is centered by default 2013 2014 Blueball Design LLC USA All Rights Reserved Page 11 Where s the FreeStack Header and Content stacks Both these 2 stacks have been removed from the FreeStack Responsive theme and stacks set as they are no longer needed The Image BG Pro stack can be used in place of the Header stack and the background image in it is responsive Where do I need to place my custom images at now with the FreeStack Responsive theme Good news on this All the body background images in the FreeStack Responsive theme are linked to the Resources area in Rapidweaver by default So all your images from your custom body background images for example just need to be dragged into the main level of the Resources area No more opening
31. d to go Seriously if you have a basic working knowledge of using RapidWeaver the Stacks page plugin and what responsive web site design is then you can easily work with the FreeStack Responsive theme and stacks and create your responsive RapidWeaver site FAQ Can I create my entire site using only Stacks pages with the FreeStack Responsive theme and stacks Answer Yes you can Our focus when designing this responsive theme and its stacks was to allow a RapidWeaver user complete control over the layout and design of their site while allowing them to be able to build their RapidWeaver site using just Stacks pages Using the Freestack Responsive theme and stacks along with our FreeStack Responsive Add OnsPack 1 and 2 stacks bundles you can build easily build your entire responsive RapidWeaver site with just Stacks pages FAQ How do the FreeStack Responsive Nav stacks work Answer They create a nav menu for you just like any other theme does All you have to do is drag and drop the FreeStack Responsive nav menu stack of your choice onto your Stacks page that has the FreeStack Responsive theme applied to it Set your options for it in the hud area and RapidWeaver will create the nav menus complete with drop down sub menu levels automatically for you They will also convert to a mobile friendly popup nav menu format automatically for you at the specified breakpoint width FAQ My responsive stack s lightbox is displaying behi
32. dd left padding to all 3 columns for mobile layout display Default is Opx Max left padding is 100px 2013 2014 Blueball Design LLC USA All Rights Reserved Page 17 Using the FreeStack R Breadcrumb stack First with your site file open go to the Site Inspector window under the Advanced tab and make sure that the Display breadcrumb trail box is checked under Site Options Then close the Site Inspector window Now you re ready to start using the FreeStack R Breadcrumb stack 1 Select the FreeStack R Breadcrumb stack in the stacks library and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Set the alignment of the breadcrumb links and the line height 3 Adjust the stack s margins padding and borders in the Stacks plugin HUD area Using the Breadcrumb stack s built in HUD controls Breadcrumb Align Use the popup menu control to select the alignment for your FreeStack R Breadcrumb breadcrumb links text Default is left Breadcrumb Align Left Align B Alignment options are left right and Line Hght egea 1 00 em centered i gt Se Line Height Slider control allows you to set the breadcrumb links text line height from 1em to 5em Default links line height is 1em Production Tip The FreeStack R Breadcrumb stack s link text color and the various breadcrumb link states colors are all controlled within the FreeStack Responsive theme
33. debar link active sidebar link hover sidebar link visited footer text footer link active footer link hover footer link visited breadcrumb text breadcrumb link active breadcrumb link hover and breadcrumb link visited NOTE The built in colorpicker theme variation colors may be overridden by individual stacks that have their own built in hud control styling options on a Stacks 2 5 site page 8 Theme color styles We ve included 8 preset professional color schemes for you to select from and apply to your site pages You can also create your own custom theme style to use as well Theme styles included are FSR Blue FSR Brown FSR Green FSR Orange FSR Purple FSR Red FSR Slate and FSR Teal 2013 2014 Blueball Design LLC USA All Rights Reserved Page 9 Important Details to Note When Building Your FreeStack Responsive Web Site Creating and designing a responsive site page layout is very different from how you build a traditional site page layout It requires a different approach and methodology Below are some important items to note and remember while using the FreeStack Responsive theme and stacks The page width is set to 100 There are no page width variations to select By default the page width is set to 100 and is fluid i e it fills the full width of the browser window As screen size resolution changes the FreeStack Responsive layout can expand and contract for optimal viewing on every device Need to
34. desktop layout display Default is Opx Max top padding is 200px Right Padding Slider control lets you add right padding to both columns for desktop layout display Default is Opx Max right padding is 200px Bottom Padding Slider control lets you add bottom padding to both columns for desktop layout display Default is Opx Max bottom padding is 200px Left Padding Slider control lets you add left padding to both columns for desktop layout display Default is Opx Max left padding is 200px Break Point Slider control allows you to set the screen width that the 2 columns in the FreeStack R 2Columns stack will break at and then display as 1 column each at 2013 2014 Blueball Design LLC USA All Rights Reserved Page 14 100 of the screen width Used for mobile and tablet display Default break point width is 600px Production Tip To preview how the 2Columns stack will break at your specified break point width click on the small gear icon at the bottom left of the RapidWeaver work window go to Preview and select a browser like Safari which will open up a new window showing your page Reduce the screen width down below your break point width to see the 2Columns stack columns break and display as 1 column each M Top Padding Slider control lets you add top padding to both columns for mobile layout display Default is Opx Max top padding is 100px M Right Padding Slider control lets you add right padding to both colu
35. directly onto the RapidWeaver 6 program application icon in either your Applications folder or in your dock When you drop the file onto your RapidWeaver 6 icon image the item will automatically be installed into RapidWeaver 6 for you Once you finish your installation you must restart RapidWeaver 6 After installing your FreeStack Responsive stacks you ll see the Blueball FreeStack Responsive stacks grouped together in the Stacks Elements library window in a group called Blueball FreeStack Responsive making it easy to locate and select the FreeStack Responsive stacks to use and drag onto your Stacks page as you build your responsive RapidWeaver site pages 2013 2014 Blueball Design LLC USA All Rights Reserved Page 6 The Blueball FreeStack Responsive theme and stacks requires the following RapidWeaver and Stacks plugin versions The Blueball FreeStack Responsive theme and stacks requires Stacks version 2 5 and above page plugin The FreeStack Responsive theme and stacks will not work with Stacks v1 4 4 RapidWeaver version that works with Stacks 2 5 Must use Rapidweaver v5 3 24 and above The FreeStack Responsive theme and stacks are completely compatible with RapidWeaver 6 and its new features The Blueball FreeStack Responsive theme supports the following browsers Dogo Firefox Safari OS X and iOS Chrome desktop and mobile Internet Explorer 8 will not display CSS3 styling Internet
36. dth stack FreeStack R NavMenu Res1 stack FreeStack R NavMenu Res2 stack FreeStack R Sidebar stack FreeStack R Slogan stack FreeStack R Styler stack FreeStack R Title stack FreeStack R Transparent stack FreeStack R Tumblr Limited stack FreeStack R Twitter Button stack FreeStack R Twitter Share stack Can be used with most other traditional responsive RapidWeaver themes Please test for compatibility Cannot be used with Foundation theme 2013 2014 Blueball Design LLC USA All Rights Reserved Page 5 How to install your Blueball FreeStack Responsive theme and stacks into RapidWeaver 5 and RapidWeaver 6 Installing your FreeStack Responsive theme and stacks into Rapidweaver 5 just requires a quick double click on each item That s it If you are using RapidWeaver 5 3 2 or RapidWeaver 5 4 all you need to do is double click on the Blueball FreeStack Responsive rwtheme file and on each of the 22 FreeStack Responsive stack files to install them into RapidWeaver 5 Note that you can only have RapidWeaver 5 open for this to work If you also have RapidWeaver 6 on the same Mac you must close RapidWeaver 6 before using the above installation process for RapidWeaver 5 Once you finish your installation you must restart RapidWeaver 5 If you are using RapidWeaver 6 it is highly recommended to drag and drop the Blueball FreeStack Responsive rwtheme file and each of the 22 FreeStack Responsive stack files
37. e Default is White FFFFFF 2013 2014 Blueball Design LLC USA All Rights Reserved Page 36 Background Color Set main nav menu f Border Color active background color here Default is Black 000000 Border Width J 0 px Text Hover Set main nav menu hover text Sub Font Size P 0 75 em color here Default is Gray CCCCCC 5 Background Hover Set main nav menu Sub Menu Height Q 26 px hover background color here Default is Gray Ta ee ve u enu Width cua eee x 454545 7 p Text Current Set main nav menu current Sub Border Width eee 1 px text color here Default is White FFFFFF Sub Bkgd Opacity 70 Background Current Set main nav menu current background color here Default is Sub Menu Paddin ej 14 px Gray 454545 Sub Arrow Color White Arro Border Color Set main nav menu right i border color here Default is White FFFFFF Text Sub Level Border Width Use slider control to set the main nav menu li right border width Default is Opx width Available border width Opx to 5px Bckgrd Sub Level ME Text Sub Hover Bckgrd Sub Hover B Sub Nav Menu Level p Text Sub C Sub Font Size Use the slider control to ee enlarge or reduce the sub level nal menu Bkgrd Sub Curren EE font size Default is 75em Font sizes are Oem to 3em Border Sub Sub Menu Height Use the slider control to increase or decrease the sub level nav menu height Default height is 26px Available height 14
38. ed and edited in Photoshop by Blueball Design designers Images photos and graphics in our RapidWeaver themes and stacks may not be used anywhere other than in sites developed from the RapidWeaver themes and stacks you have purchased from Blueball Design 2013 2014 Blueball Design LLC USA All Rights Reserved Page 57 Liability Limitations BlueballDesign com RapidWeaverr themes and stacks are provided as is without warranty above and beyond updates bug fixes or repairs You may alter the appearance of the theme and or stack or its graphics but only for your personal use If you customize a Blueball Design theme or stack for a client you must purchase an additional Blueball theme or stack for your client if they plan to maintain their site themselves before passing the customized Blueball Design RapidWeaver theme and or stack on to them for future use Any modifications are at the sole risk of the user and BlueballDesign com does not guarantee the performance of any Blueball RapidWeaver theme template or stack and its files which have been altered or modified We also can not provide support for modified Blueball Design RapidWeaver themes and stacks or graphics You are solely responsible for adding or editing your RapidWeaver website s content We do not provide training for RapidWeaver or the Stacks page plugin Legalese Fine Print 1 The CSS in this theme and stacks are the creative work of Blueball Design blueb
39. esign This is an important consideration to remember when you are laying out your responsive site pages Because of the vast array of browser window sizes your site pages content will display on and be repositioned to fit within the only time you will be able to get pixel perfect layout is at the maximum width size specified for your page layout design if you use a maximum width setting on your site pages Otherwise it s not going to happen Remember the KISS principal when designing your responsive site pages for the best display results I can just apply the FreeStack Responsive Theme to my existing FreeStack site and it will automatically become responsive right Short answer is a strong emphatic NO The FreeStack Responsive theme and stacks are a completely different product from the original FreeStack theme and stacks Because of this you will have to build a completely new Rapidweaver site using just the FreeStack Responsive theme and stacks along with other third party responsive stacks If you want your site to be responsive in nature you have to use the FreeStack Responsive theme and stacks and ONLY responsive third party stacks If you don t your site will not be responsive Where are some of the theme variations used in the original FreeStack theme The FreeStack Responsive theme s theme variations are different than the original FreeStack theme s are and are set up to work best with the FreeStack Responsive theme s stru
40. font Then add in the remainder of your blog post When your blog post is displayed in the FreeStack R Tumblr Limited stack the date will appear right under your title 2013 2014 Blueball Design LLC USA All Rights Reserved Page 51 Using the FreeStack R Twitter Button stack This stack displays a minimal but stylish Follow Me Twitter button image in one of the 3 colors that is linked to your Twitter account page You can display this Follow Me On Twitter button image anywhere you want to on the page with this stack 1 Select the FreeStack R Tumblr Lite stack in the Stacks 2 elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Add in your Twitter account name and select a button color in the stack s hud controls 3 Adjust the stack s margins padding and borders in the Stacks plugin hud area Using the FreeStack R Twitter Button stack s built in HUD controls Twitter Name Add your Twitter account name here The name must match FreeStack R Twitter Button exactly with what you have set up on Twitter for your account name and is case sensitive Alt Text Before Follow Alt Text Before This is the text that is before your Twitter name in the alt text source code for the button image Alt Text After This is the text that is after your Twitter name in the alt text source code for the button image Twitter Name Add Twitter Ac
41. g page 1 Select the FreeStack R Tumblr Limited stack in the Stacks 2 elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Add in your Tumblr account name FreeStack R Tumblr Limited and adjust the headline color as needed in the stack s hud controls Tumblr Name Add Tumblr Account 3 Adjust the stack s margins ee padding and borders in the Stacks aie ey ae 3 plugin hud area N Title Size lt 2 em Using the FreeStack R a i Tumblr Limited stack s Title Line Hght 1 00 em built in HUD controls Title Color B Tumbir Name Add your Tumblr blog account name here The name must Post Text Size j 0 78 em match exactly with what you have set up a i on Tumblr for your account name and is an SE EEEE E case sensitive More hud controls details next page Post Text Color BE As an example our Tumblr account name is blueballdesign Link Color B Our Tumblr blog url is http blueballdesign tumblr com Link Hover Color I Link Visit Color B Divider Color 2013 2014 Blueball Design LLC USA All Rights Reserved Page 50 Tumbir Height Use the slider control to increase or decrease the height of your FreeStack R Tumblr Limited stack that your Tumblr blog will display within Default is set to 300px tall Tumblr Posts Use the slider control to set the number of Tumblr posts th
42. g the FreeStack Responsive theme stacks 2013 2014 Blueball Design LLC USA All Rights Reserved Page 13 Using the FreeStack R 2Columns stack This is a highly useful and powerful responsive stack to use for setting up and building your responsive page layout that s dead simple to use How to use the FreeStack R 2Columns stack 1 Select the FreeStack R 2Columns stack in the Stacks elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Adjust the columns width using the included left column width hud control and then set the breakpoint width 3 Adjust the column padding amounts as needed for desktop and mobile layouts using the stack s built in column padding hud controls Using the FreeStack R 2Columns stack s built in HUD controls see full hud controls image next page Left Column Width Slider control allows you to adjust the width of the left column from 10 to 90 The width of the right column is automatically adjusted for you The width of the 2 columns will total 100 There is no gutter width in this stack To space the columns content apart from each other add in some left and right padding amounts using the built in column padding hud controls to get the desired horizontal spacing you want to display for your columns content for both desktop and mobile layouts Top Padding Slider control lets you add top padding to both columns for
43. here you want to on the page with this stack 1 Select the FreeStack R Footer stack in the Stacks elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Select the FreeStack R Footer stack in the stacks library and drag it into position on your Stacks page 3 Adjust the stack s margins padding and borders in the Stacks plugin HUD area Using the FreeStack R Footer stack s built in HUD control Font Size Use the slider control to enlarge or reduce the footer font size Default is 90em Font sizes are Oem to 3em Line Height Slider control allows you to FreeStack R Footer set line height from 1em to 5em Default links line height is 1 2em the same as the default body line height in the Footer Line Hght e 1 20 em FreeStack Responsive theme Footer Font Size 0 95em Production Tip You control the footer font color and footer link state colors using the built in theme variations and colorpickers in the FreeStack Responsive theme itself Production Tip By using the footer field in Rapidweaver which in turn is displayed automatically within your FreeStack R Footer stack on each page you only have to update that single footer field area text and republish your site one time The updated footer field text will then be displayed automatically for you in all instances of your FreeStack R Footer stack automatically on all your site pages An easy
44. ibraries that they use the greater the possibility there is for a conflict or conflicts to arise Keep your Stacks page layout as simple as possible and do not overload it with too many third party stacks for the best display results FAQ Can I open up an existing RapidWeaver site and apply the FreeStack Responsive theme to it Answer No Since this theme starts with an empty blank Stacks page that you drag and drop stacks into position on the page on that each have part of a typical RapidWeaver page layout built into them no existing site page using a default RapidWeaver page plugin will display correctly in this theme However if your current site is built completely out of Stacks pages and stacks and uses a typical RapidWeaver theme you can convert it over to the FreeStack Responsive theme but it will take some work to do it Your best option is to create a new RapidWeaver site file apply the FreeStacks responsive theme to it and go from there dragging and dropping in the FreeStack Responsive stacks and other third party responsive stacks wherever you want to on the empty page to create your own unique responsive site design 2013 2014 Blueball Design LLC USA All Rights Reserved Page 54 Blueball FreeStack Responsive theme and stacks FAQs and answers FAQ How hard is it to use the FreeStack Responsive theme and stacks Answer Pretty easy overall If you can drag and drop a stack onto a Stacks page you re goo
45. ight e pmm 200 px stack you must uncheck the Edit BG Image checkbox to be able to add other stacks into the FreeStack R Image BG Pro stack s edit area and for Break Point Width 768px the stack to display correctly in preview mode MOBILE LAYOUT SETTINGS BG Image Height Adjust the height using the slider to match the height of the custom background image you added into the FreeStack R Image BG Pro stack Default height is set to 200px Break Point Set the screen width in pixels that the FreeStack R Image BG Pro stack will break at and display its mobile layout Default break point width is 768px Production Tip You need to keep in mind that the background image is responsive and will scale down to fit the screen width or the container div width it s located within if you 2013 2014 Blueball Design LLC USA All Rights Reserved Page 27 added it within another stack like a 1 or 2 column stack for example So not only will the width scale down the height does as well For example if you have added a text stack into the FreeStack Image BG Pro stack that has several sentences in it on smaller size screens this text may extend down below the bottom of the image as it rewraps to fit the smaller screen widths 2013 2014 Blueball Design LLC USA All Rights Reserved Page 28 Using the FreeStack R Image stack This simple but highly useful stack allows you to drag and drop an image into it that will automatical
46. ile H4 headline size Default size is 1 4em M H5 Size Use the slider control to enlarge or reduce the FreeStack R Styler stack s mobile H5 headline size Default size is 1 2em Production Tip You can use the FreeStack R Styler stack multiple times on a responsive site page as needed within reason But you cannot use a FreeStack R Styler stack within another FreeStack R Styler stack 2013 2014 Blueball Design LLC USA All Rights Reserved Page 47 Using the FreeStack R Title stack This stack displays the title text you input into the Title field area in the Site Setup or Page Inspector window You can display your Title text anywhere you want to on the page with this stack 1 Add in your text into the Title text field area in the Site Setup or Page Inspector window in RapidWeaver like normal 2 Select the FreeStack R Title stack in the Stacks 2 elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 3 Adjust the stack s margins padding and borders in the Stacks plugin hud area Using the FreeStack R Title stack s built in HUD controls Title Alignment Popup menu control lets you select slogan text alignment Choose from left right or centered Title Alignment Left Align s Default title text alignment is left Font Weight Bold Font Weight Popup menu control lets you select the weight of the Title Line Hght e y g
47. int 768 px Mobile Units Percentage M Max Width m 100 M Min Width lt 50 All Rights Reserved Page 33 Mobile Breakpoint Slider control allows you to set the breakpoint width your content in the FreeStack R Max Width stack will trigger responsive behaviour for your page elements scaling and repositioning themselves for mobile layout display on a tablet or smartphone Default is set to 768px Mobile Units Sets the measurement you want used on your mobile max and min width settings Select from Percentage Pixel or Em Default is set to Percentage M Max Width Slider control allows you to set the maximum mobile width that the FreeStack R Max Width stack and its content will display up to If you select percentage you can use up to 100 If you chose pixels you can go up to 3000px The default mobile Max Width is set to 100 to start with M Min Width Slider control allows you to set the minimum mobile width that the FreeStack R Max Width stack and its content will display at on your mobile layout If you select percentage you can use up to 99 note the Min Width setting MUST be less than the mobile Max Width setting used If you chose pixels you can go up to 3000px The default mobile Max Width is set to 50 to start with Production Tip You can use a FreeStack R Max Width container stack for a page container by setting the maximum width that you want your page content to display at and then drag and drop your page s
48. ize Use the slider control to enlarge or reduce the FreeStack R Styler stack s H4 headline size Default size is 1 4em H5 Color Sets headline h5 size color Adjust color as needed Default is Black 000000 H5 Size Use the slider control to enlarge or reduce the FreeStack R Styler stack s H5 headline size Default size is 1 2em Production Tip The FreeStack R Styler stack has a content container within it allowing you to drag and drop in as many stacks as you want into it The power of this stack and it s ability to override the stacks css styling contained within it and the FreeStack Responsive theme stack s css styling too FreeStack R Styler STYLER DESKTOP LAYOUT SETTINGS Text Color ME Content Text Size e p 0 90 em Pc ST OO he Line Height jee 1 20 em Link Color Link Underline Link Underline Link Hover Color B Hover Underline No Hover Li Link Visit Color B HTag Line Height 1 00 em H1 Color i H1 Size eee eee 2 30 em H2 Color B H2 Size J 2 00 em H3 Color B H3 Size OQ 1 60 em H4 Color B H4 Size C 1 40 em H5 Color a H5 Size ee ee 1 20 em make it a very powerful stack to use in your responsive site page layout especially when you want to modify a specific section of a site page to make it different from the rest of the page 2013 2014 Blueball Design LLC USA All Rights Reserved Page
49. lueball Design LLC USA All Rights Reserved Page 41 Sub Border Width Use slider control to set the sub nav menu level border width Default is 1px width Set to Opx to hide the border Available border width Opx to 5px Sub Background Opacity Set the opacity value of the sub nav menu level color background Default is 70 You can use any value between O and 99 O completely transparent 99 completely solid Sub Menu Padding Use the slider control to increase or decrease the sub nav menu level links li right padding Default right padding is 14 x Opx up to 80px right padding available Sub Arrow Color Select from 2 sub nav menu level right arrow indicator images Black white black 50 transparent and white 50 transparent These right arrow images indicate additional sub nav menu levels Text Sub Level Set sub nav menu level active link text color here Default color is White FFFFFF Background Sub Level Set sub nav menu level active link background color Default is Gray 333333 Text Sub Hover Set sub nav menu level hover text color here Default is Gray CCCCCC Background Sub Hover Set sub nav menu level hover background color here Default is Black 000000 Text Sub Current Set sub nav menu level current text color here Default is White FFFFFF Background Sub Current Set sub nav menu level current background color here Default is Black 000000 Border Sub Set sub nav menu level top and bottom borders colo
50. ly become responsive enabled and scale down as needed 1 Select the FreeStack R Image stack in the Stacks elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Drag your image into the image area of the stack and release 3 That s it Nothing else is needed Your image is now responsive and will scale as needed to fit Using the FreeStack R Image stack s built in HUD controls Image Align Select from left center and Y FreeStack R Image right image alignment Default is center DESKTOP IMAGE SETTINGS Desktop Units Sets the measurement you want used on your desktop setting Select from Percentage Pixel or Em Default is set image ign image Cente to Percentage Desktop Units Percentage i Image Max Size Set the maximum width the image will display up to on desktop layout Default is set to 100 Note if you select for Desktop Units you cannot set a MOBILE IMAGE SETTINGS number higher than 100 Image Max Size 100 Mobile Breakpoint Set the breakpoint width Mobile Breakpoint 600px at which your mobile logo image size will na i display at on smart phones and tablet display M Image Align Mobile Imag Default is set at 600px Mobile Units Percentage M Image Align Select from left center and right image alignment for mobile layout display Default is center M Image Min Size 3 40 M Image M
51. menu hover text color here Default is Gray CCCCCC Current BG Image Main parent nav menu level current background image Must tile horizontally Image height must match menu height set above Drag and drop it onto image well area or use the browse button to select your image with Text Current Set main nav menu current text color here Default is White FFFFFF Border Color Set main nav menu right border color here Default is White FFFFFF Border Width Use slider control to set the main nav menu li right border width Default is Opx width Available border width Opx to 5px Sub Nav Menu Level Sub Font Size Use the slider control to enlarge or reduce the sub level nav menu Border Color Border Width Q 0 px Sub Font Size Q 0 75 em Sub Menu Height 9 26 px Sub Menu Width AU 200 px Sub Border Width e pn 1 px Sub Bkgd Opacity 70 Sub Menu Paddin e p 14 px Sub Arrow Color White Arro Text Sub Level Bckgrd Sub Level Text Sub Hover Bckgrd Sub Hover B Text Sub Current Bkgrd Sub Curren BE Border Sub font size Default is 75em Font sizes are Oem to 3em Sub Menu Height Use the slider control to increase or decrease the sub level nav menu height Default height is 26px Available height 14px to 6Opx Sub Menu Width Use the slider control to increase or decrease the Sub Level Nav Menu width Default width is 200px Available width 100px to 400px 2013 2014 B
52. mns for mobile layout display Default is Opx Max right padding is 100px M Bottom Padding Slider control lets you add bottom padding to both columns for mobile layout display Default is Opx Max bottom padding is 100px FreeStack R 2Columns When you set left column width below width on right column is set automatically Left Col Width em gt 50 Top Padding 0 px Right Padding p gt 0 px Yurureuerengeceggegs Bottom Padding je 0 px Left Padding Qe 0 px Yurrcreseengeeecgeng 2 COLUMNS MOBILE LAYOUT SETTINGS Break Point qe p gt 600 px taraa Mra M Top Padding p gt 0 px TELEDEPEEE ETE M Right Padding p gt 0 px LORIE EESIEEEIEEEELEN M Bottom Padding je 0 px YVourecoccececeeeueggge M Left Padding C 0 px Yita anaA A M Left Padding Slider control lets you add left padding to both columns for mobile layout display Default is Opx Max left padding is 100px 2013 2014 Blueball Design LLC USA All Rights Reserved Page 15 Using the FreeStack R 3Columns stack This is a highly useful 3 column responsive stack to use for setting up and building your responsive page layout that s simple to setup and use How to use the FreeStack R 3Columns stack 1 Select the FreeStack R 3Columns stack in the Stacks elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Set the breakpoint width 3 Adj
53. nd my FreeStack Responsive Nav stack How can fix this Answer Very simple to do Each of the FreeStack Responsive Nav stacks has a z index value setting control included within its hud controls The default value is set to 999 Sometimes lightboxes built into slideshow or image gallery stacks use a lower z index value in their lightbox container divs Simple reset the z index value of the FreeStack Responsive Nav stack to be lower than the lightbox z index value 2013 2014 Blueball Design LLC USA All Rights Reserved Page 55 Blueball FreeStack theme and stacks FAQs and answers FAQ My FreeStack R Contact Plus stack has a lot of code displaying above the form in the stack How can I remove this code Answer Change your page file extension to php The FreeStack Responsive Contact Plus form stack requires the Stacks site page it is on to have a php file extension on the page name Your hosting company must also support at least php5 Since virtually all hosting company s now support at least php5 this is not an issue usually FAQ Can I use my own custom body background image instead of one of the supplied body background images that came with the FreeStack Responsive theme download Answer Yes and it s easy to do 1 First create your new custom body background image you want to use and name it exactly like one of the default body background images in the FSR_BodyBGlmages_JPGs folder or the FSR_BodyBGlmages_PNGs folder
54. o your Stacks page It s that simple and easy to do A couple of items to note before using the FreeStack Responsive theme stacks e You must be using the FreeStack Responsive theme on your Stacks page The FreeStack Responsive theme stacks for the most part will only work with the FreeStack Responsive theme e It is assumed you know how to use the Stacks page plugin from www yourhead com We do not provide Stack Elements Q Search Blueball FreeStack Responsive FreeStack R 2Columns Adds responsive 2 column stack to page FreeStack R 3Columns Adds responsive 3 column stack to page 3 COLUMNS FreeStack R Breadcrumb Adds Breadcrumb links stack to page BREAOCRUMS FreeStack R Contact Plus Adds simple secure contact form to CONTACT PLUS page FreeStack R FileShare Adds up to 5 file sharing download links With icons FreeStack R Fixed Height Adds fixed height container stack to ment Page FreeStack R Footer Adds Footer content and links to page FreeStack R Footer Adds Footer content and links to page FreeStack R iFrame Adds iFrame stack to page to display off site page within it Q 8 8 m e ma FreeStack R 2Columns wv Adds responsive 2 column stack to page 2cotwuuns f 2 3 0 support or training for using the Stacks page plugin with RapidWeaver If you can use the Stacks page plugin and can drag and drop stacks onto a Stacks page that s all you need to know to start usin
55. olor here Default is standard Blue OOOOFF Link Underline Use the popup menu to specify whether your active link state is underlined or not Default active link underline is set to underline Link Hover Color Set link hover color here Default is standard Red FFOOOO Hover Underline Use the popup menu to specify whether your hover link state is underlined or not Default hover link text underline is set to none Link Visit Color Set link visited text color here Default is standard Purple 800080 Htag Line Height Use slider control to increase or decrease the HTags headlines line height within the FreeStack R Styler stack Default is 1em 2013 2014 Blueball Design LLC USA All Rights Reserved Page 45 H1 Color Sets headline h1 size color Adjust color as needed Default is Black 000000 H1 Size Use the slider control to enlarge or reduce the FreeStack R Styler stack s H1 headline size Default size is 2 3em H2 Color Sets headline h2 size color Adjust color as needed Default is Black 000000 H2 Size Use the slider control to enlarge or reduce the FreeStack R Styler stack s H2 headline size Default size is 2em H3 Color Sets headline h3 size color Adjust color as needed Default is Black 000000 H3 Size Use the slider control to enlarge or reduce the FreeStack R Styler stack s H3 headline size Default size is 1 6em HH4 Color Sets headline h4 size color Adjust color as needed Default is Black 000000 H4 S
56. ontrol to add round corners to the main parent nav menu level Default radius is Opx Opx to 16px border radius available Menu Height Use the slider control to increase or decrease the main parent nav menu level height Default height is 40px 20px to 100px height available Menu Padding Use the slider control to DEFAULT NAV MENU SETTINGS Menu Font Size Font Weight Z Index Menu Alignment Border Radius Menu Height Menu Padding Text Color Text Hover Text Current m 0 75 em Bold 2 999 Left Align 2 Q 0 px em p 40 px S 14 px Active BG Image Browse Hover BG Image Browse Current BG Image Browse increase or decrease the main parent nav menu links right padding Default right padding is 14px 10px up to 80px right padding available Active BG Image Main parent nav menu level active background image Must tile horizontally Image height must match menu height set above Drag and drop it onto image well area or use the browse button to select your image with 2013 2014 Blueball Design LLC USA All Rights Reserved Page 40 Text Color Set main nav menu active text color here Default is White FFFFFF Hover BG Image Main parent nav menu level hover background image Must tile horizontally Image height must match menu height set above Drag and drop it onto image well area or use the browse button to select your image with Text Hover Set main nav
57. orm Default is set to Send Message You could also enter Submit Form or Submit Request as other examples Form Title This is the title text that will appear at the top of your Contact stack It can be a few words or a sentence or two That s up to you This will only appear when you preview your page in Rapidweaver Default text is Contact Form Title Color Color picker allows you to set form title text color to any color you want Default color is Black 000000 Title Size Set the size of the Form title using the slider control Default size is 36px You can set size from 10px up to 300px in size Success Text This is the text that will appear at the top of the Contact Form stack after the viewer hits the Submit button and the form is successfully submitted This is usually a sentence or two long FreeStack R Contact Plus Email To Form Field 1 Field 1 Width Form Field 2 Field 2 Width Form Field 3 Field 3 Width Form Field 4 Field 4 Width Field 4 Height Button Text Form Title Title Color Title Size Success Text Success Color Required Text Required Color Error Text Error Color Failure Text Text Color Field Border Field Bkgrd 2013 2014 Blueball Design LLC USA All Rights Reserved yourname yourdom Name e 98 Email 98 nY Subject C 98 tT Message m 98 Send Message
58. px to 6Opx Sub Menu Width Use the slider control to increase or decrease the Sub Level Nav Menu width Default width is 200px Available width 100px to 400px Sub Border Width Use slider control to set the sub nav menu level border width Default is 1px width Set to Opx to hide the border Available border width Opx to 5px 2013 2014 Blueball Design LLC USA All Rights Reserved Page 37 Sub Background Opacity Set the opacity value of the sub nav menu level color background Default is 70 You can use any value between O and 99 O completely transparent 99 completely solid Sub Menu Padding Use the slider control to increase or decrease the sub nav menu level links li right padding Default right padding is 14 x Opx up to 80px right padding available Sub Arrow Color Select from 2 sub nav menu level right arrow indicator images Black white black 50 transparent and white 50 transparent Default is white These right arrow images indicate additional sub nav menu levels Text Sub Level Set sub nav menu level active link text color here Default color is White FFFFFF Background Sub Level Set sub nav menu level active link background color Default is Gray 333333 Text Sub Hover Set sub nav menu level hover text color here Default is Gray CCCCCC Background Sub Hover Set sub nav menu level hover background color here Default is Black 000000 Text Sub Current Set sub nav menu level current text color here
59. r here Default is Light Gray EFEFEF 2013 2014 Blueball Design LLC USA All Rights Reserved Page 42 Using the FreeStack R Sidebar stack This stack displays the content you input into the Page Sidebar area in the Site or Page Inspector window You can display your sidebar content area anywhere you want to on the page with this stack 1 Add in your text code into the Page Sidebar area in the Site Setup or Page Inspector window in RapidWeaver like normal 2 Select the FreeStack R Sidebar stack in the Stacks elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 3 Set the sidebar text line height and sidebar headline line height in the FreeStack R Sidebar stack s hud controls 4 Adjust the stack s margins padding and borders in the Stacks plugin hud area Using the Sidebar stack s built in HUD controls Text Line Height Slider control allows you to set sidebar text line height from Oem to 5em Default text line height is 1em Header Line Height Slider control Y FreeStack R Sidebar allows you to set the sidebar headline TEPA PORS line height from Oem to 5em Default EN l headline line height is 1em Header Line Hght ej 1 00 em 2013 2014 Blueball Design LLC USA All Rights Reserved Page 43 Using the FreeStack R Slogan stack This stack displays the slogan text you input into the Slogan area in the Site Inspector or the Page Inspec
60. set a maximum width your page will display up to Use the FSR Max Width container stack If you want to set a limit on the maximum width that your page and its content will display up to Say 960px for example drag and drop the FSR MaxWidth stack onto your site page and set the maximum width at 960px in its hud control Then place all your page s stacks into it Your content will still stay fluid and responsive within it but the site page s width will not exceed the maximum width amount set in the FSR MaxWidth s stacks hud control All font sizes are set using ems All font sizing is set using ems for maximum platform consistency for font sizing and display All font sizing is controlled in 4 theme variation options To eliminate the need to adjust font sizing across multiple stacks on pages throughout your site the site wide font sizing is set by selecting one of the four font sizing theme variations If you want to set different sizing for one area of a page put the stacks in that page area into the FSR Styler stack which has its own built in font styling options You cannot use fixed widths on your stacks if you want your site layout to be responsive Any stacks you add into your FreeStack Responsive site pages must have the width set to fluid or fill make sure fill is set to 100 2013 2014 Blueball Design LLC USA All Rights Reserved Page 10 Forget having pixel perfect layouts Not going to happen in a responsive layout d
61. several smaller images to view better There are 2 sections in the FreeStack R NavMenu Res1 stack s hud controls FreeStack R NavMenu Res1 Mobile Popup Nav Menu Settings MOBILE POPUP NAV MENU SETTINGS Mobile Menu Font Slider control allows you to set the popup nav menu font size for smart Mobile Menu Font me 16 px phone and tablet users depending on breakpoint set by user Default is 18px Font size 12px to 20px M Sub Bullet Style Dash ss Mobile Nav Title NAV MENU Mobile Nav Title Add the title for your mobile Nav Breakpoint gt 600 px nav popup menu This will be the text that ce eS EARP EELS displays within your main popup nav menu that will prompt your viewers to click on to display the full nav menu structure to access your site pages on smart phone and tablets if specified Default is NAV MENU M Sub Bullet Style Select from 4 mobile sub menu level bullet styles Dash default Arrow Dot and Plus Nav Breakpont Set the window width at which the mobile nav menu layout will display at 2013 2014 Blueball Design LLC USA All Rights Reserved Page 35 Default Desktop Nav Menu Settings Main Parent Nav Menu Level Menu Font Size Use the slider control to enlarge or reduce the default nav menu font size Default is 75em Font sizes are Oem to 3em Font Weight Pop up menu control lets you choose between normal and bold font weights for your nav menu text Default font weight is bold Z
62. sign LLC USA and Charles Lockhart with all rights reserved You are licensed to use this Blueball FreeStack Responsive theme and stacks for your personal or business RapidWeaver site needs NOTE If you are a website designer you only have to purchase the Blueball FreeStack Responsive theme and stacks once and you can use it as often as you like but if you have clients that want to use the Blueball FreeStack Responsive theme and stacks to maintain and update their web site after you release it to them then you will need to purchase an additional copy for them too Theme Usage Restrictions Our RapidWeaver themes style sheets images stacks and related files may not be resold distributed or added to any type of digital collection by any means whatsoever They may not be offered for download or use from any website nor placed online for promotional purposes whatsoever Each Blueball RapidWeaver theme template and stack must be used as supplied for its original intended purpose This simply means you may not select images or code from our Blueball RapidWeaver themes and stacks or style sheets to add to another application theme or stack nor port our themes and stacks for use with another application Image Credits and Usage Photo and Image Credits headers background images navigation buttons and other graphics used by CSS All images were created by blueballdesign com designers or were open source images that were download
63. t 1 00 em Slogan text Choose from bold 700 EE E E semi bold 600 and normal 400 Default is bold Title Line Hght Slider control allows you to set the title text line height from Oem to 5em Default title line height is 1em Production Tip If you are placing your FreeStack R Title stack into the FreeStack R Image BG Pro stack that uses a custom image in it using a White FFFFFF or Black 000000 font color will produce the best display results for your title text displaying on most custom background images Adjust the font color as needed depending on your custom image s color scheme 2013 2014 Blueball Design LLC USA All Rights Reserved Page 48 Using the FreeStack R Transparent stack This VERY useful utility stack is a container stack that features a user adjustable solid color background and color transparency control Perfect to use for placing a transparent color background behind other stacks on your FreeStack Responsive theme Stacks page 1 Select the FreeStack R Transparent stack in the Stacks 2 elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Adjust the FreeStack R Transparent stack s background color and transparency level in the stack s hud controls 3 Adjust the stack s margins padding and borders in the Stacks plugin hud area Using the FreeStack R Transparent stack s built in HUD controls Background Color
64. tions are visible or hidden Production Tip The width in the FreeStack R iFrame stack is set by default to be 100 of the container or screen width it is displayed within Scroll bars will appear as needed on the FreeStack R iFrame stack unless you have selected to hide them in the hud controls depending on the height and width of the web page you are displaying within it 2013 2014 Blueball Design LLC USA All Rights Reserved Page 26 Using the FreeStack R Image BG Pro stack This stack features a responsive custom background image that you can add stacks into by drag and drop Ideal to use for your header area in a responsive page layout where you want a banner image in the background that appears behind a logo title or slogan 1 Select the FreeStack R Image stack in the Stacks elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 2 Drag your custom image into the image area of the stack 3 Uncheck the Edit BG Image checkbox in the stack s hud control area 4 Drag and drop in stacks of your choosing into the stack s edit area that says Drop stacks here Using the FreeStack R Image BG Pro stack s built in HUD controls Edit BG Image This is checked initially Y FreeStack R Image BG Pro by default so you can drag and drop your A Edit BG Image custom image into the stack Once you have added your custom image into the BG Image He
65. tor window You can display your slogan text anywhere you want to on the page with this stack 1 Add in your text code into the Slogan text field area in the Site Setup or Page Inspector window in RapidWeaver like normal 2 Select the FreeStack R Slogan stack in the Stacks 2 elements library window and drag it into position on your Stacks page that you have applied the FreeStack Responsive theme to 3 Adjust the stack s margins padding and borders in the Stacks plugin hud area Using the Slogan stack s built in HUD controls Slogan Alignment Popup menu lets you select slogan text alignment Choose from left right or centered Default slogan text Slogan Alignment Left Align alignment is left Font Weight Bold sal Font Weight Popup menu control lets you select the weight of the Slogan text Slogan Line Hght 1 00 em Choose from bold 700 semi bold 600 a aie and normal 400 Default is bold Slogan Line Height Slider control allows you to set slogan text line height from Oem to 5em Default text line height is 1em Production Tip If you are placing your FreeStack R Slogan stack into the FreeStack R Image BG Pro stack that uses a custom image in it using a White FFFFFF or Black 000000 font color will produce the best display results for your slogan text displaying on most custom background images Adjust the font color as needed depending on your custom image s color scheme 2013 2
66. ur Twitter ESE Tettter share account name here The name must match exactly with what you have set Twitter Name Add Twitter Account up on Twitter for your account name and is case sensitive Button Type Vertical Button Type There are 2 Twitter iat Share Content button alignment options available to use Use the pop up menu control to choose either vertical or horizontal as the button alignment layout you want to use on your site page Default is set to vertical Button alignment examples are shown below not to scale 0 Tweet 0 Tweet Button Size Select from Normal or Large button image sizes Default is Normal 2013 2014 Blueball Design LLC USA All Rights Reserved Page 53 Blueball FreeStack Responsive theme and stacks FAQs and answers FAQ Can use other third party stacks with the FreeStack Responsive theme Answer Yes of course That s one of the biggest strengths of the FreeStack Responsive theme and stacks the ability to use virtually any other third party responsive stack on your FreeStack Responsive theme site Stacks pages This increases the options for creating even better responsive page design layouts with incredible features and functionality Please note that you cannot use Foundation stacks on a FreeStack Responsive site page layout However be aware that the more third party stacks you use add on a single Stacks page that have their own unique javascript calls and l
67. ust the column padding amounts as needed for desktop and mobile layouts using the stack s built in column padding hud controls Using the FreeStack R 3Columns stack s built in HUD controls see full hud controls image next page Important note about the 3 columns width The FreeStack R 3Columns stack comes with preset column widths that are not adjustable The left center and right columns are all 33 33 wide There is no gutter width in this stack To space the columns content apart from each other add in some left and right padding amounts using the built in column padding hud controls to get the desired horizontal spacing you want to display for your columns content for both desktop and mobile layouts Top Padding Slider control lets you add top padding to all 3 columns for desktop layout display Default is Opx Max top padding is 100px Right Padding Slider control lets you add right padding to all 3 columns for desktop layout display Default is Opx Max right padding is 100px Bottom Padding Slider control lets you add bottom padding to all 3 columns for desktop layout display Default is Opx Max bottom padding is 100px Left Padding Slider control lets you add left padding to all 3 columns for desktop layout display Default is Opx Max left padding is 100px Break Point Slider control allows you to set the screen width that the 3 columns in the FreeStack R 3Columns stack will break at and then display as 1 column each at 10
68. width is set to 100 Width options from 30 to 100 available Form Field 2 This is the text that will appear directly above the second form field This by default is usually labelled Email Field 2 Width Use the slider control to set the width of the form field 2 input area using percentage Default width is set to 100 Width options from 30 to 100 available Form Field 3 This is the text that will appear directly above the third form field This by default is usually labelled Subject 2013 2014 Blueball Design LLC USA All Rights Reserved Page 19 IMPORTANT Please note that whatever is entered in this field will also be placed into the Subject area in the email you receive when the user clicks on the Submit button It is highly recommended you leave this labelled Subject Field 3 Width Use the slider control to set the width of the form field 3 input area using percentage Default width is set to 100 Width options from 30 to 100 available Form Field 4 This is the text that will appear directly above the fourth form item which is a text area where the viewer will type in a message to you This by default is usually labelled Message Field 4 Width Use the slider control to set the width of the form field 4 input area using percentage Default width is set to 100 Width options from 30 to 100 available Button Text This is the text that will appear in the button at the bottom of the f

Using the FreeStack R Tumblr Limited stack

Contents

Download Pdf Manuals

Related Search

Related Contents