This package (YourPackage.zip) comes with two page templates containing an embedded carousel slider:
Important Note for Carousel A*
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.
Note:
Once the MT-Embed_This_Folder is uploaded to your preferred location, you can embed the carousel slider on any of your modern pages.
Depending on your needs, you can create multiple carousel sliders with different content and embed them on your preferred pages simply by copying the Embed-This-Carousel.aspx file, and changing the name and content of each new copy of the file.
When the template is loaded, click Edit link on the right side of the command bar to make edits on the page.
Click the Edit icon located in the upper left corner of the carousel.
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.
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.
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:
Next, you need to modify the carousel source code:
Provide changes for each slide between sections <!-- Slide # B E G in --> and <!-- Slide # E N D -->
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&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:
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.
Note:
Once the MT-Embed_This_Folder is uploaded to your preferred location, you can embed the accordion on any of your modern pages.
Depending on your needs, you can create multiple accordions with different content and embed them on your preferred pages simply by copying the Embed-This-Accordion.aspx file, and changing the name and content of each new copy of the file.
When the template is loaded, click Edit link on the right side of the command bar to make edits on the page.
Click the Edit icon located in the upper left corner of the accordion.
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.
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"...
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.
To modify the source code of the accordion:
Note*
You can use any editor to modify the accordion's source code. You can start by opening the Embed-This-Accordion.aspx file from the folder named MT-Embed_This_Folder located in the extracted YourPackage.zip file, making edits, and uploading it to the site.
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 -->
Note:
This package (YourPackage.zip) contains four custom dividers (A, B, C and D) that you can embed on your pages. Dividers A and B are displayed across the entire page width. Dividers C and D are displayed across the column width.
To embed dividers on your pages:
Click Edit link on the right side of the command bar to make edits on the page.
Add the Embed web part to your page.
In the Website address or embed code field:
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.