The only thing missing now from our customs Forums header is the part that actually says "Forums"!

Nick illustrated a hand holding a sign that was meant for that area. We remove the text that was there (not a huge fan of Impact) and replace it with something more hand-written which I feel like works with the site better.

Just like we added the people from the custom Gallery header via pseudo elements, we add this sign the same way. We center it with the ol' left: 50%; and margin-left half of the width trick.

We finish up by setting the background-position of the heads graphic with a negative percentage so that when the screen is resized the move the opposite direction.


  1. Stephen Emlund
    Permalink to comment#

    I noticed the forums header sign was 300 DPI. I know we should use 72 at all times, but do you know if file size is effected by a higher resolution like 300?

      Permalink to comment#

      I’m pretty sure “Save for Web and Devices” converts any image to 72 DPI.
      Since you’re explicitly asking Photoshop to make a version for the web, you’re explicitly saying it’s never going to need to be anything other than 72 DPI.

  2. yaclive
    Permalink to comment#

    I like this header design over the latest forums header.

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:

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

We have a pretty good* newsletter.