How to Create a Telescope Nova Custom Theme

Telescope Nova is a ideal height to build your possess amicable web app simply and fast. It is a full-stack JavaScript application combined by Sacha Greif — a frontend is built with React.js, while a backend with a Meteor.js framework. It is also open source and free, so we can serve customize it according to your needs.

Getting Started with Fullstack Web Development

Getting Started with Fullstack Web Development

These days, complicated full smoke-stack growth is really renouned in both tiny agencies and incomparable companies with a…Read more

In this tutorial, I’ll uncover we how to install a Telescope Nova app platform, and how we can create your possess tradition theme.

1. Install a prerequisites

Before we can implement Nova, initial we contingency implement a prerequisites: Node.js, NPM, and Meteor.js. If we already did, we can skip this step.

  1. Install Node.js and NPM. If we use Windows, and are struggling with installation, this post should be helpful.
  2. Install Meteor.js.

2. Install Telescope Nova

You can install Telescope Nova on your localhost with a following CLI commands:

git counterpart https://github.com/TelescopeJS/Telescope.git
cd Telescope
npm install
meteor

After installation, we should be means to see a app regulating in your browser on a http://localhost:3000/ URL.

Installing Telescope Nova appInstalling Telescope Nova app

For more information about installing Telescope Nova, have a demeanour during a GitHub instructions of a dev team.

3. Create your thesis package

Now, that we have your app running, we can start customizing a default look.

First, go to your Telescope packages folder in that we will find a my-custom-package folder. Create a duplicate of this folder, and rename a copy, for instance to custom-theme. Now we have created your possess package.

Inside your new custom-theme package, find a record called package.js, and open it in your formula editor. Find a name: "my-custom-package" square of code, and change it to match a name of your tradition package. Following a prior example, it will be name: "custom-theme".

In your authority line, navigate to your Telescope folder, and form a following authority that will apply your new package (theme) to a app:

meteor supplement custom-theme

Finally, start a app with a meteor command. If we go now to a http://localhost:3000 URL, we should still see Telescope Nova, though with a somewhat opposite design, such as some additional emojis and stars around a logo.

Making Telescope Nova tradition themeMaking Telescope Nova tradition theme

4. Prepare for customization

Before we are removing started with member customization, there are some critical things we need to know.

You will find most of a components we wish to change in a packages nova-base-components folder.

Never revise strange files! You should usually change your tradition files!

In a JSX file we customize, don’t forget to use a className charge instead of unchanging class. (You can see an instance in a subsequent step.)

Always write a shutting html tags, for instance img src="/" alt=""/img.

5. Customize a components

Now, let’s see a simple example for member customization. Say, we wish to mislay a avatars on a right side. First, we need to find a category of a element with your browser dev collection (Inspect or Inspect Element context menu).

Telescope Nova - Customize ComponentsTelescope Nova - Customize Components

From a category name, we know we are looking for a PostsCommenters component. You will find a PostsCommenters component following a nova-base-components lib posts PostsCommenters.jsx path. Copy a whole content.

Inside your package, create a new file called CustomPostsCommenters.jsx. The trail we need to use is custom-theme lib components CustomPostsCommenters.jsx. Paste a calm of a PostsCommenters.jsx record inside of it.

The original code looks like this:

import Telescope from 'meteor/nova:lib';
import React from 'react';
import { Link } from 'react-router';
import Posts from "meteor/nova:posts";

const PostsCommenters = ({post}) = {
  lapse (
    div className="posts-commenters"
      div className="posts-commenters-avatars"
        {_.take(post.commentersArray, 4).map(user =
        Telescope.components.UsersAvatar key={user._id}
              user={user}/)}
      /div
      div className="posts-commenters-discuss"
        Link to={Posts.getPageUrl(post)}
          Telescope.components.Icon name="comment" /
          camber className="posts-commenters-comments-count"
              {post.commentCount}/span
          camber className="sr-only"Comments/span
        /Link
      /div
    /div
  )
}

PostsCommenters.displayName = "PostsCommenters";

module.exports = PostsCommenters;
export default PostsCommenters;

To remove a avatars, we need to undo a following lines inside your tradition record called CustomPostsCommenters.jsx (not in a original):

div className="posts-commenters-avatars"
{_.take(post.commentersArray, 4).map(user =
Telescope.components.UsersAvatar key={user._id} user={user}/)}
/div

To make this tradition record indeed override a strange one, demeanour for a partial that looks like this:

const PostsCommenters = ({post}) = {
  lapse (
    div className="posts-commenters"
      // some-more formula here
    /div
  )
}

PostsCommenters.displayName = "PostsCommenters";

module.exports = PostsCommenters;
export default PostsCommenters;

And edit it like this:

const CustomPostsCommenters = ({post}) = {
  lapse (
    div className="posts-commenters"
      // some-more formula here
    /div
  )
}

export default CustomPostsCommenters;

You always need to name your tradition files and components by regulating a “Custom” prefix. The rest of a record name is a same as of strange file.

Finally, we also need to edit a components.js file that contains all of your custom components overrides. It can be found on a custom-theme lib components.js path.

Add a following dual statements to a components.js file:

import CustomPostsCommenters
    from "./components/CustomPostsCommenters.jsx";

Telescope.components.PostsCommenters = CustomPostsCommenters;

Repeat these stairs for any new component we wish to change. After customizing afew components, your components.js record will demeanour something like this:

Overriding Telescope Nova componentsOverriding Telescope Nova components

The changes should now be applied, and we shouldn’t see avatars on a right any more, like we can see on a screenshot below.

Telescope Nova - Customized avatarsTelescope Nova - Customized avatars

6. Customize a CSS

Inside your package, follow a custom-theme lib stylesheets custom.scss path. You can add your tradition character rules to a custom.scss to file. If we are some-more gentle with pristine CSS, only make a new file, and call it for instance custom.css.

Let’s see a elementary change only for a consequence of testing:

a {
  color: red;
}

Save it, afterwards open your package.js record (custom-themelibpackage.js). Inside a code, find a lines that say:

api.addFiles([
    'lib/stylesheets/custom.scss'
], ['client']);

and add your new file to a subsequent line.

api.addFiles([
    'lib/stylesheets/custom.scss',
    'lib/stylesheets/custom.css'
], ['client']);

Save it, wait for a app to reload, and we should now see red links.

Telescope Nova tradition CSSTelescope Nova tradition CSS

Final thoughts

Below we can see one of a tradition Telescope Nova themes I’ve recently crafted, or we can check it out live.

Customized Telescope Nova Theme exampleCustomized Telescope Nova Theme example

For some-more information about how to make tradition Telescope themes, take a demeanour during these useful resources:

Editor’s note: This post is created by Jelena Jovanovic for hongkiat.com. Jelena is co-founder and web developer during Vanila.io. You can follow her work on Instagram.

Add Comment