How can we help you today?

How to Turn the Embedded Sites Web Part's Background Transparent

By default, when you embed the Sites Web Part using the SharePoint Web Part Design Element, there is a white background. 


default Sites web part


This article will demonstrate how to turn the embedded Site Web Part’s background transparent like the image below:


transparent sites web part


TABLE OF CONTENTS



Prerequisites


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:


Edit


Click the ShortPoint web part:


ShortPoint web part


Select the pencil icon:


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.

Sites web part


Click the Switch to Grid Mode icon:


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:


paste copied code


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:


cogwheel icon


Scroll down and disable Sandbox Mode:


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:


eye icon


Once satisfied, click Save:


Save


That’s it! You have successfully turned the embedded Site Web Part’s background transparent. 


Related articles:


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 57 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more