ThemeFlood.

Introduction

Back by demand, Lake has received a major design and code overhaul. Now more impactful in design and brimming with lots of powerful new style and colour settings. The additional 'blockiness' presentation, subtle shadow effects and background textures make for a really clean and sharp looking theme design.

Banner

Lake features a 'freestyle' banner container. This is essentially an empty banner which can accept static images, a slideshow or even an embedded video. Static banner images can be entered via the drop zone, within the RapidWeaver Page Inspector. Alternatively use the FreeStyle HTML markup like this, to source an image:

<div id='fs'><img src="%pathto(images/editable_images/1.jpg)%" alt="My banner"></div>

This HTML markup can be entered within the page content or sidebar regions. Another option you have is to place content within ExtraContent Container 8. It is perfectly feasible to setup different banners on different webpages. If no banner is required, simply check the Hide Banner option, within your Lake theme settings.

Navigation

Navigation is an important factor in any website. In Lake, we provide you with the option of a drop-down navigation layout, split navigation layout (placing parent pages in the title bar and sub pages in the sidebar) or a plain ordinary block navigation layout (with all page links displayed in the sidebar together). Horizontal navigation layouts are tricky to get working in responsive setups, so these links automatically revert to a toggle navigation layout when the page width is less-than 996px wide.

Building with Stacks

The Stacks plugin is not included with the purchase of this theme design. But Lake is compatible with the Stacks plugin and provides another option to structure and layout your webpages. Our example website published with Lake uses the Stacks plugin for the homepage.

This page was constructed by disabling the display of a sidebar and enabling the Neutralise Content Background setting. Both settings are in the theme style settings. Next, a selection of free stacks (including Gridlocity, Shady, BoxCanvas, 1 Column and Text) were used to build-up the responsive layout.

Setting-up social networking buttons

ExtraContent 1 is a dedicated container at the top of the webpage, for placing social networking or bookmarking icons for website users to click on. Font Awesome is already built into the theme, making setup of these buttons easier. In our demo site, we used this HTML markup within the sidebar:

<div id="myExtraContent1">
<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://linkedin.com"><i class="fab fa-linkedin"></i></a>
<a href="https://youtube.com"><i class="fab fa-youtube"></i></a>
<a href="https://example.com"><i class="fas fa-envelope"></i></a>
</div>

That is the minimum code required to create a series of social networking buttons. The Lake theme will display them as square buttons, with white icons. Customise the URLs and icon designs to anything you want. Everything placed inside the two 'div' tags will be embedded within ExtraContent1.

Even if you have never used HTML before, the code is remarkably simple. Paste the markup directly into an HTML sidebar type. Alternatively if you're using a Styled Text sidebar, paste this markup in, highlight it with your mouse and select Format > Ignore Formatting from the RapidWeaver menu; to remove surplus line breaks.

Translating different text labels

Lake applies simple text labels alongside items like the mobile menu (hamburger) toggle button, the 'last updated' date stamp and the breadcrumb links. We set these labels using CSS content properties and you can override them just as easily with your own custom CSS like this:

#lastPublishedLabel:before {
    content: 'Last updated: '
}

#breadcrumbLabel:before {
    content: 'Viewing: '
}

#mobileToggleLabel:before {
    content: 'Menu';
}