Blog theme modifications

Looking for a dark theme I stumbled across the R2D2 theme by Robert Dall, which I liked quite a lot for several reasons:

  • There are not a lot of good dark themes in the official WordPress theme repos.
  • It is a child theme of Twenty Thirteen, which is one of the standard themes maintained by WordPress.org. This means that is probably gets good security updates in case something comes up, which is not what we can rely on with many themes that are just written once but often not thoroughly maintained.
  • It does not introduce a lot of fancy stuff that we don’t need but focuses on providing a simple and clean theme for those standard requirements we have.
  • And, undeniably, R2D2 is awesome!

So I quickly found a theme, without a lot of effort. Yet, it did not really fit our nerdy context out of the box. So I just played around with the theme modification, and change the following things

  • the header picture to a modification of a green tree python that I found on pexels.com, which was under a CC0 license
  • some colors and fonts with CSS code added in the theme customizer
  • and the picture of the search icon to a color-inverted one

That’s basically everything. We’ll probably be changing around things still, as this is just a first draft. So far, I’d say R2D2 is a great theme if you know how to play around with CSS. And if you are interested in the nitty-gritty details, here’s the CSS code I put in the Additional CSS section in the theme customizer:

.site-title {
     font-size: 42px;
     font-family: monospace;
 }
 .site-description {
     font-size: 1.23rem;
     font-family: monospace; 
 }
 .navbar {
     background-color: black;
     border-bottom: 1px dotted lightgray;
 }
 .nav-menu li a {
     color: green;
     font-family: monospace;
     font-weight: bold;
     font-size: 1.1rem;
 }
 .nav-menu li a:hover {
     color: lightgreen;
     background-color: #303;
 }
 .nav-menu .current_page_item > a {
     color: magenta;
 }
 .site-header .search-field,
 .menu-toggle .site-header .search-field
 {
     background-image: url(/wp-content/themes/r2d2/images/search-icon.png);
 }
 .menu-toggle,
 .menu-toggle:hover,
 .menu-toggle:focus,
 .menu-toggle:active {
   color: green;    
 }
 article.format-standard .entry-meta a {
     color: magenta;
 }
 .entry-content a {
     color: magenta; 
 }
 .entry-content a:hover {
     color: turquoise;   
 }
 .site,
 .site-footer,
 .site-footer .sidebar-container,
 .site-content .archive-header,
 nav.post-navigation,
 comments #respond
 {
     background-color: black;
     color: #fff;
 }
 .site-footer .sidebar-container {
     border-top: 1px dotted lightgray;
     border-bottom: 1px dotted lightgray;
 }
 nav.post-navigation,
 comments #respond
 {
     border-top: 1px dotted lightgray;
 }
 .entry-title a {
     color: green;
 }
 .entry-title a:hover {
     color: lightgreen;
 }
 .navigation a {
     color: green;
   font-weight: bold;    
 }

Update 2019-03-03:

as code is usually much easier to read and we’ll probably add some more code snippets from time to time, I thought I’ll try out some syntax highlighting plugins for WordPress which surely have to be out there. And yes, there are many of them, but I only tried one, which seems quite fine: Enlighter – Customizable Syntax Highlighter by Andi Dittrich, which seems well maintained, has the best reviews and a large user base. And it does all and more of what I was currently looking for.

With this plugin you can also choose among many different syntax highlighting themes, and there are also at least two dark themes, which integrate nicely here. If you want to see how the different available themes look like, check out the Enlighter Theme Demo. Although the standard theme is a light theme (not a dark theme) it still looks good and I nearly opted for that. But then again, it can be really awful to sensitive eyes when you suddenly have a huge code block emitting much more light then the rest of the page. So I chose the Atomic theme. Only the font was a little too big compared to the rest of the site, so I added the following CSS to the theme customizer:

.atomicEnlighterJS span {
    font-size: 0.8rem;
}

One thought on “Blog theme modifications

Leave a Reply