sharepoint 에 foorer 넣기

SharePoint Designer

sharepoint 에 foorer 넣기

┌( ￣∇￣)┘™ 2014. 2. 11. 20:42

728x90

[출처] http://www.eliostruyf.com/sticky-footer-solution-for-sharepoint-2013/

Adding the HMTL Footer markup to the master page

Open the master page its HTML file in your favorite text editor (in this example I will use the seattle.html file);
Do a search for the s4-workspace DIV, and add a new wrapper DIV underneath it;

<!-- =Wrapper -->
<div class="wrapper">

1 2	<!-- =Wrapper --> <div class="wrapper">

Wrapper DIV location

Go straight to the bottom of the HTML file and find the last DIV closing tag;
Replace the DIV's closing tag with the following code:

    <!-- =Push is needed for the footer to be correctly placed on the page. ms-dialogHidden used to hide it in the dialogs. -->
    <div class="push ms-dialogHidden"></div>
  </div>
  <!-- =Footer: ms-dialogHidden used to hide it in the dialogs. -->
  <div class="footer ms-dialogHidden">
    <span>This is my SharePoint 2013 Footer</span>
  </div>
</div>

</div>

<span>This is my SharePoint 2013 Footer</span>

</div>

Footer HTML location

Save the file

Styling your footer

Now that you've added your HTML markup to the master page HTML file, we only need to style the footer.

The CSS markup looks like this:

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* The bottom margin is the negative value of the footer's height */
  margin: 0 auto -30px;
  overflow: visible !important;
}
.footer, .push {
  /* .push must be the same height as .footer */
  height: 30px;
  /* Multicolumn Layout With Sticky Footer */
  clear: both;
}
.footer {
   background: #0072C6;
   color: #fff;
   line-height: 30px;
   text-align: center;
}
body #s4-workspace {
  margin-bottom: -30px;
}

.wrapper {

min-height: 100%;

height: auto !important;

height: 100%;

/* The bottom margin is the negative value of the footer's height */

margin: 0 auto -30px;

overflow: visible !important;

}

.footer, .push {

/* .push must be the same height as .footer */

height: 30px;

/* Multicolumn Layout With Sticky Footer */

clear: both;

}

.footer {

background: #0072C6;

color: #fff;

line-height: 30px;

text-align: center;

}

body #s4-workspace {

margin-bottom: -30px;

}

I paced this CSS code for testing purposes in the following location: "/_layouts/15/images/tests/footer.css

728x90