PreviewDownload Files

We will create a single page website using BlocksBox in combination with the Carousel plugin.
For this tutorial I was inspired by the Stonefish website, which is using BlocksBox as well.


You can create your own images or download the files I have created. Links to the Preview website and the Files can be found below the title.

Theme Images1

Create a new Rapidweaver project and save it using a clear name.
Right-click the BlocksBox theme and select Duplicate Theme from the pop-up menu. Again, give it a clear name like Carousel for example.
Right-click the duplicate and select Reveal Theme Contents in Finder...
Open the folder containing the downloaded files for this tutorial. Drag and drop the images folder inside the Theme Contents folder and select Replace.

Plugin2

Add a new Carousel page and name it Home or anything you prefer.

You will need to apply the following settings inside the Carousel Info panel:
♦ Carousel > Layout
• Visible Thumbnails: 4
• Height: 30 pixels
• Position, Movement, Speed: Top, 1 Page, Medium
• Hide: Carousel Buttons & Titles
♦ Carousel > Style
• Deactivate: Background, Stroke, Margin
♦ Carousel > Images
• Select all images and delete them using backspace

♦ Thumbnail > Layout
• Width: 125 pixels
• Height: 25 pixels
♦ Thumbnail > Style
• Deactivate: Background, Stoke
• Margin Top, Bottom, Left, Right: 0, 0, 20, 20 pixels
• Padding Top, Bottom, Left, Right: 0, 0, 3, 3 pixels

♦ Content > Layout
• Width: 766 pixels
• Height: deactivate
• Scrollbars, Speed: Never, Slow
♦ Content > Style
• Background: CCCCCC
• Height: deactivate
• Stroke: White
• Stroke Top, Bottom, Left, Right: 1, 0, 1, 1 pixels
• Margin Top, Bottom, Left, Right: 25, 15, 10, 10 pixels
• Padding: 10 pixels

Close the Carousel Info panel and add four new items. Add the navigation images, one for each item.

Add some content, I used dummy text which you can get from lipsum.com

Styling3

Go to Preview mode.
Open the Page Inspector > Styles tab. Apply the following settings:
♦ General Layout
• Top Spacing: 50 pixels
♦ Background
• Color: Black
• Image: background.jpg
• Image Position: Top Center
• Image Repeat: No Repeat
• Image Fixed Position: No
♦ Elements
• Footer: footer.jpg
♦ Typography
• Font: Helvetica
• Font Size: Medium
• Line Spacing: +2
♦ Text
• Text Color: Black

Instead of using the theme footer you can also use the Carousel (plugin) footer. Here you can add styled text including links.

CSS4

Watch the result and compare it too the preview.

You are right, the rounded corners are missing.
I used a tiny bit of CSS3 code. Copy and paste it into the Page Inspector > Header > CSS tab:


Note: CSS3 is only supported by modern browsers like Safari and FireFox. IE users will see square corners.