1

I am working on a new project where I am setting up communication as hubsite and bunch of team sites. I am looking to add a blue background colored footer to the landing page of the communication site.

There is a blog post: https://dannyjessee.com/blog/index.php/2017/08/custom-modern-page-header-and-footer-using-sharepoint-framework-part-2/ using which I can add textual footer along with desired background color.

But as of my requirement, I have to add a footer like shown below. Also need to link these all logos to the respective social media account of the end client. Is this possible to do, please help if someone has done anything like this.

enter image description here Thanks in advance.

2

I have created a reusable SPFx webpart which will allow you to add configurable header and footer via Webpart UI, you can find this solution here. All you need to do.

I have tried and tested below html to footer

<div>
   <div class="ms-bgColor-themeDark ms-fontColor-white" style="height:40px;float: left;line-height:2.5;font-weight:bold;align-items: right;width: 100%;">
      <div style="float: right;padding-right: 135px;"> 
         <a href="https://twitter.com/batman" style="padding: 5px;">
         <img src="/sites/mysc/SiteAssets/twitter-16.png" alt="Smiley face"></a>
         <a href="https://facebook.com/batman" style="padding: 5px;">
         <img src="/sites/mysc/SiteAssets/facebook-3-16.png" alt="Smiley face"></a>
         <a href="https://instagram.com/batman" style="padding: 5px;">
         <img src="/sites/mysc/SiteAssets/instagram-16.png" alt="Smiley face"></a> 
      </div>
   </div>
</div>

Please note that you have to upload you icons in SiteAssets library or refer from appropriate path. Change the background color using in line style to 2nd level of div.

If you have your own SPFx extension like you tried above using blog, you have to add below code in onInit() method

public onInit(): Promise<void> {
  let bottomPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom); 
          if (bottomPlaceholder) { 
            bottomPlaceholder.domElement.innerHTML = '<div>
   <div class="ms-bgColor-themeDark ms-fontColor-white" style="height:40px;float: left;line-height:2.5;font-weight:bold;align-items: right;width: 100%;">
      <div style="float: right;padding-right: 135px;"> 
         <a href="https://twitter.com/batman" style="padding: 5px;">
         <img src="/sites/mysc/SiteAssets/twitter-16.png" alt="Smiley face"></a>
         <a href="https://facebook.com/batman" style="padding: 5px;">
         <img src="/sites/mysc/SiteAssets/facebook-3-16.png" alt="Smiley face"></a>
         <a href="https://instagram.com/batman" style="padding: 5px;">
         <img src="/sites/mysc/SiteAssets/instagram-16.png" alt="Smiley face"></a> 
      </div>
   </div>
</div>';

   return Promise.resolve();
 }

Note - change the path of images and hyperlink as per your requirement.

Screenshot on how it looks using above html

enter image description here

Icons Reference links

https://www.iconsdb.com/icons/download/white/twitter-16.png https://www.iconsdb.com/icons/download/white/facebook-3-16.png https://www.iconsdb.com/icons/download/white/instagram-16.png

If you want to use my resuable solution, below is what you can do

  • Download code
  • Modify solution to refer solution assets from cdn, azure etc(as per you requirement)
  • Package the solution
  • Upload to App catalog
  • Install app to required site collection
  • Create a modern page and add webpart
  • Add required html to footer text area
  • Click on register custom action, refresh the page and you are good to go
  • To modify html, visit page again. you can update html in text area and click update custom action. Refresh the page.

Useful links -

Basic understanding of SPFx Webpart

Deploy SPFx assets to Office 365 CDN

Hope this helps...Happy coding..!!! Please upvote and mark as answer if this helped.

  • Please mark it as answer it this worked.. – Siddharth Vaghasia Jun 4 at 9:25
  • Thanks Siddharth, I am going to try this out today, thanks for the valuable response. – mdevm Jun 4 at 13:08
  • Hi Siddharth, I attached the updated footer in the question description. Can you please advise how I can implement that as footer, I had to take off client logo, but where it says 'Client Logo', i have throw in a small image there. All links in the footer must be clickable. – mdevm Jun 5 at 19:37
  • Also, it would be very helpful if you could share steps to deploy your reusable SPFx solution that would be great as I am new to SPfx. In regards to configurable header and footer UI, is that something I can do post deployment of web part to the site? – mdevm Jun 5 at 20:08
  • @mdevm....regarding updated footer....please use html skills to create required footer..answer gives you basic understanding on how to move forward. – Siddharth Vaghasia Jun 6 at 3:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.