A Beginner’s Guide to Building With GeneratePress


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 is Everything

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.

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

All About Site Library

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


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:

Built by Math

Build with Panels. Flexible, responsive panels are perfect for building grid-based layouts. We've got every base covered. From badges to dropdowns and everything in between.

Leave a Comment

Related Articles

Share to...