How to Customize Header and Hyperlink

Keren Xu


We need to modify two places to change the original header and list from the xmin theme.

Here are how they look originally:

Here are my current header and list:

We need to change header_custom.html document in the layout/partial subfolder, or we could also change header.html document in the theme/layout/partial. The document in the first location will always overwrite the header.html in the theme folder.

To add ~/ prior to each menu on the menu bar, we can just add ~/ before {{.Name}} shortname object. To pull the menu bar to the left side of the page instead of letting it be in the center of the page, we put class="pull-left" after the li object.

    <ul class="menu">
      {{ range .Site.Menus.main }}
      <li class="pull-left"><a href="{{ .URL | relURL }}">~/{{ .Name }}</a></li>
      {{ end }}

Then, we need to head to css file and add a pull-left object there:

.pull-left {
  float: left;

In the css document, we can also update the color, the hover color, the background color of the title.

To update list or hyperlink object. We first should go to themes/layouts/_default/list.html object and find out which is class is corresponding to list on the homepage. It turns out to be list.

<ul class="list">
  {{ $pages := .Pages }}
  {{ if .IsHome }}{{ $pages = .Site.RegularPages }}{{ end }}
  {{ range (where $pages "Section" "!=" "") }}
    <span class="date">{{ .Date.Format "2006/01/02" }}</span>
    <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
  {{ end }}

So we can go to css and add codes like:

.list a { 
  text-decoration: none; 
.list a:visited { color: #ffa500; }  
.list a:link { color: #ff00ff; }  
.list a:hover   { color: #00ff7f; 
    background-color: #000000;
.list a:active  { color: #ffff00; }