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 bloghas 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 requested CSS snippets that you can paste directly into the Custom CSS so that you 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; }

Make site title lowercase

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

Make site tagline lowercase

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

Add background color to photo link button on home page

.bloglink-bg h2 { background-color: #ffffff; }

Make Portfolio item titles visible on mobile devices without hovering

@media only screen and (max-width: 767px){ .item .overlay { background: rgba(255, 255, 255, 0.7); }  .item h4 { color: inherit; } }

Add a photo background to text sections on the scrolling home page

.home-section.home-content { background: url('

http://your-image-url-

here.jpg

') no-repeat!important; background-position: 50%!important; background-size: cover!important; }

Adjust spacing of home page sections

.home-section { padding: 5% 0!important; }

Change text color of primary navigation

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

Increase size of header logo

.header-logo img { max-height: 200px; }

Display user avatar beside comment

.comment .avatar { display: block; }

Remove bottom border on secondary navigation menu

.nav-secondary { border-bottom: none; }

Remove box around headline text

.site-header .header-headline-box h2 { border: none; }

Images displaying twice in portfolio category archives

.tax-portfolio_category .attachment-blog-featured { display: none; }

Change size & color of menu icon on mobile

/*Change size and color of menu icon on mobile*/

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

button.menu-toggle {

color: #ffffff;

font-size: 40px;

}

}

Change text color of menu items on mobile

@media screen and (max-width: 767px){ .nav-primary .genesis-nav-menu a { color: #000; } }

Edit Link Style

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

Make Portfolio Items Unclickable

.home-collection .item { pointer-events: none; }

Remove Featured Image in Posts

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

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

CoastalStation Seven