The Fudge
PreviewDownload Files
In the first tutorial we will create a website using BlocksBox in combination with the Blocks plugin.
For this tutorial I created a fictional website inspired by the Winter Groningen website. The Fudge is an existing Rockband from Amsterdam.
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.
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 the Fudge 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.
Add a new Blocks page and name it Home for example.
Open the Block Inspector and select the Page tab. Make the following adjustments:
• Content Width: 900 px
• Content Height: 510 px
• IE Overflow Wrapper: 100 %
Switch to the Setting tab and activate both Grid options.
Go to the Tutorial Files and select the pics, videos, about and myspace images. Drop them onto the Blocks page.
In Blocks select all four images and open the Block Inspector > Block > Style tab and deactivate Margin.
Have a look at the preview website and try to position the images similarly. Now select each each image separately and add its Mouseover (hover) image to the Block Inspector > Content > Image tab.
Finally create a Text block and paste( Edit > Paste as Plain Text ) the text from the preview website.
Go to Preview mode.
Open the Page Inspector > Styles tab. Apply the following settings:
♦ General Layout
• Top Spacing: 250 pixels
♦ Background
• Color: Black
• Image: background.jpg
• Image Position: Top Center
• Image Repeat: No Repeat
• Image Fixed Position: No
♦ Elements
• Header and Footer: first JPG option (empty)
• Header Height: 100 pixels (empty)
♦ Typography
• Font: Verdana
• Font Size: Large
• Line Spacing: +2
♦ Text
• Text Color: White
If everything went ok the first page should now resemble the preview website.
Add a new Blocks Page and name it Pics. Open the Page Inspector > Style tab and at the bottom select This Style: ... is the master style for the theme.
Apply the same styling as the first page with these exceptions:
♦ Elements
• Header and Footer: first PNG option
• Content Background: first PNG option
♦ Text
• Text Color: Black
Watch the result in Preview mode.
Now you can add a third and a fourth page. Name them Videos and About. If you preview them you will see the same styling applied as the Pics page. How is this possible? Well, remember the ... is the master style for the theme setting we applied, that does the trick.
Return to the homepage and link the four images to their associated pages. On the subpages you need to insert the close.png image and make it a link to the homepage.
If you, like me, do not care about Internet Explorer you can activate the Show overflowing content option inside the Block Inspector > Page tab. If activated, you can position block elements like the close.png outside the visible area. Otherwise put it on the inside of the corner.
Finally add some content and you are done. I embedded Callage 2 on the Pics page.
I hope you are now able to use what you just learned.
In the first tutorial we will create a website using BlocksBox in combination with the Blocks plugin.
For this tutorial I created a fictional website inspired by the Winter Groningen website. The Fudge is an existing Rockband from Amsterdam.
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 the Fudge 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.
Blocks2
Add a new Blocks page and name it Home for example.
Open the Block Inspector and select the Page tab. Make the following adjustments:
• Content Width: 900 px
• Content Height: 510 px
• IE Overflow Wrapper: 100 %
Switch to the Setting tab and activate both Grid options.
Go to the Tutorial Files and select the pics, videos, about and myspace images. Drop them onto the Blocks page.
In Blocks select all four images and open the Block Inspector > Block > Style tab and deactivate Margin.
Have a look at the preview website and try to position the images similarly. Now select each each image separately and add its Mouseover (hover) image to the Block Inspector > Content > Image tab.
Finally create a Text block and paste( Edit > Paste as Plain Text ) the text from the preview website.
Styling3
Go to Preview mode.
Open the Page Inspector > Styles tab. Apply the following settings:
♦ General Layout
• Top Spacing: 250 pixels
♦ Background
• Color: Black
• Image: background.jpg
• Image Position: Top Center
• Image Repeat: No Repeat
• Image Fixed Position: No
♦ Elements
• Header and Footer: first JPG option (empty)
• Header Height: 100 pixels (empty)
♦ Typography
• Font: Verdana
• Font Size: Large
• Line Spacing: +2
♦ Text
• Text Color: White
If everything went ok the first page should now resemble the preview website.
Subpages4
Add a new Blocks Page and name it Pics. Open the Page Inspector > Style tab and at the bottom select This Style: ... is the master style for the theme.
Apply the same styling as the first page with these exceptions:
♦ Elements
• Header and Footer: first PNG option
• Content Background: first PNG option
♦ Text
• Text Color: Black
Watch the result in Preview mode.
Now you can add a third and a fourth page. Name them Videos and About. If you preview them you will see the same styling applied as the Pics page. How is this possible? Well, remember the ... is the master style for the theme setting we applied, that does the trick.
Navigation5
Return to the homepage and link the four images to their associated pages. On the subpages you need to insert the close.png image and make it a link to the homepage.
If you, like me, do not care about Internet Explorer you can activate the Show overflowing content option inside the Block Inspector > Page tab. If activated, you can position block elements like the close.png outside the visible area. Otherwise put it on the inside of the corner.
Finally add some content and you are done. I embedded Callage 2 on the Pics page.
I hope you are now able to use what you just learned.
Twitter
Contact