Adding a footer

Anvil Q&A
4

Hello @stucork, thank you for the example. I would like to add some info for the people who come here after me. From your answer, it was not clear to me what I had to do in order to actually get the footer into my project. As far as I understand it now, I had to the following changes.

  1. Add the following code into the Assets > standard_page.html:
    <div class="footer">
        <div class="footer-slot" anvil-slot="footer-slot">
            <div anvil-slot-if-empty="footer-slot" style="margin: 4px 0;"/>
            <div class="placeholder anvil-designer-only" anvil-if-slot-empty="footer-slot" anvil-drop-here>Drop a FlowPanel or Label or Link Component here</div>
        </div>
    </div>
  1. Add the following code into Assets > theme.css:
    /* Footer bar */
    .footer {
      font-size: 20px;
      font-weight: 500;
      background-color:  %color:Primary 500%;;
      color: white;
      min-height: 66px;
    /*   height: 66px; */
      text-align: center;
      padding: 0 72px 0 72px;
       z-index: 1;
      box-shadow: 0 -4px 5px 0 rgba(0, 0, 0, 0.14), 0 -1px 10px 0 rgba(0, 0, 0, 0.12), 0 -2px 4px -1px rgba(0, 0, 0, 0.2);    
    }

    .footer > .footer-slot > .placeholder { outline: 1px dotted; padding-left: 16px; padding-right: 16px; margin-top: 12px; display:none; }
    .anvil-highlight .footer > .footer-slot > .placeholder { display:block; }
      
    .content > div:first-child{
    /*  adjusted for the footer  */
      min-height: calc(100vh - 130px);
    }

    .footer a, .footer a.anvil-component {
      padding: 5px;
    /*   margin: 8px 0 0; */
      border-radius: 20px;
    }

    footer a, .footer .anvil-component {
      display: block;
      color: white;
      line-height: 30px;
      min-width: 30px;
      min-height: 30px;
      margin: 4px 0;
    }
    .footer a:hover, .footer a:active {
      color: #eee; text-decoration: none;
      background-color: %color:Primary 700%;
    }
    .footer a .link-text {
      padding: 0 4px;
    }

I have also found out there is a problem with your proposed footer styling in case you are using free version of Anvil because it does not take into an account the 50px shift caused by the Anvil banner. The footer therefore sticks out from the page even though the page is empty. It is caused by these two css rules:

body.anvil-show-banner {
     /* adds a 50px margin to fit in the banner */
    margin-top: 50px; 
}

.structure {
   /* squeezes the view by 50px */
   min-height: calc(100vh - 50px);  
}

In order to fix this, adjust the code we have just added into the theme.css like so:

.content > div:first-child{
 /*  adjusted for the footer  */
   min-height: calc(100vh - 180px);
 }

Anyways, thanks again for the example.

3 Likes