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 1366×274 108KB | 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); |
