Customize WordPress Twenty Seventeen CSS

Once you have installed WordPress, you will notice the themes, especially the default yearly themes, are often overused. However, with a bit of code, you can make your WordPress site stand out. By changing CSS styles, we can change the look and feel of a WordPress theme to fit a custom site.  Here’s a breakdown on how I used custom CSS to improve the look and feel of my website to fit my personality.

Basic CSS Style Improvements:

The first few things we can change, and also the most important to make your site stand out, is a color scheme. In my site, I elected to use the built in dark color scheme for the WordPress Twenty Seventeen Theme. You can find this in the WordPress editor under Dashboard -> Appearance -> Customize -> Colors.

Colors:

From there, I decided to implement a splash of cool blue color to accent the dark tones. I decided to use the color #5af for the titles and the headers h1-h3. Additionally, I used the color #eee for the light colored words against the dark background color. I didn’t want to use pure white, because I felt that it was too harsh of a contrast, and #eee was more pleasant to the eye, while still being legible.

I also used that color for any horizontal rules in blog content, and thickened the border to make it stand out more.

Links:

Continuing the color theme of my site, I made links change to the same #5af color when hovered on, and removed the thick underline for links on the main site, and added underlines to in-post links to separate them from regular text.

Buttons and Text Boxes:

Finally, to complete the color theme of my site, I changed the button boxes, and text boxes. I changed the color of the buttons to the same #eee color as text, and made the text the same blue #5af color. I also changed the text box border color to #444 to tie in with the built in dark color theme, and make a less contrasting frame.

Transparent Transition:

One of the things that annoyed me most about the theme, is the graduated transparent-to-black on the main site image, and section images. I later found out the banding that you could easily see in the transition was caused by CSS  only allowing linear gradients.

A better approach would be to implement an ease-in and ease-out gradient, but it is not possible to do so with basic CSS. Instead, I calculated what an ease-in and ease-out transition would look like, and used many linear steps to simulate this effect. With enough points, the banding disappeared, and the transition looked much smoother. Andreas Larsen has a great write up about this problem, and suggests several solutions to this banding problem.

/***************Colors**************/

.site-title a {
  color: #5af !important;
}


div.wpcf7-mail-sent-ok {
	border: 2px solid #5af;
}

.widget-title, .entry-title a, h1 {
  color: #5af !important;
}

h2, h3 {
  color: #5af !important;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #5af;
  margin: 1em 0;
  padding: 0; 
}

p, ul, li, a {
  color: #eee !important;
}

/***************Links***************/

a {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.entry-content a {
  color: #eee !important;
  border-bottom: 1px solid #999 !important;
  -webkit-transition: color 80ms, border-bottom 80ms !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

a:hover, a:focus {
  color: #5af !important;
}

.entry-content a:hover, .entry-content a:focus {
  border-bottom: 1px solid #5af !important;
}

/******Buttons and text boxes*******/

.colors-dark button, .colors-dark input[type="button"], .colors-dark input[type="submit"], .colors-dark .entry-footer .edit-link a.post-edit-link {
  color: #5af !important;
  background-color: #eee;
}

textarea, input {
  border-color: #444 !important;
}

/*****BG Transparent Transition*****/

@media screen and (min-width: 48em){
  .twentyseventeen-front-page.has-header-image .custom-header-media:before, .twentyseventeen-front-page.has-header-video .custom-header-media:before, .home.blog.has-header-image .custom-header-media:before, .home.blog.has-header-video .custom-header-media:before {
    height: 50%;
  }
}

.custom-header-media:before {
  background:linear-gradient(to top,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0.978) 9.5%,rgba(0, 0, 0, 0.925) 17.7%,rgba(0, 0, 0, 0.857) 24.7%,rgba(0, 0, 0, 0.781) 31%,rgba(0, 0, 0, 0.701) 36.8%,rgba(0, 0, 0, 0.62) 42.3%,rgba(0, 0, 0, 0.538) 47.6%,rgba(0, 0, 0, 0.455) 52.9%,rgba(0, 0, 0, 0.373) 58.2%,rgba(0, 0, 0, 0.291) 63.7%,rgba(0, 0, 0, 0.212) 69.5%,rgba(0, 0, 0, 0.138) 75.8%,rgba(0, 0, 0, 0.07) 82.9%,rgba(0, 0, 0, 0.019) 91.2%,rgba(0, 0, 0, 0) 100%)
}

Site Width and Menu Adjustments:

Another undesirable aspect of the Twenty Seventeen theme is the narrow content body width, wide menu, and overly spaced elements. Content didn’t make much use of the screen real estate, and reduced usability.

Website Width Adjustment:

The first fix is to widen the main page width, and narrow the menu. For web browsers, I decided to make the total content width 85% of the browser width. This still allowed some negative space on the sides to frame the content, and not have everything edge to edge. Within that allotted 85%, we dedicate 70% to the main page content, and 26% for the menu. This leaves an additional 4% as a buffer to separate the content from the menu bar.

Menu and Sidebar Adjustment:

With the content scaled out more space efficiently, the padding in between elements seemed too large. I scaled back the padding of the links and menu bar to match the newly spaced content.

/*********Website Width Adj*********/

@media screen and (min-width: 768px) {
  .content-area {
    max-width: 100% !important;
  }

  #main .wrap, #content .wrap, #masthead .wrap, #colophon .wrap, div.wrap, .wrap {
    max-width: 85% !important;
  }

  .post-template-default .content-area, .blog .content-area, .footer-widget-1 {
    width: 70% !important;
  }

  #secondary, .footer-widget-2 {
    width: 26% !important;
  }
}

/*********Menu/sidebar Adj**********/

#masthead .wrap {
  padding-top: 0;
  padding-bottom: 0;
}

.social-navigation {
  width: 100% !important;
  text-align: center;
}

.widget {
  padding: 10px 0 10px 0;
}

Custom Comment Style:

I wanted to separate the comments to enable legibility on both the web and mobile versions of my site. Before these improvements, all comments were the same color. In mobile, comment replies did not indent, or in any way show that it was in a reply chain. This was a big problem, and I decided to both indent, and color every other comment. This gives the reader two visual aids to distinguish these comment chains. Thankfully, WordPress gives comments a class based on the comment being even or odd. This makes applying CSS styles to alternate the color of these comments very simple.

Unfortunately, setting up the indentation for comment replies was much more laborious. I had to manually dial in comment padding based on comment depth. Somehow each depth needed different size padding to appear the same. I had to do it twice over too, in order to implement indentation for the mobile site as well.

/*************Comments**************/

.comment-list li.odd textarea {
  background: #222 !important;
}

.comment-list li.even textarea {
  background: #333 !important;
}

.new-comment {
  border: 2px solid #5af;
  border-radius: 3px;
}

#cancel-comment-reply-link {
  color: #5af !important;
}

.comment-body {
  margin: 0px 0px 20px 65px;
}

.comment.even {
  background-color: #222;
}
.comment.odd {
  background-color: #333;
}

.thread-odd textarea, .thread-odd input {
  background-color: #222 !important;
}

.comment.odd, .comment.even {
  border-radius: 3px;
  margin-top: 10px !important;
  padding: 5px 0px 0px 0px;
}

.depth-2 .comment-body {
  margin: 0px 0px 0px 51px;
}

.thread-even, .thread-odd {
  border: 1px solid #666;
}

@media screen and (min-width: 768px) {
  .comment.depth-2 {
    margin: 0 0 0 58px;
  }
  .comment.depth-3, .comment.depth-4, .comment.depth-5 {
    margin: 0 0 0 12px;
  }
}

@media screen and (min-width: 512px) and (max-width: 768px) {
  .comment.depth-2 {
    margin: 0 0 0 58px;
  }
  .comment.depth-3, .comment.depth-4, .comment.depth-5 {
    margin: 0 0 0 45px;
  }
}

@media screen and (max-width: 512px) {
  .comment.depth-2 {
    margin: 0 0 0 8px;
  }
  .comment.depth-3, .comment.depth-4, .comment.depth-5 {
    margin: 0 0 0 10px;
  }
}

Photoswipe Gallery Improvements:

For my photography, I use a plugin called Photoswipe Masonry. The plugin does not appear to be maintained all too well. It had some serious bugs, but only in chrome, and only sometimes. I decided to modify the plugin myself to fix a few things, but I still had to use custom CSS to fix a few others.

Fixing the Disappearing Buttons:

One of the main issues was that some of the buttons were not loading the button image properly. They were also invisible or moved off the screen when hovered. The first three code snippets are used to address this problem, as the plugin was not calling the image properly.

Re-enabling Social Media and Download Buttons:

I also re-enabled the social media sharing, and the download button in the plugin. After using some CSS to re-enable their styles, and re-padding some elements, they everything fit well together.

This was the most annoying fix on my site, but I loved the functionality of the plugin so much, I decided to fix it myself.

/***********Photo Gallery***********/
.pswp__button {
  background-color: rgba(0, 0, 0, 0) !important;
}

.pswp__button {
  background: url("//chasmathis.com/wp-content/plugins/photoswipe-masonry/photoswipe-dist/default-skin/default-skin.png") 0 0 no-repeat !important;
}

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
  .pswp--svg .pswp__button
    background-image: url("//chasmathis.com/wp-content/plugins/photoswipe-masonry/photoswipe-dist/default-skin/default-skin.svg");
}
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
    .pswp--svg .pswp__button {
      background-image: url("//chasmathis.com/wp-content/plugins/photoswipe-masonry/photoswipe-dist/default-skin/default-skin.svg");
    }
}

/***********Buttons Hover***********/

.pswp__button--close:hover {
  background-position: 0 -44px !important;
}

.pswp__button--share:hover {
  background-position: -44px -44px !important;
}

.pswp__button--fs:hover {
  display: none !important;
}

.pswp--supports-fs .pswp__button--fs:hover {
  display: block !important;
}

.pswp--fs .pswp__button--fs:hover {
  background-position: -44px 0 !important;
}

.pswp__button--zoom:hover {
  display: none;
  background-position: -88px 0 !important;
}

.pswp--zoom-allowed .pswp__button--zoom:hover {
  display: block !important;
}

.pswp--zoomed-in .pswp__button--zoom:hover {
  background-position: -132px 0 !important;
}

.pswp__button--arrow--left:hover {
  left: 6px !important;
  background-image: none !important;
}

.pswp__button--arrow--right:hover {
  right: 6px !important;
  background-image: none !important;
}

/*********Buttons No Hover**********/

.pswp__button--close {
  background-position: 0 -44px !important;
}

.pswp__button--share {
  background-position: -44px -44px !important;
}

.pswp__button--fs {
  display: none !important;
}

.pswp--supports-fs .pswp__button--fs {
  display: block !important;
}

.pswp--fs .pswp__button--fs {
  background-position: -44px 0 !important;
}

.pswp__button--zoom {
  display: none;
  background-position: -88px 0 !important;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block !important;
}

.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0 !important;
}

.pswp__button--arrow--left {
  background-image: none !important;
}

.pswp__button--arrow--right {
  background-image: none !important;
}

/*****Photo Gallery Share Menu******/

.pswp__share-tooltip {
  background: #222 !important;
}

a.pswp__share--facebook:before {
  border-bottom-color: #222 !important;
}

a.pswp__share--facebook:hover,  a.pswp__share--twitter:hover, a.pswp__share--pinterest:hover, a.pswp__share--download:hover {
  background: #333 !important;
}

a.pswp__share--facebook:hover:before {
  border-bottom-color: #333 !important;
}

/*********Fix Image Gallery*********/

.msnry_item a {
  border-width: 0px !important;
  margin: -7px 0px 0px 0px !important;
}

.gallery-cell {
  float: left !important;
  margin-right: 5px !important;
}

.gallery-row {
  width: 100% !important;
  float: left !important;
  
}

.wp-caption {
  margin: 0px !important;
}

Custom Gallery Links:

I decided to make a custom gallery page with links to places I’ve been. Wanting something clean looking, I decided to have text in a semi-transparent <span> element, on top of a gallery image for the links. Using Codepen, I prototyped the code, and you can play with the snippet below. Additionally, the final code that I ended up using with WordPress is below that.

See the Pen Image Gallery Links with Title Overlays and Image Rotaton by Chas Mathis (@Mathis1) on CodePen.

/********Gallery Link Page**********/

div.card-container {
  display: flex;
  display: -webkit-flex; /* Safari 8 */
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap; /* Safari 8 */
  justify-content: center;
  -webkit-justify-content: center; /* Safari 8 */
}

.card-container img {
  display: block;
}

.image {  
  position: relative;
  margin: 5px;
}

.text h3 {
  position: absolute;
  float: left;
  bottom: 10px;
  left: 8px;
  width: 225px;
  margin: 0px;
}

.text a {
  height: 0px;
}

h3 span {
  color: white; 
  font: bold 18px/26px Helvetica, Sans-Serif;
  letter-spacing: -0.8px;  
  background: rgb(0, 0, 0); /* fallback color */
  background: rgba(0, 0, 0, 0.5);
  padding: 5px;
}

h3 span.spacer {
  padding: 5px 7px;
}

@media screen and (max-width: 479px) {
  .text h3 {
    bottom: 6px;
    left: 6px;
  }
  h3 span {
    font: bold 18px/30px Helvetica, Sans-Serif;
  }
}

Code Boxes and Syntax Highlighting:

Finally, since my website will include a lot of code snippets, I installed a Syntax Highlighting plugin. Enlighter can show code syntax for most major languages. It offers inline and code block styling, and can include line numbers as needed. It can also combine raw code in tabs, as you have seen above, which is very useful to keep everything tidy.

Code Boxes:

I modified the default <code> and <pre> styles as a starting point for the Enlighter styles. Now, in case the plugin fails to load, the boxes should look very similar, but without the highlighting.

Syntax Highlighting Fix:

I also modified the syntax highlighting CSS a little bit to suit my needs better. I made all block-code text auto-scroll if the line length is too long. To counteract this when needed, I copied the style with the name “mathiswrap” to use when I want to word-wrap code. I used word-wrap and line numbers in this post because some of the lines are very long, and would look out of place if it scrolled. Most of the time, however, my code should be pretty standard length.

I removed the inline background by making it transparent and replaced it with CSS. The inline code background did not fit the text well, and I decided to color a <span> instead, as it was easier for me to modify. Finally, I added some padding for block co so that the spacing on the top and bottom looked even.

/************Code boxes*************/

pre {
  font-family: Inconsolata, Consolas, "Source Code Pro", "Courier New", Courier, monospace;
  font-size: 1em;
  line-height: 100%;
  color: #eee !important;
  background-color: #333 !important;
  padding: 9px 8px 7px 10px !important;
  #letter-spacing: 0.05em;
  word-break: normal;
  overflow: auto;
  white-space: pre;
  margin-bottom: 20px;
}

code {
  font-family: Inconsolata, Consolas, "Source Code Pro", "Courier New", Courier, monospace;
  font-size: 1em;
  line-height: 100%;
  color: #eee;
  background-color: #333;
  padding: 3px 5px 1px 5px;
  letter-spacing: 0em;
  word-break: normal;
  overflow: auto;
}

/******Syntax highlighting Fix******/

.EnlighterJS li{
  white-space: pre !important;
}

.mathiswrapEnlighterJS li{
  white-space: pre-wrap !important;
}

span.EnlighterJS{
  background: #333 !important;
  padding: 8px 3px 3px 3px !important;
}

ul.EnlighterJS li:FIRST-CHILD {
  padding-top: 8px !important;
}

Additional Resources:

Protect Your Webserver:

Once your website gains traction, you’ll wish that you focused on security before you start to have problems. There are a couple of ways I recommend to keep your server under your control. Setting up a SSL/TLS certificate is as easy as ever with Let’s Encrypt, and its free! We can even configure Apache to force HTTPS and disallow unsecured website access. This makes security a no-brainer for your site users, they don’t have to do anything extra to benefit!

Additionally, I recommend protecting your SSH login, Apache login pages, and WordPress website with fail2ban. This is another free service that will refuse connections from IP addresses who fail to login after so many attempts. This is perfect to prevent any brute force attacks that you may not even be aware of.

Q2W3 Fixed Widget:

My side menu is fixed, in such that it scrolls with the user down a page. I prefer to have this fixed menu, because you can use it at any time. Normally, a user would need to scroll all the way back to the top to interact with it. I use a plugin called Q2W3 Fixed Widget to accomplish this. You can find it in the WordPress plugins page.

Pagespeed Insights:

Google has a tool for rating how well your website adheres to standards, and how fast it loads. Pagespeed Insights will look at how well your website is organized, how fast it loads, and how well a web crawler can index it. Kinsta has a great post about how to get a perfect score. This will let your site be rated higher on search results, and give your users a better experience.

Removing Footer Text:

The “Powered by WordPress” at the bottom of every page can be annoying for some. WordPress makes it difficult to remove the footer text without editing one of the main files. This video on YouTube is a quick guide on how to remove the text, or to replace it.

Modifying .htaccess to Protect Your Site:

By default, anyone can find your images, javascript files, and other website files with trail and error. These files are not linked on your website, but can be reached by knowing where files tend to be in a WordPress directory. You can disable direct access to these files, and much more with these .htaccess tricks from WordPress Beginner.

That’s all for this post, feel free to leave any comments or questions below!