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.

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

Change font of site title only

.site-title { font-family: arial; }

Make uploaded logo image larger

.header-logo img { max-height: 150px; /*Edit this number. 130px is default*/ max-width: 100%; }

Make uploaded logo image fit full width

.header-logo { padding-left: 0; padding-right: 0; }

Increase/decrease font size of post titles

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

Increase/decrease font size of site tagline

.site-description { font-size: 15px; }

Remove featured image on single posts

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

Make site title and post headers upper & lower case

.site-title { letter-spacing: 2px; text-transform: none; } h1 { letter-spacing: 2px; text-transform: none; } h2 { letter-spacing: 2px; text-transform: none; }

Adjust spacing between nav menu items

.genesis-nav-menu .menu-item { margin: 0 3%; }

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; }

Hide uploaded logo on home page only

.home .header-logo { display: none; }

Adjust spacing around uploaded logo

.header-logo { padding-top: 100px; padding-bottom: 40px; }

Edit style of text links

.entry-content p a, .textwidget p a {     border-bottom: none;     color: #111;     font-weight: bold; }

How to hide the recipe print button

.print-button { display: none; }

Remove bar between site title and tagline

.site-title { border-bottom: none; }

Change Menu Font Size

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

Make Post Titles Equal Size

@media (min-width: 1024px){

   .masonry-post .entry-header {

     min-height: 160px;

   }

}

@media (min-width: 768px){

   .masonry-post .entry-header {

     min-height: 200px;

   }

}

Remove Featured Slider on Mobile Site

@media screen and (max-width: 767px){ .main-gallery { display: none; } }

Hide Content on Homepage Except Slider

.home main.content { display: none; }

Embedded Content Not Centered

.entry-content iframe {

   margin: 0 auto 20px;

   max-width: 100%;

   left: auto;

   display: block;

   transform: none;

   -webkit-transform: none;

   -moz-transform: none;

   -ms-transform: none;

   -o-transform: none;

}

Change Text Color of Menu Items on Mobile

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

 .nav-primary .genesis-nav-menu a {

     color: #000;

 }

}

Make Site Title Larger

.site-title { font-size: 50px; }

Hide Facebook Share Button

h5.fb-share-button { display: none; }

Hide Twitter Share Button

h5.twitter-share { display: none; }

Hide Email Share Button

h5.email-share { display: none; }

Hide Pinterest Share Button

h5.pinterest-share { display: none; }

Hide Comment Share Button

h5.comment-share { display: none; }

Make Primary Font Bold

h1, h2 {   font-weight: bold; }

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

KindredStation Seven