Helpful Custom CSS entries

A collection of CSS snippets that anyone can use in Jetpack's Custom CSS feature. Download Jetpack | Get Help

Change the size of the header image:

.site-logo { max-height: 8.5em; }
8.5ems is the default. Raise or lower this amount to what suits you.

Fit background image to page width:

body.custom-background { background-size: cover; }

Change the size of the social icons:

.sociallink svg { height: 2.5em; width: 2.5em; }
I suggest that you do not change this without using media queries because the social icons are responsively sized.

Change the color of the social icons:

.social-icon-fill { fill: #00B0CC; }

Change the color of the menu and menu close icons:

.menu-icon, .close-icon { fill: #00B0CC; }

Change font family:

body, button, input, select, textarea { font-family: 'name-of-font-family'; }

Change the font size of posts and pages:

.entry-content { font-size: 1em; }
1em is the default.

Change the maximum width of the main content area:

.site-main, .site-footer { max-width: 45em; }
45em is the default. It is recommended that the footer be the same width as the main content area.

Change the maximum width of the header:

.site-header { max-width: 60em; }
60em is the default.

Increase size of comment box by default:

textarea#comment { height: 4em; }
7em is the default.

Make the sidebar pop closed when the page loads

.sidebar.left { animation: pop-closed 0.75s 0.75s; }

Prevent current menu item from shaking on hover:

.menu .current-menu-item > a:hover, .menu .current_page_item > a:hover { -webkit-animation: none; animation: none; }

Remove the border between the header and the main section of the site:

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

Remove the the border from below posts:

.post .entry-meta { border-bottom: none; }

Remove the the border under hovered links in an entry:

.no-touch .entry-content a:hover { border-bottom: none; }

Hide Page Titles on archive pages:

.archive .page-header { display: none; }

Hide Page Titles on category pages:

.category.page-header { display: none; }

Hide Page Titles on specific category pages:

.category-NAMEOFCATEGORY .page-header { display: none; }