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