Merch Styling

Custom Theme Styling (CSS)

90% of Merchs design is achieved with the GeneratePress customizer and built in modules. The other 10% is through custom functions and CSS.

by

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.

Typography

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.

Like this here

Buttons

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:

a.button,
.wp-block-button__link,
.happyforms-submit,
.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;
}

a.button:hover,
a.wp-block-button__link:hover,
.happyforms-submit:hover,
.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);
}

Header

Underline

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 Posts