Setting up your FontStylr stack’s properties with the built-in HUD interface options.

1 - Information Bar: This area includes the FontStylr stack name you are using, with buttons that link to web site pages that have details on the stacks and support files.

2 - Include jQuery Javascript: This box is unchecked to not call jQuery by default. If your theme is already using jQuery then you will not need to check this box. If you are not sure if the theme is using jQuery, preview your page in Rapidweaver, and if your FontStylr stacks display the font styles you have selected correctly in the Preview window, then more than likely your theme is using jQuery. You can also check the theme’s readme file to see if it has jQuery built into it. As a last resort you can email the theme developer and ask to find out.

IMPORTANT! You will only have to check the “Include jQuery Javascript” box on the first FontStylr stack on your page if you have to use it. Leave it unchecked on all the other FontStylr stacks on the page. If your theme has jQuery built into it, leave this box unchecked on all FontStylr stacks.

3 - Include Cufon Javascript: This box is checked to call the Cufon javascript from the Resources folder in the FontStylr stack by default.

IMPORTANT! You only have to check the “Include Cufon Javascript” box on the first FontStylr stack on your page. Leave it unchecked on all the other FontStylr stacks on your Stacks page.

4 - Div Name: This is the name that will be created for the div in your FontStylr stack where your actual headline text will be placed into. This must be a unique div name, one that is not used by your theme or another other stack in any of your site’s pages. This div name cannot have spaces or special characters used in it!

5 - Font Style Name: IMPORTANT! You must enter one of the font style names listed in the FontStylr_Stacks_Fontsv6.pdf readme file, ithe FontStylr_FontNames.txt file, or use one of the FontStylr snippet names. You must match the name listed there exactly or your font will not display correctly in your FontStylr stack.

6 - HTag Size: This slider option allows you to specify the h tag size of your FontStylr stack text. You can now specify a h tag size of h1, h2, h3, h4, or h5. The default sizing is h1. We added this in place to address concerns some FontStylr users had with being limited to just using h1 sizing for text in FontStylr stacks.

7 - Font Color: This option controls the color of your text. Double click on it to bring up the color selection area and select the color you want your headline to be. The default color is set to Black #000000.

8 - Font Size: This slider control option controls the size of your text. Move the slider to the right to increase the size of your font up to a maximum size of 96px and left to reduce it down to a minimum size of 14px.

9 - Letter Spacing: This slider control option controls the amount of white space between the individual characters in your headline text words. Move the slider to the right to increase the spacing up to a maximum of 5px and left to reduce the spacing to a minimum of -5px.

10 - Line Height: This slider control option controls the size of your text. Move the slider to the right to increase the line height to a maximum height of 120px and left to reduce the line height to a minimum height of 10px.

11 - Text Alignment: This option controls how your headline text is aligned. You must enter one of the following options in the area exactly as they are shown below (default is set to left): left, right, or center.

Items 12 & 13 are only for "Link Enabled" FontStylr stacks use.

12 - Link URL: This option allows you to make your FontStylr stack headline text link to another web site page. The default link value is set to “#” which creates a null link. A null link is a dead link that doesn't link to anything and is inactive. If you are not using a custom link, you must leave the default "#" in the link field. To override the default link value, enter a new link url to the page you want to link to. You must use a full absolute path in your FontStylr link setting.

Link url example to top level site page: http://www.yourdomainname.com/pagename.html
Link url example to sub level site page: http://www.yourdomainname.com/foldername/pagename.html

13 - Include Cursor CSS: This option controls how your cursor will appear when it hovers over a link url enabled FontStylr stack. By default this box is checked which has the cursor set to appear in the default state, i.e. it doesn’t change to a hand when it hovers over a link enabled FontStylr stack. This option should be used when you have the default “#” in the Link URL feature. IMPORTANT! If you use a full absolute url path to a web page in the Link URL feature, you need to uncheck the Include Cursor CSS box.