Buy three themes and save 20% off your purchase. Use the discount code 3PACK during checkout!
Ruby theme screenshot

A responsive RapidWeaver theme that allows a great deal of flexibility when designing your next site! Develop both business and personal sites with this beautiful theme!


Solid foundation

The Ruby theme us built on a responsive foundation that allows you to build a site that looks great on both your visitor’s desktop computer as well as their mobile device, without needing to build two separate sites!

This theme makes use of some of the newest web technologies in order to provide your visitors with a great experience.

We’ve included several different ExtraContent areas, our Blog Entry Topper feature and a slew of different color pickers and a whole lot more!


Through the RapidWeaver Page Inspector we offer you a large variety of theme variations to create your site. Here's a few highlights:

  • Four customizable ExtraContent area
  • Drop down navigation
  • Over 30 color pickers
  • A variety of font choices for your site title and slogan
  • Page icon and divider customization

For a full, detailed rundown of all the the Ruby theme has to offer, click the Details tab above.

Header Area

The header area of this theme is a mix of your site title, logo, slogan, navigation and banner. It allows you to show or hide the title, slogan, logo, navigation and / or banner on a page-by-page basis.


You can choose from one of the included stock banner images, or supply your own using RapidWeaver’s resources. You are also able to adjust the height of the banner area: 175, 275 or 375 px.

Site Title & Slogan

You’re also able to adjust the font size for your site title, as well as choose from a few different fonts for both the title and slogan. We also provide a wide variety of options for your slogan background.


The navigation is a beautiful drop down design that turns into a collapsing navigation system on mobile devices to save space and to focus your visitor’s attention on your content. It support three levels of navigation — the main and 2 child-levels.


The sidebar can be placed one either the right- or left-hand side of your pages, or hidden altogether. When your visitor’s browser window is narrowed or they’re viewing your site on a mobile device, the sidebar gets placed below the content area.


This theme is responsive, meaning that the width of the content and other elements adjusts depending on the browser’s or mobile device’s width. You can choose from a few max-width options that cap the width of those elements on desktop browsers.

Blog Entry Topper

This theme features our Blog Entry Topper, allowing you to highlight each blog entry with an image that resides just about your blog entry’s title. This helps you break out of the standard RapidWeaver mold.

Site Logo

The logo appears to the left of the site title on your pages. The site logo resizes itself to fit the available space depending on the browser’s width or the mobile device’s screen dimensions. Its minimum suggested height is 105 px.

Embedded videos

When embedding YouTube and Vimeo videos on your pages Ruby helps you make them responsive so they’ll scale to fit your visitor’s browser or device! We show you how to accomplish this in our tutorial video.


The ExtraContent areas in the Ruby theme are real show stoppers. Their backgrounds stretch across the width of the browser. You to insert your own image into some of them to create custom backgrounds for your ExtraContent areas. Ruby has 4 ExtraContent areas in total.

ExtraContent Area 1

Located immediately below the banner area, this ExtraContent area can be made to stretch edge-to-edge in the browser, giving you the ability to use beautiful, responsive slideshow stacks to dress up your pages. You can use custom images as a background for this area.

ExtraContent Area 4

This ExtraContent area is located in the footer of the site, allowing you to create gorgeous, expanded footers for your pages. You can use custom images as a background for this area as well. The custom image fills in behind both the normal footer and the ExtraContent area.

More ExtraContent

There are more ExtraContent areas and more options, too! Be sure to watch the ExtraContent Areas tutorial videos to learn about how to use all four of the ExtraContent areas as well as what they can do for you and your site designs.

Page Divider

Below the banner area is a page divider that can be turned on and off on a per-page basis and can include a page icon to highlight your page’s content. We offer you a large variety of icons to choose from for your page icon.

Pre-made styles

The Ruby theme comes with several pre-made page styles baked right in. This makes styling your pages all that much quicker and easier. Choose one of these pre-made styles and Ruby automatically sets the colors for you!

Be social

We’ve included a snippet below to allow you to add social media badges to your pages. We’ve got a video in the Tutorials section on this page that shows you what the badges are and how to use them.

Social badges snippet

<a class="myBadge icon-twitter" href="#"></a>

Color pickers

The Ruby theme is overflowing with color pickers that allow you to easily customize the look and feel of your site’s pages. Using the color picker you can customize over 30 different elements throughout the theme's built-in variations.


Ruby is built on a solid, flexible, responsive foundation. This means your site will adjust different elements of its design in order to accommodate different browser and mobile device widths.

This allows you to build one site instead of two. Spend that extra time focusing on the important part of your site—your content!

Supported browsers

This theme makes use of some of the newest web technologies in order to provide your visitors with a great experience. This means supporting the most up to date browsers that follow web standards, such as: Safari, Chrome, Firefox and Internet Explorer v9+.

Custom Backgrounds

Custom Backgrounds

Social Badges

Social Badges

Video Embeds

Video Embeds

ExtraContent Area

ExtraContent Area

Blog Entry Topper

Blog Entry Topper
  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-cloud-download
  • icon-cloud-upload
  • icon-stethoscope
  • icon-suitcase
  • icon-building
  • icon-angle-left
  • icon-angle-right
  • icon-desktop
  • icon-laptop
  • icon-folder-open-alt
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-lightbulb
  • icon-exchange
  • icon-hospital
  • icon-ambulance
  • icon-angle-up
  • icon-angle-down
  • icon-double-angle-left
  • icon-tablet
  • icon-mobile-phone
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-bar-chart
  • icon-twitter-sign
  • icon-facebook-sign
  • icon-camera-retro
  • icon-key
  • icon-cogs
  • icon-comments
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-star-half
  • icon-heart-empty
  • icon-signout
  • icon-linkedin-sign
  • icon-pushpin
  • icon-external-link
  • icon-signin
  • icon-trophy
  • icon-github-sign
  • icon-upload-alt
  • icon-lemon
  • icon-phone
  • icon-check-empty
  • icon-bookmark-empty
  • icon-phone-sign
  • icon-twitter
  • icon-facebook
  • icon-github
  • icon-unlock
  • icon-credit-card
  • icon-rss
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-left
  • icon-bell-alt
  • icon-file-alt
  • icon-medkit
  • icon-h-sign
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-quote-left
  • icon-quote-right
  • icon-reply
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen
  • icon-group
  • icon-link
  • icon-cloud
  • icon-beaker
  • icon-cut
  • icon-copy
  • icon-paper-clip
  • icon-save
  • icon-sign-blank
  • icon-reorder
  • icon-list-ul
  • icon-list-ol
  • icon-strikethrough
  • icon-underline
  • icon-table
  • icon-magic
  • icon-truck
  • icon-pinterest
  • icon-pinterest-sign
  • icon-google-plus-sign
  • icon-google-plus
  • icon-money
  • icon-caret-down
  • icon-caret-up
  • icon-caret-left
  • icon-caret-right
  • icon-columns
  • icon-sort
  • icon-sort-down
  • icon-sort-up
  • icon-envelope-alt
  • icon-linkedin
  • icon-undo
  • icon-legal
  • icon-dashboard
  • icon-comment-alt
  • icon-comments-alt
  • icon-bolt
  • icon-sitemap
  • icon-umbrella
  • icon-paste
  • icon-user-md
  • icon-beer
  • icon-coffee
  • icon-food
  • icon-fighter-jet
  • icon-plus-sign-alt
  • icon-spinner
  • icon-double-angle-down
  • icon-circle-blank
  • icon-circle
  • icon-github-alt
  • icon-folder-close-alt