NewsApp by Osumstudio

NewsApp documentation version 1.0


  • Item Name : NewsApp by Osumstudio
  • Item Version : v 1.0
  • Author : Osumstudio

First of all, Thank you so much for purchasing this template and for being my loyal customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.


You will need the following sofwares to customize this template.

  1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
  3. FTP Tool to upload files to Server (eg: FileZilla)

Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.

Getting Started #back to top

News App is premium app template in Framework 7 for News, Magazines & Publishers with all possible screens. This will be helpful to create a native app and mobile website.

If you have a blog, and want best experience in mobile and tablet then this template is the best solution for you.

These templates are on Day/Night Color modes, so it’s easy to read for end users all the time.

Note: Buyers can request any page that they think needs to be added. We promise to add that requested pages in coming releases.


  • Framework7 v5 Based
  • 80+ Pages
  • Dark/ Light Mode
  • Premium Designs based on App Standards
  • 7 Colors Modes
  • Responsive
  • Retina Ready
  • Page transitions
  • Pull-to-refresh
  • Advertisement Spaces
  • 1000+ Framework7 Icons to use


  • For You
  • Timeline
  • Homepage
  • Loading
  • Guide
  • Select Interest
  • Walkthrough 1
  • Walkthrough 2
  • Walkthrough 3
  • Sign Up Blank
  • Sign Up Filled
  • Forgot Password
  • Log In Filled
  • Log In Blank
  • Splash Page
  • Write An Article
  • Write Comment
  • Contact Us
  • Slideshow
  • About Us page
  • Channel Page
  • Author Page
  • Search Mic
  • Profile Edit
  • Profile Page
  • Pages
  • Categories #1
  • Categories #2
  • Detail Page Video
  • Detail Page Image
  • List Page List View
  • List Page Thumb View
  • Search Result
  • Search #1
  • Search #2
  • Components
  • Top Channels List
  • Top Authors List
  • Contributors list
  • Audio Mic Search

What's Included

Once you have download the package you will see the following folder structure:

What's Included

Installation#back to top

Basic HTML and CSS knowledge is required to customize this template. You run this code uploading on a server. To install a template requires just to copy the template files on your webserver. This can be done using your hosting provider custom interface or a FTP (File Transfer Protocol) software. Our recommendation is FileZilla. A regular HTML/CSS template does NOT include a CMS (Content Management System) to edit/add content of the pages. All content is edited using a HTML editor. HTML editors can be found as free and paid editors. Some modern HTML editors have included a DESIGN view mode of the code, making it easier for templates to be edited. Regular ones will let you edit the content only from the code mode, meaning you will need to have a basic HTML coding knowledge

Simple Html Code



Some of top trending news on stories from the world news channels.

If you would like to edit the color, font, or style of any elements, you would do the following:
 .explore-root h6 {
    color: #fff;

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight. I.E.
	.explore-root .explore-root h6 {
		 color: #fff;
So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

Configuration#back to top

Define Routes

First of all, when we init the Framework7 app we should pass default routes using routes array parameter:

var app = new Framework7({
  routes: [
      name: 'about',
      path: '/about/',
      url: './pages/about.html',
      name: 'news',
      path: '/news/',
      url: './pages/news.html',
      options: {
        animate: false,
      name: 'users',
      path: '/users/',
      templateUrl: './pages/users.html',
      options: {
        context: {
          users: ['John Doe', 'Vladimir Kharlampidi', 'Timo Ernst'],
      on: {
        pageAfterIn: function test (e, page) {
          // do something after page gets into the view
        pageInit: function (e, page) {
          // do something when page initialized
    // Default route, match to all pages (e.g. 404 page)
      path: '(.*)',
      url: './pages/404.html',


Route Path

As stated above, the route's path property means the path/url that will be displayed in browser window address bar (if pushState enabled) when the following route will be loaded either by api or clicking on a link with same path.

Create a page follow steps

  • 1 Open flie name routes.js path- /newsapp/js/routes.js
  • 2 Path:- Means this route will be loaded when we click link that match to this path, or can be loaded by this path using A
  • 3 url:-Load page content via Ajax. Also supports dynamic route params from route path using {{paramName}} expression, e.g.
  • 4 name:-Route name, e.g. home

Route path matching is handled by Path To Regexp library, so everything what is supported there is supported in Framework7 as well. For example, if you want to add default route which match all paths, we can use regular expression like:

var routes = [
  // Index page
    path: '/',
    url: './index.html',
    name: 'home',
    // Index page
    path: '/explore/',
    url: './pageslayouts/explore.html',
    name: 'explore',

Customization#back to top

Page Root Classes

The custom class selector enables you to style all HTML elements with the same CSS code for that specific page or post only. Here is Example of root class "explore-root"


Color Scheme Variables

Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector. The variable name must begin with two dashes (--) and is case sensitive!.The syntax of the var() function is as follows:var(custom-name, value)

The following example first defines a global custom property named --f7-page-bg-color: then it uses the var() function to insert the value of the custom property later in the style sheet

								  Colors List
								  ==================== */
								:root {
								 --f7-page-bg-color: #XXXXXX;
								  --f7-theme-color: #XXXXXX;
								  --f7-theme-color-shade: #XXXXXX;
								  --f7-theme-color-tint: #XXXXXX;
								  --f7-theme-color-rgb: 177, 6, 6;

								.color-theme-color {
								 --f7-page-bg-color: #XXXXXX;
								  --f7-theme-color-shade: #XXXXXX;
								  --f7-theme-color-tint: #XXXXXX;
								  --f7-theme-color-rgb:  177, 6, 6;


Css Classes

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

To add content block element just add with block class:

To remove hairlines around strong block we need additional no-hairlines class

Button layout is pretty simple. Just add button class to links or submit/button inputs:


CSS Files and Structure

we are using css file default.css we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file. other css files used template: 2.framework7.bundle.min.css Sections code written as eg:

	some code

	some code
	some code

Theme Styling #back to top

How can I add theme mode switcher?


How can I adapt the template to another color?

It is easy to apply color templates. All you need is just to add color-theme-[color] class to the required parent element. It could be body, app root, view, page, navbar, toolbar, list-block, etc. For example:


To set custom color theme, you need to specify few CSS variables:

--f7-theme-color — HEX value of theme color.
--f7-theme-color-shade — 8% darken theme color.
--f7-theme-color-tint — 8% lighten theme color.
--f7-theme-color-rgb — RGB value of theme color.

								  Colors List
								  ==================== */
								:root {
								  --f7-theme-color: #XXXXXX;
								  --f7-theme-color-shade: #XXXXXX;
								  --f7-theme-color-tint: #XXXXXX;
								  --f7-theme-color-rgb: 177, 6, 6;

								.color-theme-color {
								 --f7-theme-color: #XXXXXX;
								  --f7-theme-color-shade: #XXXXXX;
								  --f7-theme-color-tint: #XXXXXX;
								  --f7-theme-color-rgb:  177, 6, 6;


Components #back to top

Cards Layout Type 1


Cards Layout Type 2


Post Listing Layout


24 Things recommended to See and Do in Budapest this Season.

Post Grid Listing Layout







Tab 1 Content
Tab 2 Content

Forms #back to top

Login Form


Registration Form

  • Full Name
  • Email
  • Password

Forgot Password Form

  • We will send you reset password instructions email.

Search Form


General FAQs #back to top

Is this template a WordPress Theme?
No. This is an HTML mobile template, but you a free to convert it into a WordPress Theme.

Do you provide support?
Yes, I am available to provide support . I will be happy to help you if you have any questions, difficulties or need help with customization. Simple contact me via my Evanto Profile.

How can I adapt the template to another color?
By adding CSS class and minor css changes, everything is explained in the documentation.

Are images included?
No, images are for purpose demo only.

Files & Sources #back to top

Included Stylesheets

These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All included JavaScript codes under /css/

  • 1. framework7.bundle.min.css - Framework 7 default stylesheet
  • 2. framework7-icons.css - Framework 7 Icons stylesheet
  • 3. app.css - Primary Color Schemes stylesheet
  • 4. default.css - Secondary Custom stylesheet
Included JavaScript

These are the various attribution inks to the Javascript files included or modified to work with in this theme. All included JavaScript codes under /js/

  • 1. framework7.bundle.min.js - Framework7 JavaScript
  • 2. routes.js - Routes defined JavaScript
  • 3. app.js - Custom JavaScript

Sources and Credits

Note: All the images are display only, not included in the main download package. All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.

Thanks for showing interest in our News App. Should you have any additional questions, doubts or need support, please contact us via our envanto profile. Also feel free to suggest new pages that You think we need to add in our next release.