Supplementary guide 4: custom re-branding changes (2.0.2) (optional)

This is a supplementary guide to main Progressive Web Apps: 2.0.2 (build10) compilation documentation and covers most common custom re-bradning changes . Please note that bellow changes will start working only after all other compilation steps from the main guide are completed.

Changes listed in this guide are:
- optional
- are not provided within SkaDate Support service.
- performed at your own risk

Guide assumes that you have already:
1. Downloaded  "Skmobileapp 2.0.2"  source code of apps from https://hello.skadate.com/index.php?rp=/download/category/42/Web-Applications-PWA-packages.html
2. Unpacked downloaded skmobileapp.zip file. /skmobileapp/ folder was created.
3. Completed basic re-branding changes

The next step is making custom changes.

Case: Sign in page background image

To replace default background image of app's sign in page:

1. Prepare custom index.jpg (357x667px) and [email protected](750x1334) images. Place your images into skmobileapp/application/src/assets/img/user/login folder. Your images must replace default images of a couple
2. Save your changes and proceed with further modifications or compile your app.

Case: changing styles in  HTML/CSS

Most of the HTML/CSS files responsible for app's layout are located in skmobileapp/application/src/pages/ folder.

Example:
To modify HTML source code of app's dashboard page:
1. Open skmobileapp/application/src/pages/dashboard/components/profile/index.html file
2. Make desired custom HTML changes. For example to set a different background color
  • open skmobileapp/application/src/pages/dashboard/components/profile/index.scss file
  • add background-color:#NNNNNN; under .sk-profile-tab > .sk-user

    PWA custom css change example1
  • save your changes and proceed with further modifications or compile your app.



Case: changing styles in variables.

Number of items in HTML source code of apps use variables instead of in-line HTML/CSS.
Note that one and the same variable can be used in more then one HTML file. Thus changing variable properties might change properies in several places in app.

Example:


To replace red color of links on app's dashboard page:

1. Open skmobileapp/application/src/theme/page-variables/dashboard/components/profile/variables.scss  file.
2. Find $sk-profile-link variable
3. Replace default color code with your custom color code.
4. Save your changes and proceed with further modifications or compile your app.
 PWA dashboard links color
 


  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

Supplementary guide 2: basic re-branding changes (2.0.2)

This is a supplementary guide to main Progressive Web Apps: 2.0.2 (build 11110) compilation...

Progressive Web Apps: 2.0.2 (build 11110) compilation & installation

This is the main guide for compiling and installing SkaDate web applications (version 2.0.2...

Supplementary guide 3: preparing application.config.json (2.0.2)

This is a supplementary guide to main Progressive Web Apps: 2.0.2 (build 11110) compilation...

Supplementary guide 1: obtaining Firebase project credentials

Firebase project credentails are used within application.config.json . After you complete all...

Supplementary guide 5: sharing access details with SkaDate team

SkaDate team needs following access details to compile and configure  web apps(PWA) for you:...