Latest CSS Templates - 2021 for Siberian Apps

We are going to launch many CSS Templates as per latest and modern app design trends of 2021.

(1) Modern Gradient / Box Shadow concept 

(2) Neumorphism concept 

(3) Glassmorphism concept

We know that almost of you or your users aren't familiar with CSS, so we will provide you CSS codes which you or your users can edit very easily.

We will try to include the whole feature / module in one template. Many modules are of multi-pages modules like My Account feature has different pages Login Page, Registration Page, Forgot Password Page etc.

We will use CSS Variables throughout the whole template. (Suppose you want to change button background color for all pages of My Account feature, then you just need to change the color code at single place only.) We will provide all the CSS Variables at the starting of the code, so that you can change the color code or customize it very easily.

We will also provide you a JSON URL for each template, so that you can directly import it to our CSS Codes Collection Module.

Pricing Model:

(1) Per Template Based

(2) One time payment, Lifetime All Templates Access Membership 

Note: Those who are interested in taking a membership, Kindly contact us at contact@webvista.co.in

Here we will cover popular layouts and below listed most useful app features / modules: 

(1) Booking

(2) Calendar

(3) Catalog

(4) Contact

(5) Classified

(6) Commerce Pro

(7) Marketplace

(8) E-menu

(9) X-Delivery

(10) Places

(11) Folder v2

(12) My Account

(13) Links

(14) Discount

(15) Loyalty Card

(16) Padlock

(17) RSS Feed

Really Responsive Comparison Table

Comparison table are used to compare items like products, services, features, pricing etc. We have made it really responsive with a tab like view so the end user can use it very easily.

This is not a module, it's a html template that can be used with Siberian Source Code Feature.

Responsive Mobile App View:






















Desktop View:



How to get IMGUR client id?

This tutorial is for Siberian CMS Editor Image Uploader Module. You will find more details here: https://extensions.siberiancms.com/downloads/image-uploader-editor/

Go to https://api.imgur.com/#registerapp






Click on "register their application". 















Fill details and click on Submit.









Now you will get Client ID. Copy-paste it in Backoffice >> Manage >> Modules >> Image Uploader

How to open Support Link in a new tab?


As you know in Siberian CMS Editor, you can display the Support Link. But it's opening in the same window, so here is the trick to make it open in a new window.

Suppose your support link is https://example.com so you have to put this link like below format in your Siberian CMS Backoffice >> Settings >> Communication >> Support Link

https://example.com"target="_blank

Now your Support Link will be opened in a new tab/window.


Web Share API for Siberian WebApp

Siberian Native Apps has Social Sharing functionality by default but it's not available for Web Apps. 

So here i am sharing a simple Web Share API example. By using this code you can able to use Share functionality in Web Apps. 

Note that this won't work in Native Android or iOS Apps. It's just for Web Apps. So if you want then you can hide this page from Native Android & iOS Apps using CSS.

This feature supports in Android Chrome Browser & iPhone Safari Browser (iOS 12.2+).

You can use below code in Source Code Module.

<button onclick="share()" target-"_system">Share this WebApp</button>
<script>
function share() {
if (navigator.share) {
navigator.share({
title: 'WebVista',
text: 'I like this, Just check it out...', // Change Share Text Here
url: 'https://webvista.co.in/siberian-pwa.html' // Change URL Here
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
} else {
alert("Web Share API is not supported in your browser.");
}
}
</script> 

Device Platform Specific CSS Class

Hello! Sometimes you want to hide features from specific device platform like browser, android or ios. This will be very useful while you will make PWA and you want to hide features like QR Code Scan, Push Notification etc from browser platform.

So here are default classes that you can use with your CSS.

For Browser: .platform-browser

For Android: .platform-android

For iOS: .platform-ios

For Overview: .platform-overview 


Example:

.platform-browser .layout.l5 li:nth-child(2) { display: none; }
.platform-android .layout.l5 li:nth-child(2) { display: block; }
.platform-ios .layout.l5 li:nth-child(2) { display: block; }





PWA Backoffice Module

Hello! I hope all of you are safe during this covid-19 pandemic. Finally pricing for our the most awaiting PWA Backoffice Module for Siberian CMS is declared today. 

Note: This module is now not available for sale. We have launched a new PWA Creator Editor Module.

Click a below link for more details regarding module & Siberian PWA.
https://webvista.co.in/siberian-pwa.html

PWA Backoffice Module (without Push Notification)

Pricing: 99 Euro for first year then 59 Euro per year


Pricing includes:

1 Year Support & Updates
1 Year PWA Generator Access

--------------------------------------------------------------------------------------------------------------------------

PWA Backoffice Module (with Push Notification Add-on)

Pricing: 199 Euro for first year then 99 Euro per year

Pricing includes:

1 Year Support & Updates
1 Year Access of PWA Generator

--------------------------------------------------------------------------------------------------------------------------

Be Safe & Stay Home (if possible)