1. Overview

This article describes how to apply a purchased theme in a project that consists of a Traditional Web Development.

Traditional web development in ExtJS refers to environments that do not use the build tools(Sencha CMD, Sencha NPM, etc) provided by Sencha.
 The themes provided by ext-ui.com can be themed even if you don't have these build tools.

If you use Sencha CMD or Sencha NPM, please refer to the relevant FAQs.

Applying a theme requires a few steps.

- Check The License Code
- Open The ExtJS Project
- Apply the theme file to your project
- Applying app.json
- Applying IndexHtmlPath File

0. Check The License Code

If you have purchased a theme, you should have received an email like this.
If you don't receive it, please contact us at support@ext-ui.com

In order to apply the theme, you will need the following items

- Theme Name
- License Key

This article assumes that you have purchased the theme-mercury-light (Mercury Light).

1. Open your ExtJS project

2. Apply the theme file to the project

Create a packages folder and apply the purchased theme.
(If you already have a packages folder, you can apply it with the same path).

3. Applying index.html

Open the index.html file and apply the license code as shown below.
The license code should have been automatically sent to your email when you purchased the theme.

Edit index.html

• Line 6 : The theme is already in use.
• Line 7 : The CSS of the theme you purchased.
• Line 8 - 10 : Code to apply the License Key.
• Line13 : 0. In the Check The Licence Code section, you can enter the information provided.(Theme Name ,LicenseKey)

 


.
.
.

<script type="text/javascript" src="build/ext-all.js"></script>
<!-- <link rel="stylesheet" href="build/classic/theme-neptune/resources/theme-neptune-all-debug.css"> -->
<link rel="stylesheet" href="shared/theme-mercury-light/build/resources/theme-mercury-light-all.css">
<script type="text/javascript">

    var Ext = Ext || {};
    Ext.beforeLoad = function (tags) {
        
        Ext['theme-mercury-light'] = 'Using_this_{theme-mercury-light}_license_key....';
    }
</script>
.
.
.
.