How to apply demo content on classic SharePoint sites

The demo content of our themes doesn't use any specific page layout it is built using a custom HTML structure. This structure is provided with the demo and we call it of demo content.

Set up environment

Download the demo content file

  1. Login in the BindTuning
  2. Mouse over the gravatar and select the My Downloads "
  3. Mouse hover your theme and click on View theme
  4. Under documentation, you will find the Demo content, click to download it
  5. Before uploading the demo content into your SharePoint you will need to unzip the file

Add images to the site

  1. Go to the SharePoint site where you gonna to apply the demo content
  2. On the Settings, click on Site Contents
  3. Select the Site Collection Images
  4. Upload the images available inside the images folder
  5. Copy the URL of the images to use later on the URL path

Fix the image Path

  1. Open in a text editor the demo content file which related with the selected master page DemoContentFor_YOURMASTERPAGENAME
  2. Find all the HTML elements with the img src="IMAGE_URL"
  3. Replace all the URL on src for the URL of the images saves previously

Apply Demo Content to Team Sites

Add HTML to the page

  1. Go to the page where you want to apply the demo content and click to Edit Page
  2. Click on the zone where you want to add the demo content
  3. On the Format Text tab, click on Edit Source
  4. Copy the HTML code of the zone you want to use <asp:ContentPlaceHolder id="xx" runat="server">``</asp:ContentPlaceHolder> and paste the code on the matching zone. In our case is the MainContentZone. We need to copy the content between the following tags: <asp:ContentPlaceHolder id="MainContentZone" runat="server"> </asp:ContentPlaceHolder> on the MainContentZone
  5. Click to Save
  6. Demo Content is applied with success.

Apply Demo Content to Publishing Sites

Add HTML to the page

  1. Go to the page where you want to apply the demo content and click to Edit Page
  2. Go to the ribbon and click Page
  3. Select on page layout option the page layout with THEMENAME 1 COL
  4. Click Add Web Part on the zone where you want to add the content.
  5. On the Categories list, click on Media and Content and then Script Editor
  6. Click Add and then where it says Edit Snippet
  7. Copy the HTML code of the zone you want to use <asp:ContentPlaceHolder id="xx" runat="server">``</asp:ContentPlaceHolder> and paste the code on the matching zone. In our case is the MainContentZone. We need to copy the content between the following tags: <asp:ContentPlaceHolder id="MainConatentZone" runat="server"> </asp:ContentPlaceHolder> on the MainContentZone
  8. Click Save.
  9. Demo Content is applied with success.
To check how to apply the footer section on your theme, please go to the next article.
SPFx themes: Demo content for Modern Experience is currently not available, but we will keep you updated on new releases.
Have more questions? Submit a request

Comments

Got a question?

If you can't find the answer to your question, you can contact us.
We are here and happy to help.

Powered by Zendesk