With the Iconic theme we continue to push the boundaries of what RapidWeaver can do, taking things right to the edge—literally—with our brand new edge-to-edge content area feature! Iconic also has six unique ExtraContent areas, a clean polished look, built-in icon font, drop down navigation and more.
It also uses the RapidWeaver 5 Resources for adding your own background images to the ExtraContent area 1, which serves as a header area.
Make mine modern
We’ve incorporated a series of features in the Iconic theme 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+. The Iconic theme is IE 8 compatible.
Note: While your site will display OK in IE8, it will not live up to the high standards of other modern browsers. It will lack some of the refinements such as rounded corners, drop shadows, etc.
Here are some tutorials and walk through videos to preview Iconic’s features and show you how to use some of the amazing features found in the this 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.
The Iconic theme doesn’t have a traditional banner area. It makes use of the theme’s amazing ExtraContent area 1 as its header area.
This method allows for you to create amazingly powerful headers for your pages that can contain not only images, but text, carousels, buttons and so much more when making your pages with Stacks.
We’ve also included features in the theme that allow you to use your own images, as well as some beautiful built-in patterns, for the background of this great ExtraContent area 1.
Be sure to read the ExtraContent section to learn more and of course watch the ExtraContent tutorial video above to get a better understanding of how it works!
In addition to the header ExtraContent area, you can also modify the title bar space. You can change the height, the font styling and alignment of the title bar. You can also hide the title bar on a page-by-page basis. These things all affect the site title, slogan, and logo which are contained in the title bar.
You’re also able to hide individual items in the title bar on a page-by-page basis, such as the slogan and logo. The slogan is hidden by default.
The sidebar on the Iconic theme is also rather special. In addition to allowing you to choose to place the sidebar on the right- or left-hand side of the page, or hide it altogether, this theme also has two ExtraContent areas built right into the sidebar area!
Check out the ExtraContent section and the ExtraContent tutorial video, above, to learn more about these wonderful additions to the sidebar!
We’ve also included a decorative aspect to the sidebar. You can choose to toggle a solid color stripe on or off that gets placed at the top of the sidebar container. This stripe also has a color picker that lets you choose what color the stripe should be.
This theme allows you to use the RapidWeaver color picker to choose a color that best suits your site. You can also choose from several background overlays. These overlays provide depth and texture to your site background by layering textured images over top of your chosen background color.
We’ve included several width options for you to choose from in the Iconic theme:
• 1,260 px
• 1,160 px
• 1,060 px
• 960 px
• 860 px
• 760 px
• 660 px (no sidebar)
• 560 px (no sidebar)
• 460 px (no sidebar)
The Iconic theme has a vast array of choices when it comes to color pickers. Here is a list of all of them:
• Sidebar Stripe
• Site Title Font
• Site Slogan Font
• Site Slogan Divider
• ExtraContent Area 1 Background
• ExtraContent Area 2 Button Icon
• ExtraContent Area 2 Button Background
• ExtraContent Area 2 Button Hover / Selected
• Site Title Bar Background
• Background Color
• Content Text
• Sidebar Text
• Content Links
• Sidebar Links
• Sidebar Background
• Social Badges - Hover
• ExtraContent area 1 - Text
• ExtraContent area 2 - Text
• ExtraContent area 2 - Background
• ExtraContent area 3 - Text
• ExtraContent area 4 - Text
• ExtraContent area 5 - Text
• ExtraContent area 5 - Background
• ExtraContent area 5 - Links
• Blog Badge Background
• Footer Text
• Footer Links
Included in the Iconic theme are a number of font options for your site title:
• Lucida Grande
• Museo Slab
• Museo Sans
• Colaborate Thin
• Colaborate Bold
We’ve continued our trend of making the RapidWeaver blog page feel special and have added features to help your blog posts stand out. We’ve included our Blog Entry Topper feature in the Iconic theme. If you’re new to our themes, or just new to the Blog Entry Topper, be sure to check out the Blog Entry topper tutorial video.
In addition to the Blog Entry Topper we’ve included a very special way to do Blog Badges in this theme. We’ve come up with a system to allow you to place a different badge on each individual blog entry. To do so you must simply copy and paste a snippet of code into your blog entry. For instructions on how to do this properly watch the Blog Badge tutorial video.
Below is the snippet you’ll need when making your blog badges. Copy it and paste it into your blog entry, at the bottom of the entry, as shown in the tutorial video. Once you do that, modify the icon name to reflect the icon you wish to use. The icon name is bolded below. A full list of icon names are listed at the bottom of this page in the Font Awesome icon font chart.
When pasting your code snippet in your blog entry you must do one or both of these things:
• Paste as Plain Text (Command-Alt-V)
• Highlight your snippet once pasted and apply Ignore Formatting in RapidWeaver (Option-.)
<i class="blogBadge icon-pencil"></i>
The site logo appears in the title bar on the Iconic theme. It is to the left, or right of the site title, depending on your Site Title and Slogan Alignment choices. You can hide the site logo on a page-by-page basis.
There are no size restrictions on the image size you use for your logo, but the theme will size the image to fit within the bounds of the title bar.
This theme sports 6 different ExtraContent areas that are unique and powerful. With so many wonderful ExtraContent areas we decided to build in an option in the Special section of the Styles tab that will make all of the ExtraContent areas visible as well as label them for you to give you an idea of where they’re located.
The ExtraContent areas are located below the title bar, making for a wonderful header area, in a hidden, collapsable area below the header section, in and below the side bar, and more!
Since the ExtraContent area 1 is your header area for your site we’ve provided several background styles, as well as the ability to use your own images for the background via the RapidWeaver 5 Resources section. You can also style the ExtraContent area 1 with several different overlay styles to give your ExtraContent area 1 background some real style.
With the ExtraContent area 2 being a hidden area above the content area, we’ve made it so that you can customize the icon and look and feel of the button that triggers the opening and closing of this ExtraContent area.
One of the more unique ExtraContent areas is number 6. It just has to be seen to be believed. So be sure to watch our ExtraContent tutorial video to see where they’re all located as well as to see how to use them to your advantage!
The Iconic theme allows you to place select social networking badges in the menu bar. We’ve included several snippets in the Extras folder of the DMG file you received when you purchased your theme. You’ll install and use these to make use of the Social Networking Badges in the Iconic theme. Be sure to watch the Social Badges video tutorial to see how to install and use these badges.
The social badges included in the Iconic theme are:
• App Store
• Heart / Favorite
• Star / Favorite
Photo Album LightBox
Iconic has a beautiful photo LightBox built-in that provides you an alternate display method for your RapidWeaver Photo album pages. You can toggle this on and off on a page-by-page basis, and is off by default.
While you can turn the breadcrumb on and off for your entire site in the RapidWeaver site setup pane, the Iconic theme allows you to remove the breadcrumb trail on a page-by-page basis.
We’ve added a option to allow you to customize the look of your bulleted lists in your content area. Select one of the icon styled bullet options on a page-by-page basis:
• Arrow 2
• No Bullets
Need an icon somewhere on your page? No problem. We’ve included a great icon font just for this purpose. The Font Awesome font allows you to easily insert a quick snippet of code (below) that will put an icon of your choosing on the page. The snippet is below, but please be sure to watch the Font Awesome tutorial video to learn the proper way to use this incredible font.
When pasting your code snippet into your pages you must insert it as plain text, like so:
• Paste as Plain Text (Command-Alt-V)
Font Awesome Icon Chart
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.