The last remaining headers have come in! We can now finish those up and have all our custom headers done. In this screencast we'll work on the custom headers for the Demo section done by John Neiner.

Interestingly, John was the only illustrator who provided the artwork in Illustrator. That's nice for us in this case because we can scale it up to whatever size we need at full quality. In retrospect, we probably should have left it vector (as SVG) and perhaps used a raster fallback. But in this screencast we explore the different raster saving options and end up going with JPG.

There was some saving confusion where I couldn't find the saved file because I was looking for the wrong name. Real world DUH situation.

We then jump into WordPress and repeat our process for getting templates ready to style. We make sure that the demos pages load a special CSS file just to them. That means adding logic to our header.php file (is_page_template()). We find the correct template for the demos area (using a classic test where we make an obvious change to the template and see it reflected on the real site.

We strip out all the old garbage from that template and bring it up to our new style. We write a bit of markup needed to have the page be in a grid and have a header area just for this new custom header and all that.

We ultimately apply our custom header graphic as a background-image to a wrapper element with enough padding on the top (percentage based) to fit the graphic up top (sized to fit). We even put a gradient behind the image that fades from the deep green to black, so it kinda looks like your getting deeper in the ocean as you scroll down.

More work to do on this page, but we got the header done and the template in good shape!

Comments

  1. Mark
    Permalink to comment#

    Hey Chris, the red line is is bleed and the black line is the actual document size.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.