Minimal.master with footer

This blog post is created by a request of a commenter named Gane. He asked me how to add a footer section to the “minimal.master” master page. This master page is used for the search centers in SharePoint 2010. My previous solution for adding a footer to a master page, were based on the “v4.master” master page (solution 1, solution 2). The HTML code of the minimal master page is totally different than the HTML code from the “v4.master” master page.

In the minimal master page there isn’t a “s4-workspace” section. I used this in the “v4.master” to add my custom wrapper to it and add my footer after this section. This means that another section needs to be used for the minimal master page. There are two possibilities:

1. Create a custom wrapper section like in the “v4.master” solution that encapsulates the whole html from the page;
2. Search for an existing section that could be used. I chose for the second possibility.

The section that encapsulates everything from the page is the body and form tags. The footer needs to be added after the chosen section, so the form section needs to be used.

Before the “form” closing tag, add the following HTML code block:

1
<div class="push s4-notdlg"></div>

After the “form” closing tag, add the following HTML block:

1
<div class="footer s4-notdlg">
2
  <span>This is my minimal.master page footer.</span>
3
</div>

The CSS isn’t that different, you will need to change the wrapper class to the “form” section.

1
/* Page needs to have a 100% height. */
2
html, body {
3
  height: 100%;
4
}
5
body #aspnetForm {
6
  min-height: 100%;
7
  height: auto !important;
8
  height: 100%;
9
  /* The bottom margin is the negative value of the footer's height */
10
  margin: 0 auto -40px;
11
  overflow: visible !important;
12
}
13
.footer, .push {
14
  /* .push must be the same height as .footer */
15
  height: 40px;
16
  /* Multicolumn Layout With Sticky Footer */
17
  clear: both;
18
}
19
.footer {
20
  background: url("/_layouts/images/bgximg.png") repeat-x scroll 0 -565px #21374C;
21
  color: #fff;
22
  font-size: 150%;
23
  font-weight: bold;
24
  line-height: 40px;
25
  text-align: center;
26
}

The end result should be like this.

Show image

Show image

Here you can download my version of the “minimal.master” master page with a footer.