ThemeFlood.

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.