How to apply demo content on classic SharePoint sites

All available demo content is built using HMTL hence not needing any specific page layout in order to correctly function. 

 

Demo content is only available for Classic SharePoint sites and/or pages.

Set up the environment

Download the demo content file

  1. Login to your BindTuning account; 
  2. Navigate to your Design tab;

    design_tab.png

  3. In the My Themes section, proceed to mouse over any customized theme and, select More Details

    more_details.png

  4.  Click on Documentation

    documentation.png

  5. Select the option Demo Content.

    demo_content.png

After clicking on Demo Content, a zipped folder will be downloaded to your machine. Before uploading the demo content into your Classic SharePoint site and/or page, you will need to unzip this same folder.

Add images to the site

  1. Navigate to the SharePoint site where you wish to apply the demo content to; 
  2. On the Settings button, select Site Contents;
  3. Select your preferred Document Library and proceed to upload the images provided on the images folder; 
  4. Copy the image URL. 

Modify the image Path

Inside the .txt files, you'll find the HTML snippets that you're able to add to your Classic SharePoint sites and/or pages. Before adding those same snippets, it is important to modify the image sources (URL). To do this, we will need the URL's we've copied above. 

  1. Open the demo content file, that corresponds to the master page in use (DemoContentFor_YOURMASTERPAGENAME), in a text editor; 
  2. Find all the HTML elements with the tag img src="IMAGE_URL";
  3. Replace the src attribute with the URL of the images that you've previously copied;

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 enter Edit mode;
  2. Click on the zone where you want to add the demo content to;
  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:

    Considering we want to add the provided demo content to our MainContentZone, we will inherently need to copy the HTML structure between the corresponding tags:<asp:ContentPlaceHolder id="MainContentZone" runat="server"> </asp:ContentPlaceHolder>.

  5. After adding the corresponding structure, hit Save;

  6. Demo Content has been successfully applied.

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 enter Edit mode;
  2. Navigate to your SharePoint ribbon and select Page;
  3. On the Page Layout section, select any of the provided BindTuning page layouts; 
  4. Click Add Web Part on the zone where you wish to add the demo content in;
  5. On the Categories list, click on Media and Content, followed by Script Editor;
  6. Click Add;
  7. Proceed to select the option Edit Snippet;

  8. 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:

    Considering we want to add the provided demo content to our MainContentZone, we will inherently need to copy the HTML structure between the corresponding tags:<asp:ContentPlaceHolder id="MainContentZone" runat="server"> </asp:ContentPlaceHolder>.

  9. Click Save;
  10. Demo Content has been successfully applied.
To modify your theme's footer, follow the next article.
Note: Demo content for Modern SharePoint sites is currently not available.
Have more questions? Submit a request

Comments

Powered by Zendesk