Image
RapidWeaver Theme

Mint

A lightweight, responsive theme that helps you to build sites that look beautiful on both your visitor’s desktop computer as well as their mobile devices!

This page outlines the settings included in the Mint theme and talks about what they do, and how they affect the theme's display and functionality. In addition we have a tutorial and walk-thru video below that helps get you started using the theme, as well as gives you an idea what it can do before purchase. For examples of the theme in action, please visit its product page.


Tutorial Videos

We've created several tutorial videos that walk you through using the major features of the theme. These are a good resource for both before and after your purchase. Watch them now to get an idea of some of the interesting things this theme can do, and follow along with them later after your purchase to help in building your new site.

What does this do?

Below we look at what each of the settings within the theme. This is good reference in case you get stuck when building your site, as well as to get an idea of what controls exist in the theme before you acquire it.

Beautiful Banners
Unique Navigation
ExtraContent Areas
Social Badges

Image

Theme Toggles

RESPONSIVE VIDEO EMBEDS
If you're going to be including video embeds from YouTube or Vimeo on your page you'll want to enable this feature. This features applies a bit of javascript code to the page which will make these embeds responsive.

FADE IN NAVIGATION ON PAGE LOAD
Enabling this feature will cause the navigation to be set to an opacity of zero, and then fade in as soon as the page has finished loading. Provides a nice effect during page loading.

Image

Font Family

Here we provide a drop down selector that is populated with several different presets for your page's font styling. This provides a quick and easy way to apply pre-paired fonts for your page's content.

Image

Banner

Here you can choose whether you'd like to use a custom gradient for your banner's background or instead apply a custom image using the Banner settings in RapidWeaver. If you're new to using the RW banner settings, be sure to watch our tutorial video, at the top of this page, to learn more. It is super simple!

GRADIENT COLOR PICKERS
These two color pickers allow you to customize the gradient background for your banner when you've opted for a Gradient banner.

BANNER OVERLAY COLOR PICKER
Use this color picker to add a nice subtle overlay to your banner background image. This can help set your banner content off from the background image a bit for better legibility for your visitors.

BANNER BORDER
Here you can adjust the width and color of the border at the bottom of the banner area. This allows you to create a nice unique divider between the banner and content of the page.

BANNER HEIGHT
Here we can set a height for our banner area at each of the three responsive breakpoints. Each has its own drop down that lets you set a different height / height style for these breakpoints:

  • Flexible (large padding)
  • Flexible (small padding)
  • Flexible (no padding)
  • Full height (100%)
  • Full height (900px)
  • Full height (800px)
  • Full height (700px)
  • Full height (600px)
  • Full height (500px)
  • Full height (400px)

The flexible settings allow the banner to grow and shrink depending on the content that you've inserted within it. This is great for responsive content on our modern webpages.

The Full Height setting sizes the banner to match the height of the browser window or device screen.

The remaining options are all fixed heights. Meaning they will not grow or shrink with your content. These can be useful sometimes for specific purposes, but generally the flexible and full options are better for responsive sites.

Image

Slogan

SLOGAN ALIGNMENT
Allows you to choose how you'd like your slogan text to be aligned. You can align it to the left, center or right, or if you'd rather not display the slogan you're also able to hide it as well.

Image

Content

CONTENT SIZE
Here we can choose the width of the container that will hold our page's main content. We've provided several predefined widths to choose from.

CONTENT TEXT & LINKS COLOR PICKERS
These two color pickers will allow you to adjust the color of your main content's text and links individually.

Image

ExtraContent Areas

EXTRACONTENT AREA WIDTHS
Several of the ExtraContent areas within the Mint theme allow you to set a separate width from that of the main content area as well as from other ExtraContent area. You can adjust the width of ExtraContent areas 1 through 4 here.

Image

Footer

FOOTER WIDTH
Much like the ExtraContent areas you can adjust the width of the footer section of the page independent of the main content and ExtraContent areas.

Image

Navigation Bar

SHADOW
Allows you to add or remove a drop shadow on your navigation bar.

UPPERCASE SITE TITLE
When enabled your site title, within the navigation bar, will be uppercased.

HIDE SITE LOGO ON THIS PAGE
Allows you to hide the site logo that appears within the navigation bar.

COLOR PICKERS
This section also includes color pickers for various elements within the navigation bar.

  • Site Title
  • Background
  • Background Divider
  • Navigation Text
  • Navigation Text (Hover)
  • Navigation Text (Active)
  • Parent Indicator
  • Parent Indicator (Hover)
  • Parent Indicator (Open)

NAVIGATION BAR HEIGHT
Choose from several preset heights for for the size of your navigation bar.

NAVIGATION BAR DROPDOWN
In addition to the color pickers for the navigation bar itself, you're also able to adjust the color for the dropdown as well. The theme provides color pickers for the following items within the drop down.

  • Background
  • Drop Down Text
  • Drop Down Text (Hover)
  • Drop Down Text Background (Hover)

NAVIGATION TOGGLE SHADOW
Allows you to add or remove the drop shadow on the navigation toggle.

NAVIGATION TOGGLE COLOR PICKERS
You can adjust the colors for the toggle using color pickers for the following items:

  • Background
  • Icon

MOBILE NAVIGATION TOGGLE COLOR PICKERS
You can also adjust the colors for the toggle using color pickers for the following items:

  • Background
  • Icon
  • Icon (Open)
Image

Sidebar

LOCATION
Choose whether you'd like the sidebar to appear on either the left- or right-hand side of you main content area. If you don't have a need for a sidebar you can also choose to hide it here as well.

You're also able to define colors for the following items within the sidebar area separate from your main content area.

  • Sidebar text
  • Sidebar links
Image

Social Badges

You're able to insert social media badges onto your pages via small code snippets, which we've provided below. Be sure to watch our Social Badges video to learn how to use them in your site design.

Badge Snippets Badge Snippets
Twitter

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

Google Plus

<a class="myBadge google-plus" href="#"></a>

Dribbble

<a class="myBadge dribbble" href="#"></a>

Facebook

<a class="myBadge facebook" href="#"></a>

Instagram

<a class="myBadge instagram" href="#"></a>

Github

<a class="myBadge github" href="#"></a>

LinkedIn

<a class="myBadge linkedin" href="#"></a>

Skype

<a class="myBadge skype" href="#"></a>

Tumblr

<a class="myBadge tumblr" href="#"></a>

YouTube

<a class="myBadge youtube" href="#"></a>

Apple

<a class="myBadge apple" href="#"></a>

Windows

<a class="myBadge windows" href="#"></a>

Xing

<a class="myBadge xing" href="#"></a>

Email

<a class="myBadge email" href="#"></a>

Android

<a class="myBadge android" href="#"></a>

Stack Overflow

<a class="myBadge soverflow" href="#"></a>

Pintrest

<a class="myBadge pintrest" href="#"></a>

Dropbox

<a class="myBadge dropbox" href="#"></a>

Behance

<a class="myBadge behance" href="#"></a>

Vine

<a class="myBadge vine" href="#"></a>

RSS

<a class="myBadge rss" href="#"></a>

Comments

<a class="myBadge comments" href="#"></a>

Pencil

<a class="myBadge pencil" href="#"></a>

Sound Cloud

<a class="myBadge soundcloud" href="#"></a>

Code Pen

<a class="myBadge codepen" href="#"></a>

Etsy

<a class="myBadge etsy" href="#"></a>

Medium

<a class="myBadge medium" href="#"></a>

Reddit

<a class="myBadge reddit" href="#"></a>**

SnapChat

<a class="myBadge snapchat" href="#"></a>

Steam

<a class="myBadge steam" href="#"></a>

Twitch

<a class="myBadge twitch" href="#"></a>

Yelp

<a class="myBadge yelp" href="#"></a>

LOCATION
Allows you to choose where on the page the social badges will appear. You can choose to place them just below the banner or in the footer of the page.

COLOR PICKERS
Use the color pickers in this section to adjust the color of the following items in relation to Social Badges.

  • Background (below banner)
  • Icon (below banner)
  • Icon background (below banner)
  • Icon (footer)
  • Icon background (footer)
Image

Blog

COLOR PICKERS
The blog offers many opportunities for customizing the colors in our layouts. We have provided color pickers for the following items to help you in customizing your blog design.

  • Blog Entry Title
  • Archive Divider Lines
  • Category Links
  • Archive Date Links
  • Tag Cloud Link Background
  • Tag Cloud Link Text
  • RSS Feed Links
  • Read More Button Border
  • Read More Button Text
Image

Photo Album

LIGHTBOX
Enabling this feature allows your photo album page images to open in a beautiful pop-up lightbox, further adding to the usefulness of the photo album page that comes with RapidWeaver.

HIDE CAPTIONS ON ALBUM PAGE
When using the lightbox feature you may want captions to appear in your lightbox but not on the album page. In that case, be sure to enable this feature as well as enable captions for "Everywhere" in the Photo Album page's settings.

COLOR PICKER
Allows you to adjust the backdrop overlay color for the lightbox using a color picker.

Image

Contact Form

COLOR PICKERS
The built-in RapidWeaver contact form page offers many opportunities for customizing the colors in our design. We have provided color pickers for the following items to help you in customizing your contact form pages.

  • Submit Button Background
  • Submit Button Border
  • Submit Button Text
  • Submit Button Background (hover)
  • Submit Button Border (hover)
  • Submit Button Text (hover)
  • Reset Button Background
  • Reset Button Border
  • Reset Button Text
  • Reset Button Background (hover)
  • Reset Button Border (hover)
  • Reset Button Text (hover)
  • Field Border
  • Field Border (focus)
  • Field Border (hover)
Image

ExtraContent Area Two

TYPE
Allows you to choose the styling type for the ExtraContent area number two. You can choose various styles ranging from angled to non-angled designs, as well as varying shadow types.

COLOR PICKERS
This ExtraContent area offers you the ability to define a background based on a gradient. You're given color pickers for this and more for this particular ExtraContent area.

  • Gradient (top left)
  • Gradient (bottom left)
  • Text
  • Links
Image

ExtraContent Area Three

TYPE
Allows you to choose the styling type for the ExtraContent area number three. You can choose various styles ranging from angled to non-angled designs, as well as varying shadow types.

COLOR PICKERS
This ExtraContent area offers you the ability to define a background based on a gradient. You're given color pickers for this and more for this particular ExtraContent area.

  • Gradient (top left)
  • Gradient (bottom left)
  • Text
  • Links
Image

ExtraContent Area Four

COLOR PICKERS
This ExtraContent area offers you the ability to define a background based on a gradient. You're given color pickers for this and more for this particular ExtraContent area.

  • Text
  • Links
Image

ExtraContent Area Five

COLOR PICKERS
This ExtraContent area offers you the ability to define a background based on a gradient. You're given color pickers for this and more for this particular ExtraContent area.

  • Text
  • Links
Image

Footer

COLOR PICKERS
In addition to the settings for customizing the width of the footer, further up in the settings, we're also able to adjust these colors associated with the footer.

  • Footer Text
  • Footer Links
  • Footer Divider Line
Image

Breadcrumb

ALIGNMENT
Choose whether you'd like to align the breadcrumb trail to the left, center or right. If a breadcrumb is not needed on a specific page you can also choose to hide it here.

COLOR PICKERS

The following color pickers are available for customizing the breadcrumb trail.

  • Non-linked text
  • Links