Image
RapidWeaver Theme

Lunar

Lunar is a sleek, modern RapidWeaver theme that allows you to build robust, versatile sites. Its sturdy, lightweight framework and gorgeous design are ideal for just about any type of site.

This page outlines the settings included in the Lunar 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.

Beautiful Banners
Navigation
Badges
ExtraContent Areas
Width Adjustments
Blog Entry Toppers

What does this do?

Let's have a look at what each of the many settings within the Lunar theme can do. This page is good reference both in the event that you get stuck when building your site, as well as to get an idea of what controls and settings exist within the theme before you make your purchase.

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. The video above covers this setting.

ENABLE PHOTO ALBUM ANIMATIONS
This feature allows your Photo Album page thumbnails to animate into place as the page loads. It provides a slick, stylish effect.

ENABLE 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. The video above covers this setting.

HIDE SITE TITLE & SLOGAN
These two options, when enabled, will hide the Site Title and / or Site Slogan respectively.

REMOVE SPACING BELOW BANNER
The Lunar theme comes preconfigured with a a bit of spacing below the banner to separate the banner section from the mail content of the page. Enabling this feature removes that extra space between the two.

LOCK DESKTOP NAVIGATION TO TOP OF PAGE
This feature will enable a sticky navigation for the desktop breakpoint. This locks the navigation to the top of the page for visitors.

HIDE BREADCRUMB ON THIS PAGE
Sometimes, when you've enabled the breadcrumb trail navigation, you may want to hide it on a per-page basis. You can use this setting to do so.

Image

Parent Navigation Items

Lunar allows you to customize how parent links, the top-tier items in your navigation bar, work. Here you can choose whether you'd like to have the top-tier, parent items linked or not.

When linked they're treated like a normal page that the visitor can click on and navigate to.

When un-linked the parent items act solely as a toggle for showing and hiding the drop down items, or child links.

Image

Banner

We've included the ability to use RapidWeaver's built-in banner option, which is found in the general and page specific settings in RapidWeaver.

Additionally we've also included 20 different stock themes to help you get up and running quickly.

Image

Site Title

SIZE
We've created three built-in preset size for you to choose from for your site title.

FONT
Here you're able to choose from several different font styles for your site title's text. Additionally we've provided a color picker for customizing the color of the site title text as well.

Image

Site Slogan

FONT
We've provided several font style to choose from for your Site Slogan text. Additionally we've provided a color picker for customizing the color of the slogan text as well.

LETTER SPACING
Here you can adjust the spacing between the characters within the site slogan. This allows you to add a more elegant look to the slogan text.

Image

Banner

HEIGHT
Lunar allows you to adjust the height of the banner based on the responsive breakpoints. You can set a different height for each of the three breakpoints, using either the flexible height (recommended) or a fixed height.

The flexible height adjusts the banner to be as tall as the content you place within the banner area.

OVERLAY
This feature, when enabled, will overlay a color between your banner's background image and its contents. This is often used to set this contents of the banner off from the background.

BANNER GRADIENT
This feature is used to help blend the banner section with the background of the main website itself. This faded effect is customized using a color picker to help match the background color of the site.

BANNER ANIMATIONS
We've created some elegant animations for the banner's contents for the Lunar theme. You can choose from one of three present animation patterns, or disable them if you don't want to animate the content.

BANNERS CONTENT ALIGNMENT
Here you can choose how the content within the banner section of the page is aligned -- left, center or right.

BANNER CONTENT WIDTH
Allows you to adjust the available, horizontal space for the content contained within the banner area. It can range from 670px up through 1,270 px in size.

Image

Content & Footer Widths

WIDTH
Here we're able to adjust the main content area of our page. This allows us to change the main content areas width independently of other areas on the page.

Image

ExtraContent Areas

ExtraContent areas allow us to place content into areas of our page that we wouldn't normally be able to using RapidWeaver's standard theme design.

WIDTH
For ExtraContent areas 2, 3 and 4 we have provided settings that allow you to adjust the width of each independently. This gives you a great deal of versatility.

Image

Sidebar

LOCATION
The Lunar theme allows you to choose whether you'd like the sidebar content to appear on the left- or right-hand side of the page. If you're not in need of a sidebar you can also disable it on a page-by-page basis.

Image

Site Logo

VISIBILITY
We've provided three settings that allow you to choose which breakpoints to show your site logo at. You can option to show the site logo at the mobile, tablet and desktop breakpoints individually.

Image

General Colors

This section contains color pickers for the following general items on your page:

  • Site Background
  • Main Content Background
  • Content Text
  • Content Links
  • Sitebar Title
  • Sidebar Text
  • Sidebar Links
  • Lightbox Overlay Background
Image

Navigation Colors

This section contains color pickers for the following navigation based items on your page:

  • Background
  • Sticky Background After Scrolled
  • Text
  • Active Text
  • Underline
  • Sub-Navigation Background
  • Sub-Navigation Text
  • Sub-Navigation Active Text
Image

Mobile Navigation Colors

This section contains color pickers for the following mobile navigation based items on your page:

  • Background
  • Text
  • Active Background
  • Active Text
  • Toggle Gradient Top
  • Toggle Gradient Bottom
  • Toggle Icon
Image

Blog Colors

This section contains color pickers for the following blog based items on your page:

  • Blog Entry Title
  • Read More Button Background
  • Read More Button Text
  • Read More Button Border
  • Tag Cloud Link Backgrounds
  • Tag Cloud Link Text
  • Archive Link Color
  • Tags Link Color
  • Category Link Color
  • Archive Dividers
  • Archive Icons
  • Tags Icon
Image

Social Badge Colors

This section contains color pickers for the following social media badge based items on your page:

  • Badge Background
  • Badge Icon
  • Badge Background - Hover
  • Badge Icon - Hover
Image

Footer Colors

This section contains color pickers for the footer area items on your page:

  • Background
  • Text
  • Links
Image

Extra Content Area 1

This section contains color pickers for the Extra Content Area 1 items on your page:

  • Text
  • Links
Image

Extra Content Area 2

This section contains color pickers for the Extra Content Area 2 items on your page:

  • Background
  • Text
  • Links
  • Toggle Gradient Top
  • Toggle Gradient Bottom
  • Toggle Icon
Image

Extra Content Area 3

This section contains color pickers for the Extra Content Area 3 items on your page:

  • Background
  • Text
  • Links

ADD TOP & BOTTOM PADDING
Additionally this section also includes a toggle that allows you to add padding to the top and bottom of the ExtraContent Area 3 section.

Image

Extra Content Area 4

This section contains color pickers for the Extra Content Area 4 items on your page:

  • Background
  • Text
  • Links

ADD TOP & BOTTOM PADDING
Additionally this section also includes a toggle that allows you to add padding to the top and bottom of the ExtraContent Area 4 section.

Image

Contact Form

This section contains color pickers for the contact form items on your page:

  • Field Background
  • Field Border
  • Field Text
  • Field Background - Focus
  • Field Border - Focus
  • Field Text - Focus
  • Button Background
  • Button Text

Social Media 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 Badges video to learn how to use them in your site design.

Badge Snippets Badge Snippets
Image
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>