Custom Theme Styling (CSS)

All of the custom CSS can be found in the Customizer > Additional CSS. At around 400 lines it can happily remain there. But i generally recommend that it finds a home in a child theme stylesheet. Most of the common Theme CSS is covered here for the inquisitive or for those wanting to make changes. CSS for specific pages or elements are covered in their relevant posts.

It should be noted that Custom CSS is only displayed on the Front End. Adding editor styles ( at this time ) is not achievable with an imported Site.


The vast majority of the theme styling, particularly Typography, Spacing and Colors are set in the customizer. But there is some custom CSS at play.

Large H2 Heading

The large-heading class can be added to a H2 Title Block to increase its size.

This is the large H2 heading

h2.large-heading {
    font-size: calc(28px + (64 - 28)*(100vw - 400px)/(1600 - 400));
    line-height: 1.1em;

Unless you’re a fan of algebra this CSS looks complicated. In a nut shell it sets the font size dynamically based on the current screen size. Our font size range is 28px to 64px. And our screen size range is 400px to 1600px. Try adjusting your browser width to see the effect.
If you want more information on fluid typography then check out Responsive And Fluid Typography With vh And vw Units

Hover Link

The loud-link class will add an icon and underline hover effect. It should only be applied to a Text Block that only contains the link.


All Theme button colors and typography are controlled via the customizer. The Happy Forms button has its own styling controls in the plugins settings. The additional rounded corners and hover styling is applied using this CSS:

.woocommerce button.button {
    -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
    border-radius: 4px !important;

.woocommerce button.button:hover {
    -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);



For this minimalist design I thought it best that we make a clear distinction between the Site Header and the page content. This is achieved with a simple bottom border on our Site Header. It comes in two varieties. White for pages with a Merged Header Element, and black for the ones without.

.header-wrap .site-header {
    border-bottom: 1px solid #fff;
.site-header {
    border-bottom: 1px solid #ccc;

Primary Navigation

Hover Effect

A simple underline that scales from zero to menu item width on hover. It inherits the current color of the menu items.

.main-navigation .menu>.menu-item>a:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 1em;
    width: 0%;
    height: 2px;
    background-color: currentColor;
    -webkit-transition: 0.3s width ease;
    transition: 0.3s width ease;

.main-navigation .menu>.menu-item>a:hover:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:hover:before {
    width: calc(100% - 40px);

Related Articles

The Home Page Content

The home page content is built using the WordPress 5 Block editor a.k.a Gutenberg. It uses only Core Blocks and Woocmmerce Shortcodes. And as would be expected a little CSS has been thrown in.

The Single Post

Categorising post to create guides, how to’s and featured content is a great way to boost your shops presence. The single post header and single post has been designed to do just that. With custom hero title, excerpt and post navigation. 100% dynamic all you need to is add content.