Installation

Follow the steps below to setup your app template:

• Unzip the downloaded package and open the /iconic-news folder to find all the layout and component files. You will need to replace SRC files to your ionic project in order to use it on your app.
• Below is the folder structure and needs to be added to your app root directory:
  • src

    Includes all assets and code files, used in app

    • app

      Includes all page files, used in app

      • bookmark - Display all post saved by the user
      • category - Display all categories
      • category-post - Display all the post related to the perticular category
      • home-pages

        Includes all the home page design, used in app

        • home
        • home1
        • home2
        • home3
      • intro

        Includes intro page design or code, used in app

      • post-detail-pages

        Includes all the post detail page design, used in app

        • post-detail
        • post-detail1
        • post-detail2
        • post-detail3
        • post-detail4
      • posts - Display all post or article
      • search

        Display the Search result

      • settings

        All the settings and external linked used in this app

      • tabs

        Includes all tabs design, used in theme

    • assets

      Includes all images or strings, used in app.

      • i18n - Includes all string, used in app.
      • intro - Includes intro image, used in intro page of the app.
    • components

      Includes all the component, used in app

      • ads - Custom ads is control by this component
      • category - Include all the design of category
      • header - Include all the design of header
      • post-card - Include all the design of postcard
      • post-slider - Include all the design of slider
    • providers

      Global setting of the app

      • config

        Includes controls of the app design

    • theme

      Includes all variable used in the app

• You should upload all or specific page files as per your need.
• You're now good to go..! Start customization and generate your beautiful brand new app for your awesome users.

How to set default design or style in our app

Add default value to config.service.ts - path (NameOurApp/src/provider/config.service.ts)

/**
* Site Url
*/
public url: string = 'https://your-site-url/';

/**
* Set theme mode
* @default light
* @option string { light, dark }
*/
public themeMode: string = 'light';

/**
* Set theme color
* @default black
* @option string { black, yellow, red, pink, green, blue }
*/
public themeColor: string = 'black';

/**
* App in debugging or production
* @default true
* @option boolean { true, false }
*/
public appInProduction: boolean = false;

/**
* Set app direction
* @default ltr
* @option string { rtl, ltr }
*/
public defaultAppDirection: string = 'ltr';

/**
* Set home page
* @default 0
* @option number { 0, 1, 2, 3 }
*/
public homePage: number = 0;

/**
* Set intro page
* @default 2
* @option number { 1, 2 }
*/
public introPage: number = 2;

/**
* Set post detail page
* @default 0
* @option number { 0, 1, 2, 3, 4 }
*/
public postDetailPage: number = 0;

/**
* Set category style
* @default list
* @option string { list, thumbnailsIcon, thumbnailsImage }
*/
public categoryStyle: string = 'list';

/**
* Set tab style
* @default 1
* @option number { 1, 2, 3, 4 }
*/
public tabStyle: number = 1;

/**
* Set post card style
* @default 1
* @option number { 1, 2, 3, 4 }
*/
public postStyle: number = 1;

/**
* Set featured and related post slider style
* @default 1
* @option number { 1, 2 }
*/
public postSliderStyle: number = 1;

/**
* Set iosAdmobBannerId for ads
* @platform ios
* @value string
*/
public iosAdmobBannerId: string = 'your-ios-admob-banner-id';

/**
* Set androidAdmobBannerId for ads
* @platform android
* @value string
*/
public androidAdmobBannerId: string = 'your-android-admob-banner-id';

/**
* Set oneSignalAppId for push notification
* 
* @value string
*/
public oneSignalAppId = 'your-one-signal-app-id';

/**
* Set googleProjectId for push notification
* 
* @value string
*/
public googleProjectId = 'your-google-project-id';
 

Please watch the video: How to set default design or style in our app

How to create slider with featured post

1. Create category with name "featured"

2. Open post

3. Select category "featured"

4. Update / Publish

How to add image in post category

Source & Credits

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make iconic a really beautiful theme for our awesome users:

Support

We've tried to make this documentation as easy and understandable as possible. However, in case of any difficulties with the Iconic news template app, you can contact our technical support department with any suggestions regarding documentation and app template improvement.

• Write your question / queries / suggestion at iazad@outlook.com

Included in Support:

• Answers to questions regarding app template.
• Providing regular updates depending on your needs and feedbacks.

Not Included in Support:

• Customization of app template.
• Specific support for third party plugins integrated in app template.

Your read it entirely. Thanks!