This package (YourPackage.zip) comes with two page templates containing an embedded carousel slider:

  • Home - Carousel A (Home-Carousel-A.aspx) with a carousel slider embedded into the "Full-width column" section layout at the top of the page.
  • Home - Carousel B (Home-Carousel-B.aspx) with a carousel slider embedded into the "One column" section layout.

Important Note for Carousel A*


    Embedding Carousel Slider

    To embed carousel slider on your pages, you need to upload the entire folder named MT-Embed_This_Folder from the extracted YourPackage.zip file to your preferred location within your SharePoint Online Tenant.

    Embedding carousel slider
  1. Go to the extracted YourPackage.zip file and select the folder named MT-Embed_This_Folder.
  2. Upload the entire folder named MT-Embed_This_Folder to your preferred location within your SharePoint Online.
  3. In your browser, navigate to the Site Pages folder of the site where you added the Template Library in the previous step 3.
  4. Click the Home-Carousel-A.aspx page template to open it in a new tab.
  5. When the template is loaded, click Edit link on the right side of the command bar to make edits on the page.

    Click Edit link on the right side of the command bar to make edits to the page
  6. Click the Edit icon located in the upper left corner of the carousel.

    Click the Edit icon located in the to left corner of the carousel
  7. In the Website address or embed code field, update the URL to the new location of the MT-Embed_This_Folder folder:

    <iframe name="mtCarousel" width="100%" height="39%" src="https://YourSite/MT-Embed_This_Folder/Embed-This-Carousel.aspx"></iframe>
    

    Use the above code to embed the slider on the carousel at any of your Modern Sites.

    Use this code to embed the carousel on any of your Modern Sites

    If the following message appears below the Website address or embed code field, ask your admin to add your website URL to the list of websites from which the content can be displayed. For more info on this click Guidance on changing site settings.

    Embedding content from this website isn't allowed


    Modifying Carousel Content

    The carousel slider is strictly based on carousel bootstrap. It is recommended that, as a starting point you will download one of our images that we use within the carousel. It will help you get started in setting the dimensions of your images for the carousel.

    To save an image to your device:

  1. In your browser right click on any image used within the carousel, and save it to your preferred folder.
  2. Next, open the saved image in Photoshop and use it as a canvas size for your images.
  3. After your images are ready to use, upload them to your preferred location.
  4. Next, you need to modify the carousel source code:

  5. Open SharePoint Designer 2013 and navigate to the location of the uploaded MT-Embed_This_Folder folder, and open the Embed-This-Carousel.aspx file to make edits.

  6. Provide changes for each slide between sections <!-- Slide # B E G in --> and <!-- Slide # E N D -->

  • Change URL for your image in the area highlighted in     blue     below.
  • Edit caption highlighted in     red     below. For captions, keep the text no longer than it is shown in the following example (highlighted in red).
  • Change the link and button name highlighted in     green     below.
  • After your changes are complete, save the Embed-This-Carousel.aspx file.

    <!-- Slide # B E G in -->
    <div class="item">
    <div class="item">
    <img width="100%" height="100%" alt="Alternate Text" src="https://sharepointpackages.com/images/images-MT_WP/carousel/MT_Carousel_107.jpg" data-themekey="#"/></div>
    <div class="container">
    <div class="carousel-caption carousel-caption-left">
    <h1>Layouts and Web Parts</h1>
    <p class="lead">Get the predefined MT Layouts, web parts, and color palettes to quickly and effectively manage your SharePoint content.</p>
    <a class="btn" role="button" href="http://www.sharepointpackages.com/index.php?main_page=page&amp;id=52" target="_blank">Review Contents</a></div>
    </div>
    </div>
    <!-- Slide # E N D -->

This package (YourPackage.zip) comes with two page templates containing an embedded accordion:

  • Home - Carousel A (Home-Carousel-A.aspx) with a carousel slider embedded into the "Full-width column" section layout at the top of the page.
  • Home - Carousel B (Home-Carousel-B.aspx) with a carousel slider embedded into the "One column" section layout.


    Embedding Accordion

    To embed accordion on your pages, you need to upload the entire folder named MT-Embed_This_Folder from the extracted YourPackage.zip file to your preferred location within your SharePoint Online Tenant.

    Embedding accordion
  1. Go to the extracted YourPackage.zip file and select the folder named MT-Embed_This_Folder.
  2. Upload the entire folder named MT-Embed_This_Folder to your preferred location within your SharePoint Online.
  3. In your browser, navigate to the Site Pages folder of the site where you added the Template Library in the previous step 3.
  4. Click the Home-Carousel-A.aspx page template to open it in a new tab.
  5. When the template is loaded, click Edit link on the right side of the command bar to make edits on the page.

    Click Edit link on the right side of the command bar to make edits to the page
  6. Click the Edit icon located in the upper left corner of the accordion.

    Click the Edit icon located in the top left corner of the accordion
  7. In the Website address or embed code field, update the URL to the new location of the MT-Embed_This_Folder folder:

    <iframe name="mtAccordion" width="100%" height="580" src="https://YourSite/MT-Embed_This_Folder/Embed-This-Accordion.aspx"></iframe>
    

    Use the above code to embed the accordion on any of your Modern Sites.

    Use this code to embed the accordion on any of your Modern Sites

    If you wish to use the standalone web part 'title' above the accordion (see an example of the title Intranet Libraries below), you will need to reduce the spacing between the standalone title web part and the accordion by changing the iframe name from <iframe name="mtAccordion" to <iframe name="wpTitle-50px".

    To adjust spacing between the standalone title web part and embedded content you can use:

    <iframe name="wpTitle-10px" width="100%" height="580"...
    <iframe name="wpTitle-20px" width="100%" height="580"...
    <iframe name="wpTitle-30px" width="100%" height="580"...
    <iframe name="wpTitle-40px" width="100%" height="580"...
    <iframe name="wpTitle-50px" width="100%" height="580"...
    
    Adjust spacing between the standalone title web part and embedded content

    In the Home-Carousel-A.aspx page template the iframe name is set to name="wpTitle-50px"


    If the following message appears below the Website address or embed code field, ask your admin to add your website URL to the list of websites from which the content can be displayed. For more info on this click Guidance on changing site settings.

    Embedding content from this website isn't allowed


    Modifying Accordion Content

    To modify the source code of the accordion:

  1. Open SharePoint Designer 2013, navigate to the location of the uploaded MT-Embed_This_Folder, and open the Embed-This-Accordion.aspx file to make edits.

  2. Provide changes to each section between <!-- B E G in --> and <!-- E N D -->

    After your changes are complete, save the Embed-This-Accordion.aspx file.

    <!--  B E G in -->
       <div>
          Accordion Content
       </div>
    <!-- E N D --> 
    Dividers A and B
    Dividers C and D

    To embed dividers on your pages:

  1. Click Edit link on the right side of the command bar to make edits on the page.

    Click Edit link on the right side of the command bar to make edits to the page
  2. Add the Embed web part to your page.

  3. Add the Embed web part to your page
  4. In the Website address or embed code field:

  5. To embed  Divider A  enter:
    <iframe name="mtDivider-A" id="mtDivider-A" width="100%" height="13px" src="/sites/masterthemes-assets/SiteAssets/MT-Embed_This_Folder/dividers/Embed-This-Divider-A.aspx"></iframe>
    
    To embed  Divider B  enter:
    <iframe name="mtDivider-B" id="mtDivider-B" width="100%" height="13px" src="/sites/masterthemes-assets/SiteAssets/MT-Embed_This_Folder/dividers/Embed-This-Divider-B.aspx"></iframe>
    
    To embed  Divider C  enter:
    <iframe name="mtDivider-C" id="mtDivider-C" width="100%" height="25px" src="/sites/masterthemes-assets/SiteAssets/MT-Embed_This_Folder/dividers/Embed-This-Divider-C.aspx"></iframe>
    
    To embed  Divider   enter:
    <iframe name="mtDivider-D" id="mtDivider-D" width="100%" height="25px" src="/sites/masterthemes-assets/SiteAssets/MT-Embed_This_Folder/dividers/Embed-This-Divider-D.aspx"></iframe>
    

Copyright © 2019 MasterThemes Inc. All rights reserved.