Previews

Bamboo Screenshot
Bamboo Screenshot Bamboo Screenshot Bamboo Screenshot Bamboo Screenshot Bamboo Screenshot Bamboo Screenshot

This theme is responsive.

New to responsive site design? Find out what a responsive theme is! Also, the Responsive Layout, Fluid Image and Fit Text stacks from Joe Workman pair well with this theme!

Overview


Mobile friendly

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.

Theme tutorials

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

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.


Features

Header

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.

Sidebar

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.

Background

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.

Width

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

Color picker

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:

- Links
- 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
- Background

Fonts

You’re able to choose from several different fonts for your site title in the Bamboo theme.

- Museo Slab
- Museo Sans
- Georgia
- Helvetica Neue
- Pacifico
- Lucida Grande

Blog

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.

Site Navigation

Bamboo sports a horizontal, drop-down navigation for the desktop, and a great tap-to-expand navigation for the iPhone.

The theme knows how wide the browser is and adjusts the size and layout of the navigation based on the width of the browser. It also automatically adjusts the layout and size of the navigation for the iPhone as well.

Bamboo also allows you to show an indicator on horizontal menu items that have child menu items. You can also have the theme remove the links to all top-level, parent navigation items on a page-by-page basis. This makes the top-level items not link to anything, and is good for some users when creating drop-down menus.

You can choose to place the navigation on the left- or right-hand side of the menu bar.

If you are using extremely long page names Bamboo will truncate them a bit to make sure they fit in your navigation bar. This goes for the site’s breadcrumb trail as well.

Bamboo’s drop down menu system supports two levels of navigation (parent and child).

ExtraContent

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.

Misc

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.

Misc

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)

Supported browsers

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.


Safari
Safari
FireFox
FireFox
Chrome
Chrome
Opera
Opera 10+
Internet Explorer
IE 9+