Free Download A small donation of $10 USD or more is required if you want to switch-off or hide the designer credits in Eclipse.

Theme details

Theme name: Eclipse
Theme designer: Will Woodgate
Current version: 4.0
Last updated: 15th October 2019
First released: 19th February 2014
Compatibility: RapidWeaver 8 Only
GDPR / DSGVO / CCPA compliant: Yes
Responsive: Yes
Doctype: Valid HTML5
Font Awesome version: 5.11.2
Bootstrap version: 4.3.1
Usage agreement: Click for details
Example website: View online
Download example website: Click here

Support links

Knowledge Base
1-to-1 Technical Support
RapidWeaver Community Forums

Free resources

Bootstrap code snippets
ExtraContent stacks & snippets
Complimentary Stacks
More Stacks

Share this page

Introduction

Eclipse opts for a more traditional 'boxy' website template type design; where the necessity of a more impactful 'in your face' web design is less desirable! The simple layout, clean lines, web safe fonts and muted colour scheme make Eclipse great for a business website or an education portal. Some users have also said they have used it for creating email newsletters too.

Despite being a free theme, Eclipse brings some powerful 'pro' features to the table, like support for a drop-down navigation menu, ExtraContent and social media buttons. Eclipse works great with all your favourite RapidWeaver page type plugins. Also of note, this theme has exceedingly good standards of webpage accessibility, brilliant print output and loads exceptionally fast.

For users seeking a more powerful theme with additional navigation, sidebar, style and colour settings, our Media theme is a perfect upgrade to Eclipse.

Excellent Accessibility

In Eclipse, you can tab through all page links (including the dropdown navigation menus) using your tab key. All links in the completed webpage have a 1px solid border applied to themselves, when they receive tab focus. The entire webpage structure is also created with assistive devices (like screen readers) in mind. Our enhancements mean that the theme aspect of your completed website is accessible to all your website users.

Navigation

The default navigation layout is a drop-down menu displayed at the top of the page. Drop-down navigation in free themes is very rare, so this makes Eclipse a fairly unique theme, in this respect.

If you are not a fan of the drop-down menu, you can easily switch to either a sidebar block or sidebar split navigation layout in the theme style settings (both require the sidebar to have been enabled). Mobile devices will display a collapsible navigation layout.

Eclipse supports multiple levels of subpages. By means of dragging and dropping your pages in the RapidWeaver page list panel, you are able to nest pages within other pages and change the structural hierarchy of your website. To display little caret or chevron arrows alongside your 'parent' navigation links, just enter this Font Awesome Icon code alongside the page name:

<i class='arrow fas fa-caret-down'></i>
or

<i class='arrow fas fa-caret-right'></i>

Giving the icon a class of arrow will see it hidden in the mobile menu, footer navigation and breadcrumb links. The chapter about Font Awesome Icons in the knowledgebase provides more details and sample code to use.

Banner

The default banner is a CSS horizontal gradient that sweeps from left to right. In the theme settings, you can choose to use a RapidWeaver 'Dragged & Dropped' banner (supply a suitable image in the Page Inspector) or set the banner to be a solid colour fill.

The banner area contains your website title, slogan and logo. These are all configured in your General site settings. The title and slogan can have its alignment changed and we also provide some basic font face settings for this content. Your logo image can be floated either left or right. The banner automatically adjusts in height to adapt to the content within. If you need to make the banner taller, some theme settings let you adjust this.

Translating theme text strings

You can use custom CSS code to change the labels applied to different parts of the theme.

/* Mobile menu button */
#mobileToggleLabel:before {
content: 'Menu';
}

/* Last updated (footer) */
#lastUpdated:before {
content: 'Last updated: '
}

/* Breadcrumb (footer) */
#breadcrumb:before {
content: 'Viewing';
}
Enter custom CSS code in the RapidWeaver Page Inspector or your Site Settings (Code > CSS). The text can be changed to anything you want. This is a reliable and easy method of changing these theme labels.

ExtraContent

It might be a free theme, but Eclipse certainly does not skimp on ExtraContent! This theme has an incredible 20 ExtraContent containers located in various parts of the page. These let you break-out of the normal theme layout to put words, pictures or links in other parts of the page not normally editable by RapidWeaver. You can use the 'Preview ExtraContent Containers' option at the bottom the theme Miscellaneous style settings to see where they are all located. Then follow the advice in our knowledgebase for adding your content; using either the code snippet or stack.

Social networking icons

Our demo site places social media buttons in the theme navigation bar, using the ExtraContent technique. Here is the same code used, pasted into Settings > Code > Body within RapidWeaver:

<div id="myExtraContent2">
<a href="https://twitter.com"><i class="fab fa-twitter"></i></a>
<a href="https://facebook.com"><i class="fab fa-facebook"></i></a>
<a href="https://instagram.com"><i class="fab fa-instagram"></i></a>
<a href="https://vimeo.com"><i class="fab fa-vimeo"></i></a>
<a href="https://example.com"><i class="fa fa-envelope"></i></a>
</div>
This HTML code get applied to every page in your project. It provides you total flexibility towards embedding Font Awesome Icons that can be set as links to different social media platforms. Most people set the links to their own social media accounts. Further information is available in the knowledgebase.

A small reminder...

Eclipse is generously provided to you as a free RapidWeaver theme. You are welcome to download Eclipse and use it for any personal or commercial projects. All that is politely asked is that any credits remain intact. If you want the credits removed or want to show your appreciation for this theme, a small monetary contribution of $10 USD or more is appreciated.