To install the Blocks plugin:
- Download Blocks from our website.
- Double click the Blocks.stack file.
- If RapidWeaver is running, restart.
Blocks is now installed ready to use.
To get started, you should have a Blocks page in a RapidWeaver file already created. If you don't have a Blocks page already, create one by choosing Add Page in RapidWeaver and selecting Blocks.
Styled Text Block
A Styled Text Block is like a mini-Style Text Page that you can put anywhere on your Blocks page. Each Styled Text Block can contain text, graphics, and some HTML markup.
Image Text Block
An Image Text Block is a text block that will be converted into an image when your page is published. The advantage of using an Image Text blocks is that you are free to use any fonts, styles, colors, and special characters you like. You're not restricted to "Web safe" fonts. The disadvantage is that images are much slower to download -- so it's best to use Image Text only when you really need it.
HTML Code Block
A Page Block lets you incorporate other pages from your RapidWeaver site into a block on your Blocks page.
Image Blocks are automatically created when you drag an image into the Blocks page.
To add a block to your layout click on one of the Block buttons from the toolbar or drag an image from the Finder into your layout. Once you've added a block you can use the Inspector button to open the Block Inspector window and configure your new block. See below for more info on using the Block Inspector palette. To add an Image Block just drag an image from the Finder into the blocks edit view and drop it anywhere.
To select a block, click on it. Small square handles appear on the corners to show that the block is selected. To deselect a block, click anywhere else in the RapidWeaver window.
To select more than one block, hold down the Shift key or the Command(Apple) key on your keyboard while you continue to click on more blocks. While holding down Shift or Command, clicking on a block toggles its selection.
You can drag a selection area around several blocks. As the selection area touches each block it will become selected. To add or remove blocks from your selection just Shift-click.
Choosing Select All from the Edit menu will select all the blocks in your layout.
Hint: Once a block is selected you can interact with that block even if it is completely obscured by other blocks. It will act as if it is on the top-most layer, even if it is buried.
Moving And Resizing Blocks
To move a block, first select it, then click and drag to move it.
To resize a block, first select it, then click on one of the small square handles on the corners and drag the handle to reshape the block. Holding down the Shift key while you drag the handles constrains the block to its current aspect ratio.
Note: Image Blocks have a constrained aspect ratio by default. So the using Shift key works in reverse: it removes the aspect ratio constraint.
To move a block by just one pixel use the arrow keys on your keyboard. If you'd like to move them a bit faster, hold down the Shift key. Shift-Arrow nudges by 10 pixels.
To edit the text within a Styled Text Block, Image Text Block, or an HTML Code Block, first select the block, then click on the block once more to edit. To stop editing click outside the block.
Hint: It may seem as though you need to double-click in order to edit the text, but this is not the case. A single-click on a block that is already selected will always enable editing in that block.
The page block incorporates content from other pages. Edit the content of Page Blocks by editing the other pages. Then use the Block Info window to configure the page block to incorporate that page.
Just as in any Macintosh application you can copy any block (or group of blocks) and paste them to produce a copy. You can also Cut or Copy blocks from one Blocks page and paste them into another Blocks page.
If the option key is held while dragging a block then a duplicate of the block will be produced.
Choosing Clear from the Edit menu will delete the selected blocks.
Pressing the delete key, backspace key, or forward delete key on your keyboard will also delete the selected blocks.
- Hint: A great way to test out your HTML code is to use an HTML Page. After you get your HTML Page to be just right, copy the text from that page into an HTML Code Block.
- Note: If you add PHP content don't forget to change the filename extension of your Blocks page to "php". To change the filename extension use the Page Inspector located in the Windows menu, the setting is located under the Info tab. And of course, you'll need to have a server that supports php content as well. For more details about the Page Inspector, the Contact Form, and PHP content please refer to the RapidWeaver manual.
- Hint: Choosing Stretch to fit content from the Block Inspector under the Block section Layout tab will help to accommodate pages with a flexible length.
- Note: If you add content from a PHP page (such as a Contact Form or RapidBlog) don't forget to change the filename extension of your Blocks page to "php". To change the filename extension use the Page Inspector located in the Windows menu, the setting is located under the Info tab. And of course, you'll need to have a server that supports php content as well. For more details about the Page Inspector, the Contact Form, and PHP content please refer to the RapidWeaver manual.
- Note: Once you've purchased Blocks the Buy Blocks button will no longer appear.
- Note: The font window contains all the fonts available on your Macintosh. Most of these fonts will not be available on many machines that can browse to your pages. To create a consistent experience for all the people viewing your site it's very important to choose fonts only from the "Web" category. Choosing other fonts will force browsers to replace those fonts with fonts they do know -- which can cause significant changes to your layout.
The Block Inspector Palette
Block Tab > Layout
Size & Position
Block Tab > Style
Content Tab > Text
Content Tab > Image
Content Tab > Page
- Note: To modify the content of an image block drag and drop the new image on top of the old image in edit mode. This will scale the new image to fit into the space of the old image so results are best if both new and old images are the same size.
- Hint: See Master Pages in action in our screencast: Click to view.
Note: Internet Explorer 6 for Windows will have trouble drawing your page if the content width is larger than the available space your theme provides. The default width is small enough that it should work with most themes. If you want to increase it, start small and test test your published pages in IE 6 to ensure that everything is working as you expect.
If your blocks content area is smaller than area that the theme provides, the content can be aligned left, right, or center into the content area. What you choose will depend on the overall alignment of the theme.
Internet Explorer Compatibility
Under normal circumstances all the content that Blocks produces is confined to the content area of your page. All themes define this area specifically for use by plugins like Blocks. When content is too big to fit within this area Blocks automatically crops the content so that it does not overflow. This is because when content overflows outside of its container it can cause some browsers (usually Internet Explorer for Windows) to render the page strangely.
If you are absolutely certain that you will not be deploying to Internet Explorer and you don't mind bending a few of the CSS rules then you can choose to display content that overflows. It's strongly recommended that you test you page on all browsers that the page will be viewed with as even non-IE browsers may have some difficulties.
The alignment guides in blocks are great for lining up content on your page but they can sometimes get in the way. Sometimes it's nice to turn them off. Unchecking Show Guides will disable all the guides. Unchecking Show Center Guides or Show Edge guides will disable those guides individually.
The snapping of the guides can be enabled and disabled separately from the visible guides themselves. So that you can have the snapping effect without the visual guides or have the visual guides with no snapping. To disable snapping uncheck the Snap To Guides checkbox.
The alignment grid places guides at intervals across your page. You can specify the interval and if your blocks snap to the grid. If you turn of the Snap To Grid option then the grid is merely a visual alignment tool but will not actually have any affect on your block placement.
Each block has a pale translucent blue outline that helps you to identify its boundaries. These can be helpful, but when you page contains a lot of overlapping transparent content they can also clutter up your visualization of the look of the page. To disable the block outlines uncheck the Show Block Outlines checkbox.
The Blocks Library
The Blocks Library is a place to store commonly used blocks. You can add your own library blocks, edit their attributes, share library blocks with other Blocks users, and drop in library blocks that others share with you.
The Blocks Library can store either single blocks or whole pages. Library Pages store not only every block from the layout but also the page width, height, and background color. Library Blocks store an entire block along with all its properties, content, and styles.
Creating a Library Block
To create a library block first open the Blocks Library window by clicking on the Library button in the toolbar. Next select the block in your layout that you would like to add to the Blocks Library. Click the "+" button on the bottom left corner the Blocks Library window. This will add the block selected block to the Blocks Library.
See below on how to customize the details of the newly created Library Block.
Creating a Library Page
To create a library page first open the Blocks Library window by clicking on the Library button in the toolbar. Click the "+" button on the bottom left corner the Blocks Library window. This will add your Blocks page to the Blocks Library. See below on how to customize the details of the newly created Library Block. Note: You can only add pages that contain at least one block. Empty pages cannot be added.
Removing a Library Block
To remove a Library Block from the Blocks Library click on the Library Block in the Blocks Library window. It will select and its background will turn a lighter shade. Click the "-" button at the bottom left of the Blocks Library window. You will be asked to confirm the action and then the block will be removed. Warning: removing a block is permanent. It not only removes it from the Blocks Library window but also deletes the associated file.
Sharing a Library Item
Each item in the Blocks Library is actually a file in the Finder. These files can be email to friends or added to a RapidWeaver File Sharing page. To find a library item in the finder first open up the Blocks Library window by clicking on the Library button in the toolbar. Select the library item in the Blocks Library window by clicking on it. Next click the "Details" triangle to reveal the details for the block. Then just click the small arrow next to the File Name. This will open up the Finder and select the file. Simply drag this file to your email or File Sharing page.
Adding a Shared Item
When someone shares a block that they have created you'll want to add it to your Blocks Library. Simply drag the Library Block file to your Blocks page. The library item will be copied to your Blocks Library and will be displayed in the Blocks Library.
Customizing the Details
Although library item is always given a preview icon that represents how it appears in Edit view and a default name sometimes you may want to customize these details to help you recognize and use the block more effectively. To start click on library item that you'd like to edit. Click on the "Details" triangle to reveal the extra details. Any of the text can be simply edited by clicking and editing. There is no need to save your changes, they will be automatically stored in the Library Block file whenever you make a change. To change the preview icon simply drag and drop a new image into the image well. The new preview will be stored in the library block and scaled to the appropriate size.
Smart Block HUD
The Smart Block HUD (Heads Up Display) displays special, user-defined, properties of the selected block. By default the Smart Block window is empty, but by adding Smart Block Tags to the content the Smart Block HUD will be updated with an interface for each tag. Building an interface for a block is a nice way to simplify a complex or repetitive coding task.
Smart Block Tags
// create a text input in the Smart Info window<br>
// assign the contents to a variable called "a_var"<br>
<blocks type='input' id='a_var' />
// create a color well in the Smart Info window<br>
// assign the contents to a variable called "a_color"<br>
<blocks type='color' id='a_color' />
// create a slider in the Smart Info window<br>
//with a minimum value of -100 and a max of 100<br>
// assign the selected value to a variable called "a_num"<br>
<blocks type='slider' id='a_num' min='-100' max='100' />
// use a variable called "a_var"<br>
// replace the whole markup element with the contents of "a_var"<br>
//nothing is displayed in the Smart Info window<br>
<blocks id='a_var' />
// read the "height" property of the block<br>
// replace the whole markup element with the contents of the height property<br>
<blocks type='property' id='height' />
// other properties include:<br>
width, x, y, backgroundColor, strokeWidthTop, marginWidthTop, strokeColor, etc.</code>