tMM Tekh

tMM Tekh

Built For RapidWeaver & Beyond

Spearhead Theme

Screen Shot 2015-05-25 at 5.26.46 PM

An in-depth look at the very first theme created for tMM Tekh. Modified page plugins, engaging designs, and smooth animations render this theme an outstanding introduction to the RapidWeaver community.

Table of Contents

Theme Options
Tidbits
Changelog



Theme Options

Colours: General
Colours: Text
Colours: Navigation
Colours: Page Plugins
Colours: Extra Content
Page Design
Title Position
Text Font
Title Font
Toggle Switches
Colours: Updates
Updates: Slideshow Interval
Updates: Slideshow UI Position


Colours: General
OptionDescription
General BackgroundSet the background colour of the overall page.
Header BackgroundSet the background colour of the header area.
Page BackgroundSet the background color of the page area (Noticeable when Page Design is set to "Standard").
Footer BackgroundSet the background color of the footer area.
GradientSet the gradient color for the background of the overall page. Gradient coordinates with General Background for effect.

Colours: Text
OptionDescription
GeneralSet the color of the general text.
LinksSet the color of the links.
Title InitialSet the color of the title before animation.
Title ModifySet the color of the title after animation.
SloganSet the color of the slogan text.
FooterSet the color of the footer text.
Footer LinksSet the color of the footer links.
Content TriggerSet the color of the content trigger. Used only in animated sequence.

Colours: Navigation
OptionDescription
Main NavigationSet the color of the main links.
Submenu NavigationSet the color of the submenu links.
Submenu BackgroundSet the background color of the submenu.
Mobile Navigation ButtonSet the color of the button for the mobile menu.
Mobile Navigation TriggerSet the color of the trigger for the mobile menu.
Mobile SubmenuSet the background color for the mobile submenu.
Mobile Submenu NavigationSet the color of the mobile submenu links.

Colours: Page Plugins
OptionDescription
Plugin Description BackgroundSet the background color of each page plugin's description area.
Plugin Description TextSet the color of each page plugin's description text.
Plugin Element Label BackgroundSet the background color of each plugin element's label.
Plugin Element Label TextSet the color of each plugin element's label text.
Plugin Element Content BackgroundSet the background color of each plugin element's content area.
Plugin Element Content TextSet the color of each plugin element's content text.
Plugin Element Footer BackgroundSet the background color of each plugin element's footer.
Plugin Element Footer TextSet the color of each plugin element's footer text.

Screen Shot 2016-05-17 at 3.43.59 PM

Figure 1: Plugin "Elements".

OptionDescription
Photo Caption BackgroundSet the background color of the photo caption.
Photo Caption TextSet the color of the photo caption's text.
Blog Category BackgroundSet the background color of the blog categories.
Blog Category TextSet the color of the blog category text.
Blog Tag BackgroundSet the background color of the blog tags.
Blog Tag TextSet the color of the blog tag text.
Blog Footer ButtonSet the color of the blog footer button.
Blog Footer Button TextSet the color of the blog footer button's text.
Form UI ElementsSet the color of all form UI elements. Includes radio buttons & checkboxes.
Form Reset ButtonSet the color of the form reset button.
Form Submit ButtonSet the color of the form submit button.
Form Footer BackgroundSet the background color of the form's footer.
Form Footer TextSet the color of the form's footer text.

Colours: Extra Content
OptionDescription
EC1 BackgroundSet the background color for EC1.
EC2 BackgroundSet the background color for EC2.
EC3 BackgroundSet the background color for EC3.
EC4 BackgroundSet the background color for EC4.
EC5 BackgroundSet the background color for EC5.
EC6 BackgroundSet the background color for EC6.
EC7 BackgroundSet the background color for EC7.
EC8 BackgroundSet the background color for EC8.

Page Design
OptionDescription
StandardContent page is set to a maximum width of 1100px.
WideContent page is set to a maximum width of 100%.
Wide: Full Screen HeaderContent page is set to a maximum width of 100%. Header will be full screen upon initialization.
Wide: AnimatedContent page is set to a maximum width of 100%. Upon initialization, header will be full screen in addition to a trigger provided. When this trigger is activated, the residual content will display in an animated fashion.

Title Position
OptionDescription
CenterTitle will be positioned on the center of the header.
LeftTitle will be positioned on the left-side of the header.
RightTitle will be positioned on the right-side of the header.

Text Font
Font TypeExample
LatoLorem ipsum dolor sit amet, consectetur adipiscing elit.
RalewayLorem ipsum dolor sit amet, consectetur adipiscing elit.
MerriweatherLorem ipsum dolor sit amet, consectetur adipiscing elit.
NeutonLorem ipsum dolor sit amet, consectetur adipiscing elit.

Title Font
Font TypeExample
LatoLorem ipsum dolor sit amet, consectetur adipiscing elit.
RalewayLorem ipsum dolor sit amet, consectetur adipiscing elit.
MerriweatherLorem ipsum dolor sit amet, consectetur adipiscing elit.
NeutonLorem ipsum dolor sit amet, consectetur adipiscing elit.

Toggle Switches
OptionDescription
Disengage GradientRemove gradient from page.
Disengage Link-Nest ParentRemove links to nested parents on the navigational menu. Useful for setting up labels.
Engage Mobile Navigation TransparencyWhen activated, creates a hollowed-out navigational bar for mobile screens.
Engage Plugin-Element ShadowsApply shadows over plugin elements.
Engage Plugin-Element SimplicityRemove the label, content, and footer backgrounds on all plugin elements.
Invert Navigation OverlayChange the navigational overlay from light to dark.
Invert Lightbox OverlayChange the lightbox overlay from light to dark.
Invert Form UI OverlayChange the form UI overlay from light to dark.
Invert Form Select OverlayChange the form's select overlay from light to dark.
Invert Reset OverlayChange the form's reset overlay from light to dark.
Invert Submit OverlayChange the form's submit overlay from light to dark.

Colours: Updates
OptionDescription
Slideshow ControlsSet the color of the slideshow controls.

Updates: Slideshow Interval
OptionDescription
NormalSet the slideshow interval speed to normal.
FastSet the slideshow interval speed to fast.
SlowSet the slideshow interval speed to slow.

Updates: Slideshow UI Position
OptionDescription
CenterPosition the slideshow controls on the center.
LeftPosition the slideshow controls on the left.
RightPosition the slideshow controls on the right.



Tidbits

Header Image Background
Gradient Background
Faux-Parallax Effect


Header Image Background
1. Start by downloading the snippet file from the official theme website. Locate "Header Image Background Snippet", then click to download.

2. Locate the downloaded file, then unzip to transfer the snippet over to RapidWeaver.

3. Locate the snippet file within "Snippets". Apply directly onto Inspector > Header > CSS.

4. The header background will take effect using the images from the Resources section. Simply apply the directory of the image onto the Resource URL.

Gradient Background
1. Start by downloading the snippet file from the official theme website. Locate "Gradient Background Snippet", then click to download.

2. Locate the downloaded file, then unzip to transfer the snippet over to RapidWeaver.

3. Locate the snippet file within "Snippets". Apply directly onto Inspector > Header > CSS.

4. The gradient background will take effect immediately. Adjust the direction & color of the gradient as desired.

Faux-Parallax Effect
1. Start by downloading the snippet file from the official theme website. Locate "Faux-Parallax Effect Snippet", then click to download.

2. Locate the downloaded file, then unzip to transfer the snippet over to RapidWeaver.

3. Locate the snippet file within "Snippets". Apply directly onto Inspector > Header > Header.

4. The faux-parallax will take effect using the images from the Resources section. Simply apply the directory of the image onto the Resource URL.



ChangeLog

VersionDescription
spH-M123Some files converted to Content Delivery Networks (CDN), enabling faster performance on load time.
spH-M122Logo mobility fix.
spH-M121Language localization corrected.
spH-M120Waterfall enabled. Slideshow header added.
spH-M100Initial launch.

blog comments powered by Disqus
About Me
tMM Tekh is a sole proprietorship maintained & operated by William Davis. A capable designer/developer since 2013, William has always strived to unlock the full potential of RapidWeaver products. He currently resides in San Diego, California.

Affiliated Links
LinkedIn
RapidWeaver Community
RapidWeaver Central
RealMac Software Forums
The Weaver’s Space