ThemeFlood.

Introduction

A firm favourite with many ThemeFlood fans! Media is one of those age-old iconic theme designs that fulfils the "I need to get a decent website online today" criteria. Its simple, somewhat boxy appearance has always been an attraction for users seeking a clean and contemporary design. As the name suggests, Media is ideal for various projects, for which you demand a strong and highly customisable theme design. A huge number of variables can be customised within Media. You can really make this theme look like your own.

The latest version of Media embraces the best of modern web design. A mobile-first responsive design, embedded font faces, viewport-scaled text, CSS flexbox layouts and subtle animations combine to create a highly professional theme. Within a short space of time you can change any number of settings, drop in your own banner image and finish with a web design unlike almost anything else.

The versatility of Media can only be truly appreciated once you start working with it in RapidWeaver.

Header

The prominent header container in Media is formed using a FreeStyle banner container. This gives you a very flexible space in which to display eye-catching media content above the page fold (hence where the name 'media' came from). This FreeStyle banner container can accommodate static images, slideshows and even video. If you have not encountered the FeeStyle concept before, then check the details in the theme user guide. Additionally, any image placed in ExtraContent3 will be rendered as the header background.

Navigation

As any web developer will tell you, navigation is arguably the most important factor when building websites. Media provides an attractive CSS-animated drop-down menu system by default. Many aspects of this drop-down menu can be customised in the theme style settings.

This latest version Media provides options to change the alignment of the desktop menu bar. Some clever theme settings are also included to convert drop-down menu panels into a simple 'mega menu', with links spanning multiple columns.

If you are not especially keen of drop-down menu navigation, then don't worry. Media also includes the option of split or sidebar block navigation layouts too, providing a wonderfully simple form of navigation.

On smaller screens, the menu will revert to a toggle navigation type. This avoids breakage of the menu on smaller screens (like tablets and smartphones).

To display downward-pointing caret icons after parent page links like we have in the demo site, simply enter this code after the page names:

<i class='arrow fas fa-caret-down' style='font-size:18px;'></i>

Style settings

As you have come to expect in many ThemeFlood RapidWeaver themes, Media includes dozens of useful theme style and colour settings. These let modify and tweak many aspects of the theme appearance. The free demo version of Media available to download from this page will give you a full insight as to what's available. You may be pleasantly surprised at just how flexible this RapidWeaver theme actually is.

Translatable text labels

Media 7 permits you to adjust different presentational text labels displayed on the screen, making this particular RapidWeaver theme very suitable for multilingual websites. Labels are set using the CSS content property, so you can use the following custom CSS code to change labels into any language:

To change the text of the mobile toggle menu button, use this custom CSS code:

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

To change the text 'Last Updated' next to the last updated date stamp:

#lastUpdated:before {
	content: 'Last Updated: ';
}

To change the text 'Currently Viewing' at the start of the breadcrumb container, use:

#breadcrumbcontainer:before {
	content: 'Currently Viewing ';
}

To change the breadcrumb separators, you can use this:

#breadcrumbcontainer li:before {
	content: '>';
}

Content & Sidebar

Media has a simple two-column content and sidebar layout. Although quite a number of other RapidWeaver themes have moved away from this sort of setup, we still find it quite popular; as a way of displaying main content and complementary content.

The sidebar in this theme doesn't actually have a background. The grey background you see by default is actually the main container background visible from behind the sidebar. This setup gives the illusion of the sidebar being the same height as the content container, without the need for any messy code or Javascript hacks.

Social bar

Social media plays a vital role in promoting businesses organically via a virtual word-of-mouth. In a theme called 'Media', it would inappropriate to ignore this fact! With this in mind, Media incorporates an optional social bar container at the top of the page. This container (ExtraContent1) allows you to place useful links, icons and short extracts of information like contact details. The social bar styling can be adjusted and you can have the social fixed or static. You can also set the social box floating left or right as a box.