How to Customize Header and Hyperlink

Keren Xu

2020/05/02

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.

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

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" "!=" "") }}
  <li>
    <span class="date">{{ .Date.Format "2006/01/02" }}</span>
    <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
  </li>
  {{ end }}
</ul>

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; }