Customizing WordPress With Jetpack’s CSS Stylesheet Editor

One of the coolest things that the Jetpack plugin added to the WordPress admin was the CSS Stylesheet Editor. Here is the CSS code that I use to customized with my Twenty Fourteen theme with out building a child theme.

The look that I wanted for my custom Twenty Fourteen was a clean, centered WordPress site. I added more width to the post entry’s and changed the color of the left “secondary” sidebar and the footer to white. Below is the CSS that you can add.

Login into admin area hover over Appearance and click on Edit CSS. Paste the CSS below into that box.


@import "http://fonts.googleapis.com/css?family=Playball";

h1#site-title {
font-family: 'Playball', cursive;
}

.content-area,
.content-sidebar {
padding-top: 40px;
}

.site-title a {
color: #EEE;
}

.site-description {
display: none;
}

.site-title {
font-family: 'Playball', cursive;
font-size: 28px;
letter-spacing: 1px;
}

a {
color: #00ADEE;
text-decoration: none;
}

.site {
background-color: #fff;
position: relative;
margin: 0 auto;
}

.site:before {
background-color: #fff;
}

.header-main {
background-color: #222;
}

.main-content {
width: 100%;
margin: 5px auto 0;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 580px;
}

.entry-title {
font-size: 23px;
font-weight: 500;
}

#secondary {
background: #FFF;
margin-top: 38px;
}

#secondary h1.widget-title, #footer-sidebar h1.widget-title {
color: #333;
border-bottom: 5px solid #aaa;
font-size: 15px;
}

.content-sidebar .widget .widget-title {
border-top: 0;
border-bottom: 5px solid #aaa;
}

#secondary a {
color: #333;
}

#secondary a:hover {
color: #111;
text-decoration: underline;
}

#footer-sidebar, .site-info {
background: #FFF;
color: #222;
}

.site-info {
display: none;
}

a:active,
a:hover {
color: #333;
text-decoration: underline;
}

::selection {
background: #888;
}

::-moz-selection {
background: #888;
}

button,
.contributor-posts-link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
background-color: #888;
}

button:hover,
button:focus,
.contributor-posts-link:hover,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: #333;
}

button:active,
.contributor-posts-link:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
background-color: #CCC;
}

.search-toggle {
background-color: #888;
}

.search-toggle:hover,
.search-toggle.active {
background-color: #333;
}

.search-box {
background-color: #333;
}

.site-navigation a:hover {
color: #333;
}

.site-navigation .current_page_item > a,
.site-navigation .current_page_ancestor > a,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a {
color: #CCC;
}

.entry-title a:hover {
color: #333;
}

.entry-meta a:hover {
color: #333;
}

.cat-links a:hover {
color: #333;
}

.entry-meta .tag-links a:hover {
background-color: #333;
}

.entry-meta .tag-links a:hover:before {
border-right-color: #333;
}

.entry-content .edit-link a:hover {
color: #333;
}

.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
background: #888;
}

.page-links a:hover {
background: #333;
border: 1px solid #333;
}

.post-navigation a:hover,
.image-navigation a:hover {
color: #333;
}

.paging-navigation .page-numbers.current {
border-top: 5px solid #888;
}

.paging-navigation a:hover {
border-top: 5px solid #333;
}

.comment-author a:hover,
.comment-list .pingback a:hover,
.comment-list .trackback a:hover,
.comment-metadata a:hover {
color: #333;
}

.comment-reply-title small a:hover {
color: #333;
}

.widget a:hover {
color: #333;
}

.widget button,
.widget input[type="button"],
.widget input[type="reset"],
.widget input[type="submit"] {
background-color: #888;
}

.widget input[type="button"]:hover,
.widget input[type="button"]:focus,
.widget input[type="reset"]:hover,
.widget input[type="reset"]:focus,
.widget input[type="submit"]:hover,
.widget input[type="submit"]:focus {
background-color: #333;
}

.widget input[type="button"]:active,
.widget input[type="reset"]:active,
.widget input[type="submit"]:active {
background-color: #CCC;
}

.widget-title a:hover {
color: #333;
}

.widget_calendar tbody a {
background-color: #888;
}

.widget_calendar tbody a:hover {
background-color: #333;
}

.widget_twentyfourteen_ephemera .entry-meta a:hover {
color: #333;
}

.content-sidebar .widget a {
color: #888;
}

.content-sidebar .widget a:hover {
color: #333;
}

.content-sidebar .widget input[type="button"],
.content-sidebar .widget input[type="reset"],
.content-sidebar .widget input[type="submit"] {
background-color: #888;
}

.content-sidebar .widget input[type="button"]:hover,
.content-sidebar .widget input[type="button"]:focus,
.content-sidebar .widget input[type="reset"]:hover,
.content-sidebar .widget input[type="reset"]:focus,
.content-sidebar .widget input[type="submit"]:hover,
.content-sidebar .widget input[type="submit"]:focus {
background-color: #333;
}

.content-sidebar .widget input[type="button"]:active,
.content-sidebar .widget input[type="reset"]:active,
.content-sidebar .widget input[type="submit"]:active {
background-color: #CCC;
}

.content-sidebar .widget .widget-title a:hover {
color: #333;
}

.content-sidebar .widget_twentyfourteen_ephemera .entry-meta a:hover {
color: #333;
}

.site-info a:hover {
color: #333;
}

.featured-content a:hover {
color: #333;
}

.slider-control-paging a:hover:before {
background-color: #333;
}

.slider-control-paging .slider-active:before,
.slider-control-paging .slider-active:hover:before {
background-color: #888;
}

.slider-direction-nav a:hover {
background-color: #888;
}

@media screen and (min-width: 783px) {
.primary-navigation ul ul {
background-color: #888;
}

.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
background-color: #888;
}

.primary-navigation ul ul a:hover,
.primary-navigation ul ul li.focus > a {
background-color: #333;
}
}

@media screen and (min-width: 1008px) {
.secondary-navigation ul ul {
background-color: #888;
}

.secondary-navigation li:hover > a,
.secondary-navigation li.focus > a {
background-color: #888;
}

.secondary-navigation ul ul a:hover,
.secondary-navigation ul ul li.focus > a {
background-color: #333;
}
}

My name is Jake and I'm from the Portland OR area right along the Columbia river. I'm obsessed with Photoshop, WordPress, streetbikes and of course my awesome family!

Tags: , ,