Introducing Our FontStylr Stacks!

Never be stuck having to use boring "web-safe" fonts on your pages again.

Blueball FontStylr Stack Vol. 1 - 9 Cool Sans-Serif Fonts!

Blueball FontStylr Bundle - $9.00
Includes 2 versions now
See details below!

Includes 4 FontStylr stacks - 75 font faces!Click button to buy our Blueball Dynamic Content Stacks bundle now!   Click button to view your e-junkie shopping cart

FontStylr Vol. 1 - Sans-Serif Fonts

28 sans-serif font faces

FontStylr Vol. 2 - Serif Fonts

23 serif font faces

FontStylr Vol. 3 - Script Fonts

16 script font faces

FontStylr Vol. 4 - Grunge Fonts

8 grunge font faces

Give your Stack page headlines instant style with our Blueball FontStylr Stacks! Simple to use. No HTML code needed. Works great with all major browsers including IE6!

If you've ever wished you could add in a font style that's different than the normal boring "web safe" fonts to your Rapidweaver site pages, then you'll love our FontStylr stacks!

Each FontStylr stack allows any Rapidweaver user to easily add in new font styles that are embedded within each stack to create headline stacks on any Stack page (See the HUD details below).

The new font styles are displayed using Cufón. Cufón is very fast, offers reliable display in all major browsers, and allows your headline text to remain in the source code of your published Rapidweaver site pages for search engines to see.

You can use multiple FontStylr headline stacks on one Stacks page. Even mix and match headlines using stacks from both FontStylr stacks together on the same page if you want.

2 versions of FontStylr stacks included with your bundle download

We include both "Link URL Enabled" and "Non Link URL Enabled" FontStylr stack sets now in the bundle download.

Great browser support

Tested and works perfectly on: Safari 3 and 4, Firefox 3.5, IE6, IE7, and IE8.

The FontStylr stack's HUD allows you to have complete control
over your FontStylr stack headline's appearance.
2 versions - Choose the best option for your site.

Blueball FontStylr v3 HUD interface

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

1 - 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.

2 - 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.

3 - 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!

4 - Font Style Name: IMPORTANT! You must enter one of the font style names listed in the FontStylr readme 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.

5 - 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.

6 - 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.

7 - 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.

8 - 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.

9 - 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 10 & 11 are only for "Link Enabled" FontStylr stacks use.

10 - 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

11 - 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.