Customize the loading template
Use this guide if you want to load a custom loading template to replace the default loading bars that users will see when the WordPress + Office 365 plugin redirects them to Microsoft.
Before you start
- You must already have configured the single sign-on capability of the WordPress + Office 365 plugin.
- You must also already have configured the integration capability of the plugin.
- You are an Administrator for your WordPress website.
- You have at least the WPO365 | LOGIN+ extension installed (see https://www.wpo365.com/downloads/ for details).
Create a custom template
To create a custom template you can start with the following exemplary loading template.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .lds-grid{display:inline-block;position:relative;width:80px;height:80px}.lds-grid div{position:absolute;width:16px;height:16px;border-radius:50%;background:#000;animation:lds-grid 1.2s linear infinite}.lds-grid div:nth-child(1){top:8px;left:8px;animation-delay:0s}.lds-grid div:nth-child(2){top:8px;left:32px;animation-delay:-.4s}.lds-grid div:nth-child(3){top:8px;left:56px;animation-delay:-.8s}.lds-grid div:nth-child(4){top:32px;left:8px;animation-delay:-.4s}.lds-grid div:nth-child(5){top:32px;left:32px;animation-delay:-.8s}.lds-grid div:nth-child(6){top:32px;left:56px;animation-delay:-1.2s}.lds-grid div:nth-child(7){top:56px;left:8px;animation-delay:-.8s}.lds-grid div:nth-child(8){top:56px;left:32px;animation-delay:-1.2s}.lds-grid div:nth-child(9){top:56px;left:56px;animation-delay:-1.6s}@keyframes lds-grid{0%,100%{opacity:1}50%{opacity:.5}} | |
| .centered{height: 80px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);} | |
| </style> | |
| <div class="lds-grid centered"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> |
Alternatively you can download it directly https://gist.github.com/wpo365/fdb5c47ad439bd79d2bbdf9e2a186619).
Configure the plugin
- Save your custom loading template locally on your computer and make sure that the file ends with .html e.g. loading-template.html or else it will be rejected by the plugin.
- Upload the custom loading template to the WordPress media library.
- Note the website relative URL of the custom loading template e.g. /wp-content/uploads/2020/10/loading-template.html and make sure you add the / at the beginning.
- Go to WP Admin > WPO365 > Login / Logout and scroll to the bottom.
- Paste the website relative URL of your custom loading template.
- Logout and test e.g. by navigating to your website.