Customizations Using CSS

Please note, we are unable to provide support for custom CSS or any theme customizations - understand that this is a DIY endeavour. Do not edit the files located under Appearance > Editor; any changes made here will be overwritten during the next theme update.

We know it can seem intimidating at first, but getting a good grasp of CSS is one of the most powerful skills you can have when creating or modifying your own site. Our resource libraryhas some great resources that can help you get started making some CSS changes of your own, like this one, this one, and this one.

This article is not a full-blown tutorial on CSS (Google is your friend for that), but will provide you with a few snippets that will get you started.

How to make changes to CSS

We recommend that all changes to CSS be made using the Custom CSS box located under Appearance > Customize. This allows all changes to be saved during theme updates.

Other options include using the Jetpack plugin's custom CSS editor, or other available CSS plugins.

Sample CSS Snippets

Here are a few frequently requests CSS snippets that you can paste directly into the Custom CSS and get started customizing your site today.

Increase/decrease font size of nav menu

.genesis-nav-menu { font-size: 12px; }

Increase/decrease font size of post titles

.entry-title { font-size: 15px; }

Increase/decrease font size of post date

.entry-time { font-size: 12px; }

Remove featured image on single posts

.single-post .attachment-blog-featured { display: none; }

Make site title lowercase

.site-title { text-transform: none; }

Make site tagline lowercase

.site-description { text-transform: none; }

Remove share buttons from blog posts

.blog-share-box { display: none; }

Add a background image to homepage text block sections

.home-section.home-content:nth-of-type(2) { background: url('http://your-image-url-here.jpg') no-repeat!important; background-position: 50%!important; background-size: cover!important; color: #fff; /*change this value to change text color if needed*/ }

*Note on the above css: Change the number in brackets to the desired text block section (i.e., "(2)" refers to the second text block section on the home page)

Change background color of nav menu on mobile only

@media only screen and (max-width: 767px) {     .genesis-nav-menu .menu-item {         background-color: #333;     } }

Force titles to show on portfolio masonry items

.item .overlay { background: rgba(51, 51, 51, 0.8); }  .item h4 { color: #fff; }

Change color of menu links

.nav-primary .genesis-nav-menu a { color: #333333; }

Force Larger Header Image

.home .site-header { background: url('http://your-image-url-here.jpg') no-repeat; background-size: cover!important; height: 800px; height: 100vh; background-attachment: fixed; }

*Be sure to change the URL

Force Header Image to Maintain "Landscape" Style on Mobile (Prevent Image Cutting Off in Mobile Version)

@media screen and (max-width: 467px) { header.site-header { height: 250px; } }

Remove Date From Posts

.entry-time { display: none; }

Center Footer Widgets

.footer-widgets .widget-area {

   margin-right: 5%;

   width: 30%;

   text-align: center;

}

.footer-widgets .widget-area:nth-of-type(3) {

   margin-right: 0;

}

@media screen and (max-width:767px) {

 .footer-widgets .widget-area {

     width: 100%;

     margin: 0 auto;

     float: none;

 }

}

Increase / Decrease Font Size of Content

.entry-content {

  font-size: 15px;

}

Edit Logo Size

.header-logo img {

   max-height: 150px;

}

Center Footer Items

.footer-widgets .widget-area { margin-right: 5%; width: 30%; text-align: center; } .footer-widgets .widget-area:nth-of-type(3) { margin-right: 0; } @media screen and (max-width:767px) { .footer-widgets .widget-area { width: 100%; margin: 0 auto; float: none; } }

Please remember, we are unable to provide support for custom CSS or any theme customizations - understand that this is a DIY endeavour.

IndustryStation Seven