Note*
To enable users to install SPFx Modern Theming Solutions (client-side-solutions) for SharePoint in their sites, you must configure your environment to support apps.
In order to perform this step you need to be a member of the Farm Administrators group of SharePoint 2019 server.

  1. Click Start, point to Administrative Tools and click DNS to open DNS Manager.

  2. In DNS Manager, right-click Forward Lookup Zones, and then click New Zone…. to start the New Zone Wizard

  3. In the Zone Type section, make sure the default Primary zone is selected, and then click Next.

  4. In the Active Directory Zone Replication Scope, select the suitable replication method for your environment, and then click Next.

  5. For Zone Name type the name for your new app domain name (e.g. yourDomain.localApps), and then click Next.

    New Zone Wizard

  6. For Dynamic Update page, select the right type of dynamic updates for your environment, and then click Next.
  7. On the Completing the New Zone Wizard section, review the settings, and then click Finish. This will create a new forward lookup zone (e.g. yourDomain.localApps) under Forward Lookup Zones.

    A new Forward Lookup Zone

  8. In DNS Manager, under Forward Lookup Zones, right-click the new app domain name (e.g. yourDomain.localApps), and then click New Alias (CNAME).

  9. In the New Resource Record dialog box, for Alias name (uses parent domain if left blank), type *.
  10. The Fully qualified domain name (FQDN) box displays *. followed by the domain name that you created for apps .(e.g. *.yourDomain.localApps)
  11. For Fully qualified domain name (FQDN) for target host, click Browse and navigate to the Forward Lookup Zone for the domain that hosts the SharePoint Server sites. (e.g. yourDomain.com), and then navigate to the record that points to the server that hosts the SharePoint Server site.

    e.g.
    SharePoint2019 (server name)

  12. New Resource Record dialog box shows the wildcard alias for the app domain and the FQDN of the server that hosts the SharePoint sites.

    New Resource Record dialog box shows the wildcard alias for the app domain and the FQDN of the server that hosts the SharePoint sites

  13. Click OK.

  14. Verify the new domain name and alias by pinging them.
  15. At the command prompt, type ping followed by a subdomain of the domain that you created, and then press ENTER.

    e.g.
    ping Apps-123ABC.yourDomain.localApps
  16. If the ping command returns the correct IP address, then your wildcard for the domain name was configured successfully.

    Ping Apps-123ABC.yourDomain.localApps

     

Note*
In order to perform this step you need to be a member of the Farm Administrators group of SharePoint 2019 server.

  1. Select Start and open SharePoint 2019 Central Administration

    Open SharePoint 2019 Central Administraton
  2. In Central Administration, under System Settings, click Manage services in this farm.

    Click Manage services in this farm under System Settings
  3. For the Microsoft SharePoint Foundation Subscription Settings Service, click Enable Auto Provision.

    Enable Auto Provision for Microsoft SharePoint Foundation Subscription Settings Service
  4. Run the SharePoint 2019 Management Shell as Administrator (right-click on the icon).

    Run the SharePoint 2019 Management Shell as Administrator
  5. Create a Subscription Settings service application and proxy by executing following commands one at a time:

  6. $sa = New-SPSubscriptionSettingsServiceApplication -ApplicationPool 'SharePoint Web Services Default' -Name 'Subscriptions Settings Service Application' -DatabaseName 'Subscription'
    New-SPSubscriptionSettingsServiceApplicationProxy -ServiceApplication $sa

    *At the end of the two commands above, you should see the DisplayName, TypeName, and ID:

    Create a Subscription Settings service application and proxy

    To verify if the Subscription Settings service application and proxy have been created, navigate to Central Administration, click Manage service applications under Application Management, and check if two entries shown below exist.

    Verify if the Subscription Settings service application and proxy have been created

    Important Note*

    Click New, and then click App Management Service
  1. In Central Administration, under Application Management, click Manage service applications.

  2. Click New, and then click App Management Service.

  3. Specify a name for the service application in the Service Application Name box.

  4. Under Application Pool, choose SharePoint Web Services Default. Click OK.

  5.  

Note*
In order to perform this step you need to be a member of the Farm Administrators group of SharePoint 2019 server.

  1. In Central Administration, on the Apps page, in the App Management section, click Configure App URLs.

    In the App Management section, click Configure App URLs
  2. In the Configure App URLs form, specify App domain (the same you have created in step 1), and App prefix (app is recommended).

    In the Configure App URLs form, specify App domain and App prefix
  3. In the App Management section, click Manage App Catalog. If no App Catalog exists for the farm, the Web Application page opens.

  4. On the Web Application page, select the web application for which you want to create a catalog. Next select Create a new app catalog site and click OK.

  5. On the Create App Catalog page, specify title for the App Catalog site, type the description for the site, and the URL to use for the site. In the Primary Site Collection Administrator section, specify the user who will manage the catalog.

  6. Create App Catalog

  7. In the End Users section, type the names of the users or groups that you want to be able to browse the catalog. Added users or groups have read access to the App Catalog site. You can add multiple user names and security groups. Users must be added as End Users to be able to browse the App Catalog from their site collections.

  8. In the Select a quota template list box, select the quota template to use for the site. Click OK.

  9. Once the site has been created, a link to it is available on the Manage App Catalog page in Central Administration.

    A link to App Catalog
  10. Make sure that the App Catalog is shared with users or groups that you want to be able to add apps (SPFx client-side solutions) to their sites.

  11.  

To make the solutions available for installation:

  1. Navigate to your App Catalog site.

    e.g.
    https://sharepoint2019/sites/apps/

  2. On the home page of the App Catalog site, select the tile labeled Distribute apps for SharePoint.

  3. Select the tile labeled Distribute apps for SharePoint
  4. Select New and browse to the extracted YourPackage.zip > SPFx_Solutions > SP2019 > SPFx_Theming Solutions folder.

  5. Upload the MT-Modern-OnPrem-01.sppkg and MT-Modern-OnPrem-02.sppkg files, or drag them into the library one-by-one.

  6. When prompted, confirm that you trust the client-side solution MT-Modern-OnPrem-01.sppkg, and MT-Modern-OnPrem-02.sppkg by selecting Deploy for each of them separately.

  7. Confirm that you trust the client-side solution
  8. Click the Properties icon for the MT-Modern-OnPrem-01 app to open the Properties Dialog form.
  9. Open the Properties Dialog form
  10. In the Properties Dialog form enter:

  11. For Short Description enter:
    "Modern Duotones" SPFx theming solution for SharePoint modern sites.

    For Icon URL you use:
    https://sharepointpackages.com/images/images-MT_WP/app_icons/MT-App_Icon1.png

    An icon for SPFx solution
  12. For Type the description enter:
    "Modern Duotones" SPFx theming solution for SharePoint modern sites from MasterThemes Inc.

  13. For Publisher Name enter:
    MasterThemes Inc.

  14. Make sure the Enabled check box is selected so that users are able to add this app to sites.

  15. Make sure the Enabled check box is selected
  16. Click Save.

  17. Click the Properties icon for the MT-Modern-OnPrem-02 app to open the Properties Dialog form.
  18. Open the Properties Dialog form
  19. In the Properties Dialog form enter:

  20. For Short Description enter:
    "Modern Monotones" SPFx theming solution for SharePoint modern sites.

    For Icon URL you use:
    https://sharepointpackages.com/images/images-MT_WP/app_icons/MT-App_Icon2.png

    An icon for SPFx solution
  21. For Type the description enter:
    "Modern Theme" SPFx solution for top level sites from MasterThemes Inc.

  22. For Publisher Name enter:
    MasterThemes Inc.

  23. Make sure the Enabled check box is selected so that users are able to add this app to sites.

  24. Make sure the Enabled check box is selected
  25. Click Save.

To make the solutions available for installation:

  1. Navigate to your App Catalog site.

    e.g.
    https://sharepoint2019/sites/apps/

  2. On the home page of the App Catalog site, select the tile labeled Distribute apps for SharePoint.

  3. Select the tile labeled Distribute apps for SharePoint
  4. Select New and browse to the extracted YourPackage.zip > SPFx_Solutions > SP2019 > SPFx_Global Navigation folder.

  5. Upload the spfx-global-navigation.sppkg file, or drag it into the library.

  6. Click the Properties icon for the MT-Modern-OnPrem-01 app to open the Properties Dialog form.
    Open the Properties Dialog form
  7. In the Properties Dialog form enter:

  8. Scroll to the bottom of the page and make sure the Enabled check box is selected so that users are able to add this app to sites.

  9. Make sure the Enabled check box is selected

Note*
In order to perform this step you need to be a member of the Farm Administrators group of SharePoint 2019 server.

  1. Select Start and open Windows PowerShell (run as Administrator).

  2. Install PnP PowerShell by executing the following cmdlet:
  3. Install-Module -Name PnP.PowerShell
  4. Confirm that you want to install and import the NuGet provider by typing Y and pressing Enter.

  5. Confirm that you want to install the modules from 'PSGallery' by typing A and pressing Enter.

  6. On your server, create the Modules folder under C:\Modules

  7. From the SharePoint 2019 Management Shell run the following cmdlet:

  8. Save-Module -Name SharePointPnPPowerShellOnline -Path c:\Modules
  9. Next execute the following cmdlet:

  10. Import-Module c:\Modules\SharePointPnPPowerShellOnline\3.29.2101.0\SharePointPnPPowerShellOnline.psd1 -DisableNameChecking

    Note*
    Make sure that the path to the SharePointPnPPowerShellOnline.psd1 file is correct.

  11. From the extracted YourPackage.zip copy (Ctr+C) and paste to your desired location on your server (Ctrl+V) the provisioning folder (a desktop is recommended).
  12. From the SharePoint 2019 Management Shell navigate to the pasted provisioning folder and run ./deploy.ps1

  13. cd C:\Users\Administrator\Desktop\provisioning
    ./deploy.ps1
  14. When prompted, enter url of the root site on your server ( e.g. http://SharepontServer )

  15. Important Note*



  16. In the browser, navigate the root site > Global Nav List folder and select the + New button to create your global navigation menu.

    Global Navigation Menu

    *Example of the global navigation menu (click the image to see the menu in action)

    Example of the Global Navigation Menu

  17. To create the "Home Icon", for title enter Home, for order enter 1, and for parent select (None).

    Create the Home Icon
    Create the Home Icon

  18. To create a "Top Level Link", for title enter any text you need, for order enter different number than 1, for parent select (None).

    Create a Top  Level Link
    Create a Top  Level Link

  19. To create a "Second Level Link", for title enter any text you need, for order enter different number than 1, for parent select one of your top level links.

    Create a Second Level Link
    Create a Second Level Link

  20. To create a "Third Level Link", for title enter any text you need, for order enter different number than 1, for parent select one of your second level links.

    Create a Third Level Link
    Create a Third Level Link

     

Important Note*

Note*
In order to perform this step you need to be a member of the Farm Administrators group of SharePoint 2019 server.

  1. In the SharePoint 2019 Central Administration, on the Application Management page select Create site collections to create a new top level web site.

  2. Create a new app catalog site
  3. On the Create Site Collection page for Title enter:
    MasterThemes Assets

    For Description enter:
    MasterThemes Assets

    For Web Site Address leave /sites/ unchanged, and enter exactly:
    masterthemes-assets

  4. Important Note*
    The web site address of the MasterThemes Assets site collection must be http://
    [ SharePoint root site ] /sites/masterthemes-assets. If it is different, the collapsible footer and some other components provided with the package will be missing.

    Create a new app catalog site collection
  5. Open the newly created MasterThemes Assets top-level site. The Template Selection page will open.
  6. Create a new app catalog site collection
  7. On the Template Selection page, navigate to Solution Gallery

  8. Create a new app catalog site collection
  9. In the Solutions Gallery, select Upload Solution > navigate to the extracted YourPackage.zip > MasterThemes_Assets > SP_2019 folder, and upload the MasterThemes_Assets_On-PremXXXXXX.wsp file.

    Make sure the uploaded solution is activated.

    Activate the uploaded solution
  10. Navigate back to the Template Selection page for the MasterThemes Assets site by removing /_catalogs/solutions/Forms/AllItems.aspx from your browser's address bar and hitting enter.

    Location of the MasterThemes Assets site:
    https:// [ SharePoint root site ] /sites/masterthemes-assets

  11. On the Template Selection page under Custom tab, select the MasterThemes Assets template and click OK.

    Click Custom tab, and select Modern Templates
  12. Under People and Groups > Set Up groups for this Site, create a group of members (Members of this Site) who will have rights to contribute content of the collapsible footer to SharePoint sites with applied Modern Duotones SPFx theming solution. Members with these rights can also be added to the MasterThemes Assets site at a later time.

    Select No for Navigation inheritance and click Create
    Select No for Navigation inheritance and click Create
  13. From the extracted package YourPackage.zip select and copy (Ctrl +C) the "mt-on-prem" folder (the entire folder with its structure).

  14. Navigate to:
    Your SharePoint Local Disc: Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\TEMPLATE\LAYOUTS\1033\STYLES\Themable directory.

  15. Paste (Ctrl +V) the "mt-on-prem" folder into the Themable directory.
  16. Note*
    The "mt-on-prem" folder contains CSS files used by the expandable / collapsible footer, carousel display, and accordion component.

Important Note*
You will not be able to perform this step using System Administrator Account. To Add an app to your site (SPFx modern theming solution), logon as a different user than System Administrator.

  1. In your browser navigate to the site collection you want to install the SPFx Modern Theme app (SPFx client-side solution).

  2. Open the settings menu by clicking the gears icon on the top navigation bar, and then select Add an app to go to your Apps page.

  3. In the Search box, enter MT-Modern-OnPrem, and press Enter to filter your apps.

  4. Use Search to filter apps

    As a result, 2 apps should match your search: MT-Modern-OnPrem-01 (Modern Duotones), and MT-Modern-OnPrem-02 (Modern Monotones).

  5. Select ether the MT-Modern-OnPrem-01 (Modern Duotones) or MT-Modern-OnPrem-02 (Modern Monotones) to install the solution for your modern site.

  6. The SPFx solution is installed on your site
  7. To check if the solution is installed on your site, wait a while and refresh your page (F5).

Important Note*
You will not be able to perform this step using System Administrator Account. To Add an app to your site (SPFx modern theming solution), logon as a different user than System Administrator.

  1. In your browser navigate to the site collection you want to install the SPFx Modern Theme app (SPFx client-side solution).

  2. Open the settings menu by clicking the gears icon on the top navigation bar, and then select Add an app to go to your Apps page.

  3. Select ether the spfx-global-navigation-client-side-solution to add the glogal navigation to the site.

  4. The SPFx solution is installed on your site
  5. To check if the solution is installed on your site, wait a while and refresh your page (F5).

Important Note*

To apply a custom color (a single primary color) to modern site on SharePoint 2019 On-Premises:

  1. Install classic *.spcolor themes:

    1. Go to the extracted package (YourPackage.zip), expand the Color_Palettes folder, select all *.spcolor files located in that folder (Ctrl+A), and copy them to your clipboard (Ctrl+C).
    2. Open http://YourSharePointSite (your top-level site) in SharePoint Designer 2013, click All Files (left pane), and expand _catalogs/theme/15 directory (right pane).
    3. Paste the files from your clipboard into catalogs/theme/15 directory.
  2. Apply a custom color to your site:

    1. Open http://YourSharePointSite (your top-level site) in the browser.
    2. Select the gears icon form the suite bar area > select Change the look.
    3. At the bottom of the Change the look panel select Classic change the look options.
    4. Select Current thumbnail preview > expand Colors dropdown list > select one of the 14 color options couting from the top of the list > select Try it out > Yes keep it.

Copyright © 2019 - 2021 MasterThemes Inc. All rights reserved.