Guide assumes that you have already:
1. Downloaded "Skmobileapp 2.0.0" 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.
The next step is making basic re-branding changes
Logo
1. Prepare logo.png image. Recommended size for square shape logos: 210x210px. Recommended size for rectangle type of logos: 512-600px wide.This image will be displayed above sign in form on a sign in page of app.
Place your logo image into skmobileapp/application/src/assets/img folder.
2. Open skmobileapp/application/src/pages/user/login/index.html file in code editor of your choice.
Find following line within the file: <img src="./assets/img/logo.svg"alt=""class="sk-logo" />
Replace it with: <img src="./assets/img/logo.png"alt=""class="sk-logo" />
3. Open skmobileapp/application/src/theme/page-variables/login/variables.scss in code editor of your choice.
Adjust 27vw value within $sk-login-logo-width: 27vw; to set logo width.
Icons
1. Prepare pwa_icon.png image (512x512px). This icon will be used for android devices. If you would like to have a transparent icon on android devices, use icon with transparent backrgound. If you would like the icon to have a background, use icon with a background color.
Place your pwa_icon.png image into /skmobileapp/application/src/assets/img folder. Your icon must replace default heart pwa_icon.png.
2. Prepare apple-touch-icon.png (512x512px) with background color ( background color is required). This icon will be used for iOS devices.
Place your apple-touch-icon.png image into /skmobileapp/application/src/assets/img folder. Your icon must replace default heart apple-touch-icon.png.
3. Prepare pwa_splash_icon.png (512x512px). This icon will appear on a splash screen while app is loading on a white background.
Place your pwa_splash_icon.png image into /skmobileapp/application/src/assets/img folder. Your icon must replace default heart pwa_splash_icon.png.
Preloader
1. Prepare pwa_preloader.png (512x512px) image. This image will be displayed when user signs-in or deletes their profile.
Place your pwa_preloader.png into skmobileapp/application/src/assests/img folder.
2. Open skmobileapp/application/src/shared/components/page-preloader/index.html in code editor of your choice.
Find following line within the file: <img src="./assets/img/page_preloader.svg" alt="" />
Replace it with: <img src="./assets/img/page_preloader.png" alt="" />
3. Open skmobileapp/application/src/shared/components/page-preloader/index.scss in code editor of your choice.
Find following CSS within the file:
.sk-page-preloader {
position: absolute;
@include position(0, 0, 0, 0);
background-color: color($colors, light);
z-index: 1000;
@include flex(flex, column, center, center);
@include animation(sk-preloader, 1.2s, linear, infinite);
}
Add following propery into the class from above:
img {
width: 20rem;
}
End result:
.sk-page-preloader {
position: absolute;
@include position(0, 0, 0, 0);
background-color: color($colors, light);
z-index: 1000;
@include flex(flex, column, center, center);
@include animation(sk-preloader, 1.2s, linear, infinite);
img {
width: 20rem;
}
}
