ThemeFlood.

Introduction

Big, bold and beautiful to look at! Creamy was originally developed several years ago under the "SeyDoggy" brand. It's always been a firm favourite of many RapidWeaver users. Creamy has aged well. This theme still remains a viable theme design for various different projects. Regular updates have seen Creamy make the transition across to becoming a fully mobile responsive theme, complete with excellent features like Bootstrap, Font Awesome Icons and flexbox layouts.

What's new in Creamy v8?

The latest version of Creamy introduces the following features.

• A brand new array of style and colour settings, including number input boxes and RGBa colour pickers. There have never been so many theme style and colour settings in any previous version of Creamy.
• ExtraContent containers are now "content aware". This means that instead of needing to manually toggle-on the display of ExtraContent containers, they automatically enable themselves if you place any content within them. This makes Creamy much faster and easier to work with.
• Subtle improvements to accessibility. For example, you can now tab-through the drop-down navigation menu.
• Revised the choice of sidebar positioning settings, so you have more control over the sidebar on both mobile and desktop.
• New Miscellaneous style settings to perform tasks like hiding the default RapidWeaver dragged and dropped banner.
• Creamy is now only compatible with RapidWeaver 8 and later. It will not work on older versions of RapidWeaver.

If you are eligible for Creamy 8 as a feee update, please login and check your Paddle account. Please backup all RW addons and project files before installing the update. Please anticipate that you will need to do through and re-apply some theme colour and style settings in projects that were applied to earlier versions of Creamy.

10 preset styles included

These are available for selection within the 'Theme Styles' dropdown. 10 presets have been created for you to use or expand further. Or course you don't have to start with these presets; if you prefer you can just dig straight into the theme style settings to create your own styles. But for novice RapidWeaver users, these can be a fun way to quickly customise the theme and see some of what it can do.

Drag and drop banners

These are the easiest way to customise the banner area in Creamy. Within the RapidWeaver page inspector, drag and drop a suitable image to use as your banner image. It is feasible to use different banner images on different pages, using this technique.

RWFontKit ready

The RWFontKit plugin is built into Creamy, giving you access to over 100 embedded, web safe and system font faces. These are easy to apply to headings or the main page content, using select menus in the theme style settings. No expensive font stacks or complicated coding required!

Good for accessibility

Creamy has a couple of special accessibility features built in. For example, using the tab key on a keyboard, a website user is able to tab-through the entire menu (and drop downs) and make a link selection using the return key. Little details like these can make a huge, positive impact on the overall accessibility of a website. In some regions of the world, creating an accessible website is a legal obligation.

Customising the mobile menu toggle label

Usability experts recommend that the 'hamburger' mobile toggle menu is accompanied with a text label, so users know where to access the menu on mobile devices. Creamy complies with this recommendation and displays the word 'menu' next to your toggle navigation menu. If you want to change this text label to something else, you can use this custom CSS code:

#mobile-menu-label:before {
  content: 'Menu';
}

This code can be entered within Settings > Code > CSS to take effect on all pages of your website.

Social media icons

To set these up (per the homepage of the demo site) use ExtraContent 1. Either the ExtraContent stack or code snippet can be used. Within your ExtraContent container, type this code:

<ul class="social_links">
	<li><a href="https//twitter.com/" class="fab fa-twitter"></a></li>
	<li><a href="https//facebook.com" class="fab fa-facebook"></a></li>
	<li><a href="https//linkedin.com" class="fab fa-linkedin"></a></li>
	<li><a href="https//youtube.com" class="fab fa-youtube"></a></li>
</ul>

Update the links accordingly to point towards your own social media accounts. Font Awesome Icons are used for the button labels. More information on social media buttons, Font Awesome icons and ExtraContent is available in the knowledge base.

Arrows on drop-down menu items

If you have subpages to display under a parent link, consider adding little arrows to denote this. Double-click the page name in the RapidWeaver page list. Then type this after the page name:

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

These are just Font Awesome icons. Using single quotes instead of double quotes means the page will display correctly in your sitemap. The addition of the extra arrow class is just there to tell the theme not to display this arrow in the mobile toggle menu or your footer breadcrumbs.