Image
RapidWeaver Theme

Geometric

A clean and classy, responsive theme that provides an elegant design for your portfolio, blog, or small business site. Geometric is is not only versatile but also easy-to-use.

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

Banners
ExtraContent Areas
Navigation
Social Badges

What does this do?

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

Image

Theme Toggles

MAKE VIDEO EMBEDS FLEXIBLE
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.

HIDE LOGO
Allows you to hide the site logo on an page-by-page basis.

BANNER CENTERED
Enabling this feature moves your banner in toward the center of the page, essentially taking it from an edge-to-edge appearance, which is the default, and transforming it into a standalone centered image.

HIDE BANNER ON IPHONE SIZED SCREENS
This setting hides the banner section on smaller device screens like those on the smaller iPhone models. This is a way to take back some of the screen real estate on these smaller devices.

HIDE PHOTO ALBUM CAPTIONS
Allows you to hide the captions on the thumbnails page of your Photo Album.

HIDE SITE BORDER
A unique feature of the Geometric theme is the border around the outside edge of the web browser. Enabling this feature will hide that decorative border.

HIDE SITE BORDER ONLY ON MOBILE DEVICES
This feature allows you to hide the site border, walked about in our previous setting above, but do so only for the mobile breakpoint. Again, this is a way to free up some screen real estate on smaller devices.

SCROLL TO TOP BUTTON
This feature adds a small button to the bottom of the browser window that, when clicked, will take the visitor back to the top of the page.

REMOVE LINK UNDERLINES
Enabling this setting removes the underlines from links within the content of your page.

Image

Max-width

Geometric offers multiple preset widths for the main content area of the theme. This allows you to adjust the content area to your liking and needs.

Image

Top of Page Padding

The Geometric theme allows a great deal of flexibility in its minimal design. This setting lets you choose from some preset padding options for the upper portion of the page to help give the page a little more, or less whitespace via padding.

Image

Site Title & Slogan

SITE TITLE
Here you can select the font family to use for your page's Site Title. Additionally we provide a color picker that allows you to customize the Site Title's color to your liking.

SITE SLOGAN
In addition to setting a font family for the Site Title, you can do the same for your Site Slogan here. The Site Slogan settings contain two color pickers as well, one for the text and one for the slogan's border.

Image

Blog Entry Title

Here you can select the font family to use for the title of your Blog entries. Additionally we provide a color picker that allows you to customize the Blog Title's color to your liking.

Image

Banner Area

DIVIDER ICON
We've built-in some decorative divider stylings that separate the banner image from the site title and slogan area. These decorative elements can add a touch of personality to your pages.

BANNER
Geometric allows you to choose from one of the many preset stock banner images, or provide your own using the theme's custom banner options. You can learn more about this in the Banners tutorial video toward the upper portion of this page.

If you don't need or want a banner at all we've included an option to turn it off as well. This gives you a nice minimal design to build your page On.

Image

Navigation

FONT
Here you can choose from several pre-selected font family stylings for the text within your site's navigation. Here you'll also find the following color pickers to customize the look and feel of the navigation:

  • Top Level Navigation Text
  • Sub Navigation Text
  • Sub Navigation Background
  • Top Level & Sub Navigation Selected Text
  • Top Level & Sub Navigation Selected Background

NAVIGATION STYLE
You can chose between having more square shaped backgrounds for your navigation items, with nice rounded corners, or opt for a pill shaped styling.

Image

Mobile Navigation

COLORS
Geometric allows you to style the mobile navigation different from the normal desktop navigation. You can use the following color pickers to adjust the mobile styling:

  • Mobile Navigation Toggle Background
  • Mobile Navigation Toggler Foreground
  • Mobile Navigation Background
  • Mobile Navigation Foreground
  • Mobile Navigation Background Selected
  • Mobile Navigation Foreground Selected

MOBILE NAVIGATION TOGGLE ICON
Here you can select what icon you'd like to use for the toggle button that opens and closes the mobile navigation.

Image

Content Area

COLORS
This section allows you to adjust the following items that are related to the main content area of the theme:

  • Site Background
  • Site Border & Footer Background
  • Text
  • Links
Image

ExtraContent Areas

EDGE-TO-EDGE
Here you can independently adjust the ExtraContent Areas, allowing them to go edge-to-edge on the page, providing you with a way to create modern style layouts.

COLORS
We've included color pickers here to adjust the ExtraContent Areas to your liking. You can adjust the following items using color pickers:

  • ExtraContent 1 - Background
  • ExtraContent 1 - Text
  • ExtraContent 1 - Links
  • ExtraContent 2 - Background
  • ExtraContent 2 - Text
  • ExtraContent 2 - Links
  • ExtraContent 3 - Background
  • ExtraContent 3 - Text
  • ExtraContent 3 - Links
Image

Misc Colors

This section contains a few extra color pickers for the theme:

  • Footer Text
  • Footer Links
  • Scroll to Top Button BAckground
  • Scroll to Top Button Foreground
Image

Sidebar

SIDEBAR LOCATION
This setting allows you to adjust where the sidebar is placed on your page. You can adjust it to place the sidebar on the left- or right-hand side of the page. If you don't need the sidebar you can set it to hidden.

Image

Social Badges

You can use some of our pre-defined code snippets to insert Social Media Badges on to your pages. You can check out our Social Badges video for more info.

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>