Face lifting the blog – Misty Lake with adaptions

by Norbert Preining · Published 2014/03/04 · Updated 2014/06/10

/*
Theme Name: Misty Lake Child Theme
Theme URI: not available
Version: 0.1
Author: Norbert Preining
Author URI: http://www.preining.info
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: misty-lake-wpcom-child
Template: misty-lake-wpcom
*/
@import url("../misty-lake-wpcom/style.css");

Background header image

The Misty Lake theme comes with a header image setting, but this one puts the header image below the menu and this is not what I wanted to have. My aim was to put an image behind the site’s title and description, right at the top. This can easily be done by providing an image, best in width 960px, and activate it at the end of style.css:

.site-header {
  height: 150px;
  background-image: url(/header-new.jpg);
}

That was ok, but the header text then was flush left with the image, so shift it a bit inwards, and also change the color of the description text that was not well visible:

.site-title {
  padding: 0px 0px 0px 10px;
}
.site-description {
  color: black;
  padding: 0px 0px 0px 10px;
}

Image display

I am using two different ways to include images in my posts: One is the normal WordPress Media tool, and one is provided by the PiwigoPress plugin, which allows me to pull photos from my photo site. The PiwigoPress returns images with a nice shadow-box, while the WordPress Media doesn’t do that. As I want to have it more or less uniform, I adjusted the css of the images to add the respective directoves:

img.aligncenter, img.alignleft, img.alignright, img.alignnone {
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
}

(would be nice if one could copy a certain property of css from one class to another!?)

Opacity change on hover

Misty Lake has the feature that many items of the design fade away if you are not hovering with the mouse over it. This is a nice feature I like a lot, as it helps to concentrate on the text or photos. But for my blog I wanted to disable this feature for images, as I have a lot and they are somehow important, I want them to be shown without fading. Again, this is a simple CSS rule:

.entry-content img {
   opacity: 1;
}

Open items

There are a few items I might change in future again:

• indicate post language: with the Tarski theme I indicated the current post’s language with a flag, see this and this blog entry for details. I might come back to something similar when editing the footer.php.
• opacity change of header: Currently I have changed the opacity of the header image with the GIMP to achieve a slightly ligher impression and better readability of the title/description. I might change that to the hover effect (if I manage).

I hope you like the new design, and please leave any comments and suggestions for improvement!