gets a facelift

For this project I updated the MtnWeekly News WordPress template. I added to the template some widget and menu locations so MtnWeekly News can easy control the layout.

The new header got 1) a widget area for ad space, 2) the site masthead, and 3) main menu location. All three can be controlled and maintained using the WP admin. I also add background texture (repeating 8-bit greyscale pattern) and use translucent color overlays (using CSS3 RGBA background-color) in each header section to add definition.

The new footer got several menu locations: A high level site menu, a product review categories menu, and a business topics menu.  Simple to control in the WP admin. Then I reused the background texture and transcendent color overlays in these sections as well.

The background texture and transcendent color overlays work like this. First I built a low-res 8-bit greyscale repeating pattern from a sample of concrete. This pattern is applied to the entire header and footer.  Then I apply translucent RGBA background-colors in each header section.  The end result is a responsive light weight (only 108KB) and varied background that I can use to cover any width and height.

repeating pattern:
8-bit GIF
50% translucent blue:
background-color: rgba(0, 108, 162, 0.5);
10% translucent dark grey:
background-color: rgba(49, 49, 49, 0.9);
20% translucent light blue-grey:
background-color: rgba(180, 203, 214, 0.8);

Published by


Kimball is a website designer and developer in Goffstown, NH.

Leave a Reply

Your email address will not be published. Required fields are marked *