The Bamboo theme continues to push the boundaries of what RapidWeaver can do. It is a responsive theme, which means it adapts to your site’s visitors. As their browser scales down, so does your content. It adapts particularly well to those on iPhones!
It also uses the RapidWeaver 5 Resources for both banner and background images as well as it has some innovative ExtraContent areas.
In addition to all of this innovation, the Bamboo theme also supports our Blog Entry Topper feature.
Make mine modern
We’ve incorporated a series of features in Bamboo that will benefit you and your visitors. These new features are designed for the modern browsers that your visitors are using: Safari, Chrome, FireFox and Internet Explorer 9. Your site will display OK in IE8, but will not live up to the high standards of these other modern browsers.
Here are some tutorials and walk through videos to show you how to use some of the amazing features found in the Bamboo theme. They also give you a good look at many of the theme’s features so you know what you’re getting before you buy the Bamboo theme.
I strongly encourage you to take a few minutes to watch them all, and be sure to bookmark this page so you can come back and reference them when you’re building your own sites.
- What is a Responsive Theme?
- How to make your videos and images flexible
- Using Bamboo’s navigation
- How to make use of the Blog Entry Topper
- Exploring the shelf area for banners and ExtraContent
- How to use Bamboo’s unique ExtraContent areas
- Installing and using Tab Snippet
- Using the photo album lightbox and decorations
Building a simple site
This video will get you started building a simple site with Bamboo. Responsive themes are quite a bit different to use than your normal, non-responsive theme, so we walk you through building a few responsive web pages in RapidWeaver using the Bamboo theme.
The Bamboo theme offers you the ability to use the RapidWeaver Resources section to add in your own custom banner images. These images will appear on the shelf area of the theme.
In portrait mode on the iPhone the shelf area gets hidden, and conversely hides the banner image as well. This allows your content to have more room and to keep your users from having to scroll too far to get through your pages.
Be sure to watch the tutorial video relating to banner images above in the tutorials section of this page.
If you want something more than just a banner image in that shelf area, be sure to check out the ExtraContent options of the Bamboo theme.
The sidebar for this theme can be placed on either the left- or right-hand side of the content area. You can also choose to hide the sidebar on any given page. It is visible by default.
The sidebar automatically collapses itself when the browser shrinks down far enough and is then accessible to the user by tapping or clicking the + button in the upper right of the content area to show the sidebar’s contents. The + button has a great hover feature for the desktop where, when a user hovers over the + button a tooltip appears with the sidebar title in it.
Included in the Bamboo theme are 15 different beautiful, built-in background styles. We’ve also included the ability for you to use your own images, stretched out over the background as well. To do so you use the Resources area, as you would with the banner images.
Be sure to watch the overview video toward the top of the page where we talk about using your own custom background images.
In addition to these built-in background styles and the ability to use custom background images we’ve also included several background overlays. These pair really well with the custom backgrounds, adding a bit of texture to your images.
And last, but not least, we’ve also got several color pickers for the background options. One color picker to change the background itself, and others that allow you to set your own gradient for the site title background and divider bars.
Bamboo includes several max widths. Since this theme is responsive in nature the width of the content area adjusts down in size automatically as the browser is made smaller. The content width also adjusts down in size on mobile devices like the iPad and iPhone. The max-width choice sets a maximum width that the content are can reach when the browser is stretched out wide. The available max-widths in Bamboo are:
- 1,060 px
- 1,000 px
- 960 px
- 900 px
- 860 px
- 800 px
- 760 px
- 700 px
The RapidWeaver color picker is a great tool that helps provide a theme with a great deal of flexibility for you as the user. The Bamboo theme makes great use of the color picker to allow you to customize many areas of the theme for your site designs. Those areas that are customizable with the color picker are:
- Site Title
- Site Slogan
- Horizontal Navigation Text
- Horizontal Navigation Gradient: Top
- Horizontal Navigation Gradient: Bottom
- Drop Down Navigation Selected Background
- Drop Down Navigation Selected Text
- Drop Down Navigation Background
- Drop Down Navigation Text
- Blog Entry Accent
- BlockQuote Background
- BlockQuote Text
- Sidebar Background
- Sidebar Text
- File Sharing Items Background
- File Sharing Items Text
- Title Background and Dividers Gradient: Top
- Title Background and Dividers Gradient: Bottom
- Footer Background
- Footer Text
- Footer Links
You’re able to choose from several different fonts for your site title in the Bamboo theme.
- Museo Slab
- Museo Sans
- Helvetica Neue
- Lucida Grande
Bamboo features our Blog Entry Topper feature, found in many of our recent theme releases. With this feature you can to place large images above the title of your blog posts quite easily with this great feature, which is similar to that found in many other platforms like WordPress, ExpressionEngine and Tumblr. You’re also able to toggle on some decorative photo corners for the Blog Entry Topper images in the Special section of the theme variations!
The images inserted above the blog entries using the Blog Entry Topper automatically adjust with the changing width of the theme’s content area.
When displayed on mobile platforms the archives get hidden away in the drop down sidebar area. Note though that if you hide the sidebar, the archives get hidden as well. This is true of the desktop and mobile versions.
On top of all of this, we made the normally bland, and un-styled tags section of the blog’s sidebar look quite nice by dressing up each individual tag.
Be sure to checkout the blog demo page on our live preview site to see all of this in action as well as watch the tutorial video above in the tutorials section regarding the blog features of the theme.
You can easily use your own logo image in the Bamboo theme. Simply place the logo image into the appropriate image drop spot in the RapidWeaver Site Setup pane, and the Bamboo theme takes it from there. We recommend an image size of 128 x 128 px. This allows it to fit nicely on everything from desktop web browsers, all the way down to the mobile screen of the ever popular iPhone!
Bamboo offers 4 different ExtraContent areas… and 3 of those 4 may actually surprise you a bit!
The first two ExtraContent areas, when they contain content, will present themselves as tabs in the main content area. The main content area will also then become a tab, creating a wonderful three-tab interface. The ExtraContent tutorial video, above in the tutorials section of this page, shows this in detail as well as shows you how to use ExtraContent in this theme.
**Note: Content in the ExtraContent areas 1 and 2 should be kept fairly simple as this content loads behind the main content area. Including lots of complexity in these areas may lead to slower page load times or conflicts.
The third ExtraContent area is located at the top of the main content area and has a nice, shaded divider to partition it off from the main content and sidebar.
The fourth and final ExtraContent area can be toggled on, in the theme variations, to appear in the shelf area, just above the main content of the theme.
All of the ExtraContent areas are flexible so we do recommend Joe Workman’s Responsive Layout and Fluid Image stacks for use with these ExtraContent areas. This is also covered in the ExtraContent tutorial video above in the tutorials section of this page.
Photo Album: This theme comes with a great LightBox feature built right in that spruces up the RapidWeaver Photo Album page style. It also provides a great LightBox that will be optimum for users on iPhones and iPod Touches as well!
This LightBox is enabled by default. Be sure to watch the tutorials above to learn more!
The Photo Album page also has a few options for styling your photos when you are using the Square Thumbnails option of the RapidWeaver Photo Album page. You can place photo corners, scotch tape and thumb tacks on your photos to dress up your Photo Album page.
Theme FAQ: We provide a built-in theme FAQ in the Bamboo theme. This allows you to get answers to your questions quickly and easily.
(Note: You must turn off the theme FAQ before publishing your pages)
Our themes support a wide variety of web browsers. We test each theme in these modern browsers to make sure that your sites will look good, and function properly. We highly suggest Safari on the Mac and PC as it is one of the most standards compliant browsers on the market today.