Steps for the Google Login

Steps for the Google Login

To create a client ID, Please follow these steps:

  1. Go to the Google API Console
  2. From the project drop-down, select an existing project, or create a new one by selecting Create a new project.
  3. In the sidebar under "APIs & Services", select Credentials, then select the OAuth consent screen tab. - Choose an Email Address, specify a Product Name, and press Save.
  4. In the Credentials tab, select the Create credentials drop-down list, and choose OAuth client ID.
  5. Under Application type, select Web application.
  6. Press the Create button.
  7. Please share your generated client ID id with us.

Guidelines for Image Dimensions

When creating a build for an app, you will be asked to upload icon and splash screen. The following are the image dimensions and formats for the same.

  • App Icon Dimension :    1024 x 1024 pixels Format : PNG

    Every app needs a beautiful, memorable app icon that attracts people in the App Store and stands out on their Home screen. This is required for displaying the icon on your mobile phones as well as publishing the app on app store & google play store.

  • Splash Screen Dimension :  2732 x 2732 pixels Format : PNG where the logo or other important artwork is placed within the centre 1200x1200 px

    A splash screen is a graphical control element consisting of the window containing an image, a logo and the current version of the software used to capture the user's attention for a short time.As a promotion or lead-in to the site home page or to tell the user what kind of browser and other software they need to view the site.

  • Background image :    2208 x 2208 pixels Format : PNG where the logo or other important artwork is placed within the centre 1000x1000 px

    This Image is set to the login and registration page in the background. By setting this Image, App looks very impressive.

  • Feature Graphic :    1024px x 500px

    The image can be used on the home page on all versions of Google Play (Web, tablet and phone), on your product page in the Web and tablet versions, and on current and future top-level Google Play pages on phones.Creating a Featured Image that will do a great job of highlighting your app requires special design consideration, and localising your featured image for your key markets is highly recommended.

Using AC Builder

In this tutorial, you can learn how to use our AC Builder tool to make the customisations to your app. App name, icon, splash screen and colours are some of the attributes that can be customised. Requesting a build involves filling up the app details and then customising the CSS variables to specify colours of your choice. At the end of the process, you will be able to download a zip file that contains all the information about the customisation.

A video tutorial and the text instructions follow - App Details Form Below are the fields from the add details form, and what each of the field means.

App Name : This is the name of the app that your users see. The name is visible in the iTunes Store and Google Play. Before deciding on a name, we suggest that you search iTunes and Google Play to ensure a similar named app does not exist.

Site: This is the site to which your app will connect. In the demo app, users need to type in the site URL. However your customised build will have the site name embedded into the app, so that your users can directly sign in. You can add multiple sites in case you have multiple subscriptions. When requesting a build, choose a single site to create the build for. When creating the site, you will also put your Firebase Cloud Messaging (FCM) sender id here. This is required to add push notifications for your app. Learn more about FCM Configurations for Push Notifications

Bundle ID : The Bundle ID is a unique identifier to identify your app in iTunes store and Google Play. It is also used in the URLs for iTunes and Google Play. The bundle ID follows a reverse domain name format, eg: com.appcarvers.easysocial. Choose the bundle ID carefully, since once your app is live on the site it cannot be changed.

Splash Screen: This is a graphic that is shown full-screen when the app starts. Guidelines for Image Dimensions

App Icon: This is the image that shows up as the icon when an app is installed. This image is also displayed on the listing on iTunes and Google Play. Guidelines for Image Dimensions.

Customising : Customising the CSS and Language Once you save the form above, you can click the customization link next to the build to view the customization files. This page contains 3 sections on the left. The CSS, configuration and language files are different for each app. Refer the respective app customisation pages to see the possible customisation.

CSS Files Edit: The CSS files to change the colours of key elements like navbars, buttons and links. Different apps allow different elements to be customised. The CSS files have comments to help you understand what each variable will change.

JavaScript / Configuration Files : These files let you configure menus and other options in the app. The files will have comments to help you understand how each variable affects the app.

Language Files : The language files let you change text strings used in the app. We currently support only single language apps. If the language file for your language is not present, let us know via a ticket and we will create a copy of the English language file for you to start translating.


Downloading the Customization Once you have completed the app form and the customization, you can download the zip. Let us know once you completed the process so we will create a build for you

Builds for testing


EasyBlog app customisation

The Easyblog app allows the following UI elements to be customised. The UI customisation is done by editing the sass variables in the code.

UI ElementSASS variableComment
Primary button color image primary The colour for the primary buttons
Primary button color image brand-bg The colour of the text overlay. This value needs to be in RGB format.
font-Featured color image font-Featured text colour for featured blog
font-Unfeatured color image font-Unfeatured Text colour for non-featured blogs
Link color image link-colour Text colour for links
Author color image author Colour for author's name
Footer-bar-icons color image footer-bar-icons-color Colour for footer bar icon
Footer-bg color image footer-bg-color Footer background colour
Toolbar bg color image toolbar-bg-color Toolbar background colour
Toolbar color image toolbar-color Toolbar Icon Colour
Toolbar Active color image toolbar-active-color Toolbar Active Icon Colour