Hydrogen: custom banner and hidden title

Out of date

This post is marked as "Outdated". Newer posts, snippets or tutorials may be available: you can look for them using tags, categories or typing a keyword into the search form on top of the page.

Update: this code is no longer required. If you’re using Sandvox 2.8 (with the bundled version 2.8 of Hydrogen) you can safely remove it.

Despite its simple look, Hydrogen’s layout is slightly more complex than usual: for example, sitemenu is on top and the title is contained inside a box with text aligned at its bottom. One downside in this layout is that the banner is bound to the “title” element; this means that if you hide the title, your custom banner (if you have one) will be hidden as well.

Luckily, we can solve this problem easily with just one line of code, hiding title’s content via Site Code Injection. Here’s how:

  1. Select “Site Code Injection…” from the “Edit” menu.
  2. Select the “Style Sheet” tab
  3. Paste this code:
#title h1 .in {display:none;}

Now select a different page to see the result (the change isn’t applied “live”).

From now on, your title text is hidden (delete this line if you want to see or edit it again), but your custom banner is kept visible.