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
- Login in the BindTuning
- Mouse over the gravatar and select the My Downloads
- Mouse hover your theme and click on View theme
- Under documentation, you will find the Demo content, click to download it
- Before uploading the demo content into your SharePoint you will need to unzip the file
Add images to the site
- Go to the SharePoint site where you gonna to apply the demo content
- On the Settings, click on Site Contents
- Select the Site Collection Images
- Upload the images available inside the images folder
- Copy the URL of the images to use later on the URL path
Fix the image Path
- Open in a text editor the demo content file which related with the selected master page DemoContentFor_YOURMASTERPAGENAME
- Find all the HTML elements with the
img src="IMAGE_URL"
- 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
- Go to the page where you want to apply the demo content and click to Edit Page
- Click on the zone where you want to add the demo content
- On the Format Text tab, click on Edit Source
- 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 - Click to Save
- Demo Content is applied with success.
Apply Demo Content to Publishing Sites
Add HTML to the page
- Go to the page where you want to apply the demo content and click to Edit Page
- Go to the ribbon and click Page
- Select on page layout option the page layout with THEMENAME 1 COL
- Click Add Web Part on the zone where you want to add the content.
- On the Categories list, click on Media and Content and then Script Editor
- Click Add and then where it says Edit Snippet
- 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 - Click Save.
- 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.
Comments