Face lifting the blog – Misty Lake with adaptions

This blog used the theme Tarski from the very beginning. But I somehow felt I want to have a different design, more adaptive for mobile devices, and so I went for the hunt.

Theme-Screenshot

My requirements were not too long: I want two column layout, and decent width but not too wide. After some playing around with various themes I finally settled for Misty Lake, one of the free themes provided by wordpress.com. Setup was extremely simple, and actually everything showed up in a very decent way right from the beginning. But nothing is perfect, so I started to create a child theme for it and changed one by one some items to make it looks more like I want to.

Initial child theme setup

I create a new folder misty-lake-wpcom-child in my theme folder, and created an empty style.css only containing the minimal necessary information:

/*
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");

Uploaded the new theme and selected it in the admin interface. Not much changes, though, not very surprisingly.

Footer change

The footer showed the wordpress.org link, the name of the theme etc, all things I don’t want to see there, but have them replaced by a simple copyright statement. The was achieved by creating a new file footer.php which contains the following code:

</div><!-- #main .site-main -->
<footer id="colophon" class="site-footer" role="contentinfo">
   <div class="site-info">
      Copyright 2012-2014 Norbert Preining
   </div><!-- .site-info -->
</footer><!-- #colophon .site-footer -->
</div><!-- #page .hfeed .site -->
<?php wp_footer(); ?>
</body>
</html>

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!

5 Responses

  1. Gary Smith says:

    Thanks for the breakdown on changing this theme! I only wanted to modify the footer, which I did with one little twist, namely

    <!-- #main .site-main -->
    
     
          Copyright 2013- (name of site)
       <!-- .site-info -->
    <!-- #colophon .site-footer -->
    <!-- #page .hfeed .site -->

    I left your credits in the style.css.

    • Hi Gary,
      thanks for your comment. Yes, that is an option. In the meantime I made some more changes (undocumented), but the concept of child-theme helps a lot. The only thing I am not happy is with the header image, where I moved the text *into* the header, but when I look at it on a mobile device, it does not work out properly.

      Norbert

      PS: I have edited your comment to use pre lang=”php” instead of code, so it comes out nicely.

  2. Coco says:

    Hello,
    Thanks for you idae on the footer part, it helped me a lot. I also had the idea to add a header image like yours exept that I want to keep the oler one as well. Unfortunately your suggestion did not work, nothing changed . I added the following lines to my new style.css.

    .site-header {
    height: 202px;
    background-image: url(http://localhost/wordpress/wp-content/uploads/2015/09/header.jpg);
    }

    Any idea what might be my mistake?

    • Hi

      thanks for coming back to this old article! I don’t know anymore when I did it, but I have changed the approach so that it works more smooth: I did simply set a background image in the customizer, and set it to top and centered. That did the whole trick I wanted, and in addition played well with the mobile theme. So you might look into that, too.

  3. Stuart says:

    So what exactly separates moroccan oil in thee other products oon the market.
    Foor tnis reason, you may also avail the services of a nail
    professional to complete the service ather than attempting
    to use the process yourself att home. Whhen you give
    your very best, spemd hours on the pc and spend hectic
    days in that cawe your fatihue shows via your
    tired or droopy looking eyes.

    my webpage oris breast ceeam makassar (Stuart)

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">