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.

Comments

  1. User Avatar
    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?

    • User Avatar
      pat@blimpage.com
      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. User Avatar
    yaclive
    Permalink to comment#

    I like this header design over the latest forums header.

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.

Submit a Comment

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