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. User Avatar
    Mark
    Permalink to comment#

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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag