I am working on a modern team site >> and for the home page ONLY, i want to:-
- Hide the Site navigation bar, left-hand side navigation, page title and modify the float to remove the white space on the left-hand side
- Add a JavaScript to reload the page each 5 minutes.
to achieve the above I added the SharePoint modern script web part @ https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-script-editor and I added this custom CSS + custom JavaScript:-
<style>
#SuiteNavWrapper,#pageHeader, #spSiteHeader,#spLeftNav,#WebPart.PageTitle.internal.cbe7b0a9-3504-44dd-a3a3-0e5cacd07788
{
display:none;
}
div[data-automation-id="pageHeader"]
{
display:none;
}
#SuiteNavWrapper
{display:none !important ;}
.a_b_50a7110f:not(.b_b_50a7110f) {
margin: 2px 0;
}
div[data-automation-id="CanvasZone"] > div:first-child
{max-width:100% !important;}
#customchart
{
transform= "rotate(90deg)";
display="inline-block";
}
.root-95 {
height:10px;}
</style>
<script>
setInterval(function() {
window.location.reload(true);
}, 300000);
</script>
and it achieved what i am looking for.. but based on my reading that my above approach of adding modern script editor web part and inside it to add custom CSS/JavaScript is not supported.. so my question is how i can apply the above custom CSS/JavaScript in a supported way inside the home page? thanks in advance for any help.
Regards