Simple Site: Header

The header is the most important part of a website as it is the first thing the user sees. It will be the same across the whole site, and often serve as a primary navigation for the site.

Prerequisites: The previous lab on setting up the blog project

Duration: 30 minutes

Overview

You’re going to make a header for the Moovweb WordPress site. In the course of this lab, you will learn about three major functions: inner(), insert(), and attribute().

Outline


The first thing to fix is the logo. Currently, there is a link saying “Moovweb Blog”. The logo should be here.

You’re going to use Tritium to replace that text with the Moovweb logo. If you inspect the link, you will see it’s nested in a <header> that is already present. Let’s start writing some Tritium by scoping down to that anchor.

There is a file in Moovweb projects specifically for transforming the header — it’s found in the scripts folder (where we keep all our Tritium). It’s called header.ts. It’s a file that’s imported on every page you transform.

Go into this file and delete anything that may be there. Start by using a Tritium selector to find the <header>:

$(".//header") {

}

The <a> we want is in the <strong> with the class "logo vcard". Use this to select the <strong>:

$(".//header") {
  $(".//strong[@class='logo vcard']") {

  }
}

Note the way you can nest selectors. The XPath used here is a great example of how you can select an item based on its class. You can also use CSS-style selectors, which would look something like so:

$$("header") {
  $$("strong.logo.vcard") {

  }
}

Once you have selected the <strong>, you can select the <a> inside of it. You can append this extra selector onto the previous one:

$(".//strong[@class='logo vcard']/a") # XPath
$$("strong.logo.vcard > a") # CSS

The anchor has been selected. Now you can write some Tritium to transform this aspect of the page. Firstly, remove the words “Moovweb Blog” — it’s much nicer to have a logo. Use the inner() function to set the inside of the <a> to nothing:

$$("header") {
  $$("strong.logo.vcard") {
    inner("")
  }
}

The inner() function is extremely useful for this type of transformation. It could also be used for replacing the text “Moovweb Blog” with something else.

Next, there should be an image inside this <a>. The image should be the Moovweb logo (https://s3.amazonaws.com/moovweb-apollo/logo.png). The insert() function can be used to insert any kind of element you want. It is an extremely common function in Moovweb projects:

$$("header") {
  $$("strong.logo.vcard") {
    inner("")
    insert("img", src: "https://s3.amazonaws.com/moovweb-apollo/logo.png")
  }
}

You will notice that the insert() function can take multiple arguments in the form of attributes associated with the element. In this case, the image has been given a source with a link to the Moovweb logo. Refresh and the logo is there. (It’s a little large, but that can be fixed with some CSS later.)

Logo in the header

Search Placeholder

The next thing to do is add a placeholder to the search box. A placeholder is a faded-out bit of text that is found in a search bar — it indicates to the user where they should search. You can see one in the search bar of Wikipedia, where it says “Search”.

Adding a placeholder is a simple task that is achieved by adding an extra attribute to the search input of the site.

First, select the search input. Rather than just selecting every input on the page, scope into the <form class="form-search">, which adds some more specificity to your selector.

$$("header") {
  $$("strong.logo.vcard") {
    inner("")
    insert("img", src: "https://s3.amazonaws.com/moovweb-apollo/logo.png")
  }
  $$("form.form-search") {
    $$("input") {

    }
  }
}

After that, use the attribute() function to assign the attribute of placeholder with a value of "Search here..."

$$("header") {
  $$("strong.logo.vcard") {
    inner("")
    insert("img", src: "https://s3.amazonaws.com/moovweb-apollo/logo.png")
  }
  $$("form.form-search") {
    $$("input") {
      attribute("placeholder", "Search here...")
    }
  }
}

Refresh the page, and you will see the search bar now has text in it:

Search bar with placeholder

The attribute() function is used often, e.g., to add IDs and classes to elements as necessary.

Why is the input changing size?

You may notice that the search input changes size when clicked on. This is due to some JavaScript from the original blog flowing through. To stop this, remove all JavaScript on the site.

In html.ts, under the line to remove_html_comments(), add the remove_scripts() function to remove all JavaScript from the page.

Styling

To finish the header, add some styles into the assets/stylesheets/sections/_header.scss file in your project. The styles are outlined below — it is outside the scope of this lab to cover CSS and Sass, so just copy them over.

Show me the final version of _header.scss that I’ll be using.
header {
  border-top: 2px solid $orange;
  @include box-shadow(0 2px 0px rgba(0,0,0,0.1), inset 0 0 2px white);
  border-bottom: 1px solid #ccc;
  background-color: #FeFeFe;
  .logo img {
    width: 140px;
    height: 20px;
    display: block;
    margin: 16px 0 0px 10px;
    text-indent: -900px;
  }
  .header-info {
    width: 100%;
    display: block !important;
    background-color: $blue;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-top: 10px;
    .text, a {
      display: block;
      padding: 5px;
      border-bottom: 1px solid darken($blue, 10%);
    }
    .text {
      position: relative;
      input {
        width: 100%;
        font-size: 16px;
        color: #666;
        @include box-sizing(border-box);
        @include border-radius(40px);
        border: 2px solid darken($blue, 10%);
        padding: 8px 10px 8px 30px;
      }
    }
    a {
      color: white;
      text-align: center;
      text-transform: uppercase;
      border-bottom: none;
      text-shadow: 0 1px 1px darken($blue, 25%);
    }
  }
}

Once you have added these styles, the header will look good and have the required functionality.

Styled header

The next step is to finish off the homepage!