After the Modern Page Templates are added to your site (see Installation of Modern Page Templates on SharePoint Online), to create a New Page from the selected template:

  1. Open the Site Pages library, right-click the template you want to use > select Copy to > select Copy here from the right pane to make a copy of the file.

    Make a copy of the selected template
  2. Right-click the copied template and rename it as needed.

  3. Rename the copied template
  4. Open the New_Page.aspx by clicking it, and start providing edits.

Important Note*
In order to edit or disable the collapsible footer, you need to be a member of the MasterThemes Assets site collection created by the administrator of your O365 Tenant.


    Modifying Footer Content

    The collapsible footer consists of two files: Footer.aspx and Footer-Notification.aspx. To modify the footer content, you need to edit both files:


    Segments of Footer.aspx and Footer-Notification.aspx

    To edit the footer content using SharePoint Designer 2013:

  1. Open the MasterThemes Assets site in SharePoint Designer 2013, expand the Site Assets folder.
  2. In the Site Assets folder, navigate to MT-Footer > Footer-Edit folder.
  3. Open the Footer.aspx and Footer-Notification.aspx files to make edits.
  4. Provide changes to each section between <!-- B E G in --> and <!-- E N D -->

  5. <!--  B E G in -->
       <div>
          Footer Content
       </div>
    <!-- E N D --> 
  6. After your changes are complete, save the Footer.aspx and Footer-Notification.aspx files.


    Disabling and Enabling the Footer

    To TURN OFF the footer:

  1. Open the MasterThemes Assets site in your browser, select Site contents and go to the Site Assets library.

  2. In the Site Assets library, open the MT-Footer folder, and locate the folder named On.

  3. To turn off the footer, rename the folder On to Off.

  4. To TURN the footer back ON, rename the folder Off back to On.

In your browser, open the Template Library site created in Step 2: Create a subsite using the "Template Library" site template solution. Select Site Contents > Site Pages, and open the Web-Part-Links.aspx page to see the configuration presets for the Links web part. Follow the same pattern for your own configuration of the Links web part.

Adjust spacing between the standalone title web part and embedded content

The Standalone Title web part is created using the Links web part.

To create a new Standalone Title web part:

  1. Add the Links web part to your page and select Configure.

  2. In the upper right corner under Link data select Configure Links.

  3. Add a Links web part to your page and select Configure
  4. In the Configure your Links dialg box, enter a space for Title, enter the # symbol for URL, and select Add and save.

  5. Configure your Links dialg box
  6. In the Links web part, highlight the default web part title and change it to the new title.

  7. Configure your Links dialg box

In your browser, open the Template Library site created in Step 2: Create a subsite using the "Template Library" site template solution. Select Site Contents > Site Pages, and open the Web-Part-Tiles.aspx page to see the configuration presets for the Tiles web part. Follow the same pattern for your own configuration of the Tiles web part.

Adjust spacing between the standalone title web part and embedded content

To see how the Personal Web Parts (delivered with the SharePoint Starter Kit) are rendered by the Modern Duotones SPFx theming solution, go to your browser, open the Template Library site created in Step 2: Create a subsite using the "Template Library" site template solution, select Site Contents > Site Pages, and open the Web-Parts-Personal.aspx page.

For more information about personal web parts visit: https://github.com/SharePoint/sp-starter-kit/tree/master/documentation/components

The News web part incorporated into the Home-2.aspx (Home - Intranet B) page template is set to use the carusel layout. There are four slides enclosed in the Site Pages lIbrary of the Template LIbrary site to be displayed on the Home-2.aspx page: Slide-1.aspx, Slide-2.aspx, Slide-3.aspx and Slide-4.aspx.

Add a Links web part to your page and select Configure

To display the slides within the News web part on the Home-2.aspx page:

  1. Open the Slide-1.aspx file in your browser, and select Edit.

  2. Add a Links web part to your page and select Configure
  3. Change an image for title area and select Update news.

  4. Repeat the above steps for Slide-2.aspx, Slide-3.aspx and Slide-4.aspx files.

To provide edits to the text, all you need to do is to highlight sections of the dummy text and enter your own text within the highlighted sections. The same method applies to the modification of links in templates. Highlight the link text, enter new link text, and change the address of the hyperlink.

To change the image used in the template, in the edit mode select the image you want to change, click edit web part icon, and then select the Change Image button to select the image you want to use.

The templates contain many sections in which image groups are used as image galleries (configured as tiles or carousel displays). These image groups are pre-set for image sizes, aspect ratios, and time factors for image sliders.

To change groups of images in image galleries, do not delete the current image groups (pre-sets) used in the templates. Instead, first add your own images to the image groups (pre-sets), and then delete the images you don't want to use. This way, all settings will be preserved and applied towards the images you added.

To modify the contents of the accordion component, follow the instructions Accordion - Embedding and Modifications under Contents to Embed.

To add custom dividers to your pages, follow the instructions Dividers - Embedding under Contents to Embed.

To modify the contents of the carousel, follow the instructions Carousel - Embedding and modifications under Contents to Embed.

Except for the carousel enclosed in the Home-Carousel-A.aspx template, the slider can be embedded on any of your pages, and moved from one layout section or column to another. You can freely change the position of the carousel enclosed in the Home-Carousel-B.aspx template, since it is embedded within the "non Full-width column" section.

Important Note for Carousel A*

The color palettes (modern themes) are defined in the JSON schema, which stores color settings and related metadata for each theme. To apply a color palette to your site, click the gears icon on the top navigation bar, and then select Change the look.

Using Microsoft Theme Generator, you can adjust provided color palettes to meet your corporate needs. To add predefined color palettes to your SharePoint Online tenant, follow instructions in the Installation of Modern Color Palettes section. Search Microsoft sites for more information about SharePoint modern site theming.

For more information on Logos, follow Instructions on Logos for Modern Sites.

Copyright © 2019 MasterThemes Inc. All rights reserved.