Custom Footer

vividvisualsvividvisuals Registered Users Posts: 30 Big grins
edited August 13, 2020 in SmugMug Customization

Website is www.vividvisuals.asia

I'm wanting to create a custom footer to include a site map with links to important pages on my site and, ideally but less important, a section above that for "We've Worked for" along with logos of some of the brands we've serviced.

So far, all I've found to help me do this is Hikin'Mike's (always helpful!) post about pinning header & footer. Unfortunately this doesn't actually seem to do anything? When I go to the custom css bit for my theme and paste it in, nothing happens.

What I'm going for is a footer similar to this with a black background and white text:

Thanks again!

-Alex

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 13, 2020

    If all you want is a custom Footer, without pinning, then this should get you started. I would set your HTML Block's margins from the default 12px to 0.

    HTML

    <div class="brands">
    
      <ul>
        <li>Brand 1</li>
        <li>Brand 2</li>
        <li>Brand 3</li>
        <li>Brand 4</li>
      </ul>
    
    </div>
    
    <div class="custom-footer">
    
      <div class="column col1">
        <ul>
          <li><a href="">Link 1</a></li>
          <li><a href="">Link 2</a></li>
          <li><a href="">Link 3</a></li>
          <li><a href="">Link 4</a></li>
        </ul>
      </div>
    
      <div class="column col2">
        <ul>
          <li><a href="">Link 1</a></li>
          <li><a href="">Link 2</a></li>
          <li><a href="">Link 3</a></li>
          <li><a href="">Link 4</a></li>
        </ul>
      </div>
    
      <div class="column col3">
        <ul>
          <li><a href="">Link 1</a></li>
          <li><a href="">Link 2</a></li>
          <li><a href="">Link 3</a></li>
          <li><a href="">Link 4</a></li>
        </ul>
      </div>
    
      <div class="column my-social">
        <ul>
          <li>Follow Us</li>
          <li><a href="http://www.facebook.com/stephantravelphotography"><span class="sm-fonticon sm-fonticon-large sm-fonticon-FacebookSquare">Facebook</span></a></li>
          <li><a href="http://www.instagram.com/stephantravelphotography"><span class="sm-fonticon sm-fonticon-large sm-fonticon-InstagramSquare2">Instagram</span></a></li>
          <li><a href="https://www.vividvisuals.asia/#"><span class="sm-fonticon sm-fonticon-large sm-fonticon-EmailSquare">E-Mail</span></a></li>
        </ul>
      </div>
    
    </div>
    

    CSS

    .brands,
    .custom-footer {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .brands {
      padding: 10px;
      background: gray;
    }
    
      .brands li {
        display: inline;
        margin: auto 1rem;
      }
    
    .custom-footer {
      padding: 1.5rem;
      background: black;
    }
    
      .custom-footer a {color: white;}
    
    .column {
      width: 25%;
      min-width: 300px;
    }
    
      .column li {margin: 1rem auto;}
    
    .my-social span {width: 100%;}
    

    I assume you want to use logos from your brands, so I would make all logos the same height and replace the text for each logo image using the Share a Link.

  • vividvisualsvividvisuals Registered Users Posts: 30 Big grins

    Mike, you're a legend as always. This is super helpful and looks great.

    If I can be picky, just one very small thing. Is there a way to have the font from the social icons match my font elsewhere? Tried to find it in the code but not seeing it.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 13, 2020

    Not picky at all. You'll have to modify your HTML and add more CSS.

    You'll need to wrap the social text in a <p> tag, like this in your HTML:
    <p>Facebook</p>, <p>Instagram</p>, and <p>E-Mail</p>

    Add this to your CSS block section. Change the font-family and font-size to suit.

    .my-social p {
      font-family: 'Open Sans';
      display: inline;
      font-size: 12px;
    }
    
  • vividvisualsvividvisuals Registered Users Posts: 30 Big grins

    Awesome. Thanks again, Mike!

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    I noticed you didn't wrap those logos with a <li>. I would add those so you can center them when it goes to mobile. I would also add your "We've Shot" here and remove it on your other HTML Block.

    <div class="brands">
    
      <h2>We've Shot</h2>
    
      <ul>
        <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-WkMVH76/0/c1655b79/O/Untitled%20design%20%2872%29.png" width="80px"></li>
        <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-86hx5W4/0/5cc0a2df/O/6.png" width="110px"></li>
        <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-D65Qqkx/0/0abdcb20/O/11.png" width="110px"></li>
        <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-NRrtSjm/0/931a789d/O/5.png" width="110px"></li>
        <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-Fb796xM/0/0302a3eb/O/4.png" width="110px"></li>
        <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-r6HJCjf/0/056aecd4/O/Untitled%20design%20%2874%29.png" width="90px"></li>
        <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-BLrKj2Q/0/9a3ff679/O/Untitled%20design%20%2875%29.png" width="90px"></li>
        <li><img src="https://photos.smugmug.com/All-Galleries/WEB-DESIGN/n-ZwTWGH/Client-Logos/i-rg4cvbV/0/fd05ee2e/O/9.png" width="90px"></li>
      </ul>
    
    </div>
    

    Then add this to your CSS:

    .brands h2 {
      font-size: 30px;
      font-weight: 300;
      color: #fff;
      text-transform: uppercase;
      width: 100%;
      text-align: center;
    }
    
    .brands ul {text-align: center;}
    
Sign In or Register to comment.