Try ShortPoint nowBy default, when you embed the Sites Web Part using the SharePoint Web Part Design Element, there is a white background.
This article will demonstrate how to turn the embedded Site Web Part’s background transparent like the image below:
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must have the embedded Sites Web Part on your page. You can embed a SharePoint web part using the SharePoint Web Part Design Element. To learn how, check out How to Embed a SharePoint Web Part into ShortPoint.
Step-by-step Tutorial
Follow the steps below to learn how to turn the Site Web Part's background transparent:
Step 1: Edit the ShortPoint Web Part
Go to the SharePoint page you want to use and click Edit:
Click the ShortPoint web part:
Select the pencil icon:
Step 2: Switch to Grid Mode
NOTEMake sure you already have the embedded Site’s Web Part on your page. You can embed a SharePoint web part using the SharePoint Web Part Design Element. To learn how, check out How to Embed a SharePoint Web Part into ShortPoint.
Click the Switch to Grid Mode icon:
Step 3: Copy Code
Copy the line of code below:
[code code_html="%0A%0A%0A%0A" code_css="%0A%0A%0A%0A" code_js="var%20myInterval%20%3D%20setInterval(function%20()%20%7B%0A%20%20%20%20var%20iframeElements%20%3D%20document.querySelectorAll('iframe%5Bid%5E%3D%22sharepoint-webpart-shortpoint%22%5D')%3B%0A%20%20%20%20if%20(iframeElements.length%20%3E%200)%20%7B%0A%20%20%20%20%20%20%20%20clearInterval(myInterval)%3B%0A%20%20%20%20%20%20%20%20iframeElements.forEach((elem)%20%3D%3E%20%7B%0A%09%09%09elem.setAttribute(%22allowtransparency%22%2C%20%22true%22)%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20elem.addEventListener(%22load%22%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20iframeDoc%20%3D%20elem.contentDocument%20%7C%7C%20elem.contentWindow.document%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20iframeDoc.querySelector(%22head%22).insertAdjacentHTML(%22beforeend%22%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%60%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09%09%09%09%09%09body%2C%20.CanvasZone%20%20%7B%0A%20%20%20%20%09%09%09%09%09%09background-color%3A%20transparent%20!important%3B%0A%09%09%09%09%09%09%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%60%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%7D%2C%201000)%3B%0A%0A%0A%0A" code="%7B%22javascript%22%3A%22var%20myInterval%20%3D%20setInterval(function%20()%20%7B%5Cn%20%20%20%20var%20iframeElements%20%3D%20document.querySelectorAll('iframe%5Bid%5E%3D%5C%22sharepoint-webpart-shortpoint%5C%22%5D')%3B%5Cn%20%20%20%20if%20(iframeElements.length%20%3E%200)%20%7B%5Cn%20%20%20%20%20%20%20%20clearInterval(myInterval)%3B%5Cn%20%20%20%20%20%20%20%20iframeElements.forEach((elem)%20%3D%3E%20%7B%5Cn%5Ct%5Ct%5Ctelem.setAttribute(%5C%22allowtransparency%5C%22%2C%20%5C%22true%5C%22)%20%20%20%20%20%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%20%20%20%20%20elem.addEventListener(%5C%22load%5C%22%2C%20()%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20iframeDoc%20%3D%20elem.contentDocument%20%7C%7C%20elem.contentWindow.document%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20iframeDoc.querySelector(%5C%22head%5C%22).insertAdjacentHTML(%5C%22beforeend%5C%22%2C%20%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%60%3Cstyle%20type%3D%5C%22text%2Fcss%5C%22%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctbody%2C%20.CanvasZone%20%20%7B%5Cn%20%20%20%20%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctbackground-color%3A%20transparent%20!important%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%60%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%7D%5Cn%7D%2C%201000)%3B%5Cn%5Cn%5Cn%5Cn%22%2C%22html%22%3A%22%5Cn%5Cn%5Cn%5Cn%22%2C%22css%22%3A%22%5Cn%5Cn%5Cn%5Cn%22%2C%22showErrors%22%3Afalse%7D" padding-top="0px" padding-right="0px" padding-bottom="0px" padding-left="0px" /]Step 4: Paste Code
Paste the code you copied near the top of your page:
Step 5: Disable Sandbox Mode
After pasting the code, you will notice a new Code Design Element. You need to make sure that Sandbox Mode is disabled for the code to work properly. Click the cogwheel icon to open the Settings window of the Code Design Element:
Scroll down and disable Sandbox Mode:
NOTEThis solution only works for the Sites Web Part. If you embed other SharePoint web parts, you will need to make adjustments to CSS selectors to make the background transparent. For further assistance, you may reach out to our Support team.
Step 6: Save
Click the eye icon to see your page in real-time:
Once satisfied, click Save:
That’s it! You have successfully turned the embedded Site Web Part’s background transparent.
Related articles:
- How to Equalize the Height of the Shadow for the Tiles Title
- How to Select a Custom Link Color for the Table Design Element
- How to Customize Countdown Height and Text Position
