How to Create a Telescope Nova Custom Theme

Telescope Nova is a perfect platform to build your own social web app easily and fast. It is a full-stack JavaScript application created by Sacha Greif — the frontend is built with React.js, while the backend with the Meteor.js framework. It is also open source and free, so you can further customize it according to your needs.

Getting Started with Fullstack Web Development

.no-js #ref-block-post-27051 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/fullstack-web-development.jpg”); }

Getting Started with Fullstack Web Development

These days, modern full stack development is very popular in both small agencies and larger companies with a…Read more

In this tutorial, I’ll show you how to install the Telescope Nova app platform, and how you can create your own custom theme.

1. Install the prerequisites

Before you can install Nova, first you must install its prerequisites: Node.js, NPM, and Meteor.js. If you already did, you can skip this step.

  1. Install Node.js and NPM. If you 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 the following CLI commands:

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

After installation, you should be able to see the app running in your browser on the http://localhost:3000/ URL.

Installing Telescope Nova appInstalling Telescope Nova app

For more information about installing Telescope Nova, have a look at the GitHub instructions of the dev team.

3. Create your theme package

Now, that you have your app running, you can start customizing the default look.

First, go to your Telescope > packages folder in which you will find the my-custom-package folder. Create a copy of this folder, and rename the copy, for example to custom-theme. Now you have created your own package.

Inside your new custom-theme package, find the file called package.js, and open it in your code editor. Find the name: "my-custom-package" piece of code, and change it to match the name of your custom package. Following our previous example, it will be name: "custom-theme".

In your command line, navigate to your Telescope folder, and type the following command that will apply your new package (theme) to the app:

meteor add custom-theme

Finally, start the app with the meteor command. If you go now to the http://localhost:3000 URL, you should still see Telescope Nova, but with a slightly different design, such as some extra emojis and stars around the logo.

Making Telescope Nova custom themeMaking Telescope Nova custom theme

4. Prepare for customization

Before you are getting started with component customization, there are some important things you need to know.

You will find most of the components you want to change in the packages > nova-base-components folder.

Never edit original files! You should only change your custom files!

In the JSX file you customize, don’t forget to use the className attribute instead of regular class. (You can see an example in the next step.)

Always write the closing html tags, for example <img src="http//www.telescopeapp.org/" alt=""></img>.

5. Customize the components

Now, let’s see a simple example for component customization. Say, you want to remove the avatars on the right side. First, you need to find the class of the element with your browser dev tools (Inspect or Inspect Element context menu).

Telescope Nova - Customize ComponentsTelescope Nova - Customize Components

From the class name, you know you are looking for the PostsCommenters component. You will find the PostsCommenters component following the nova-base-components > lib > posts > PostsCommenters.jsx path. Copy its whole content.

Inside your package, create a new file called CustomPostsCommenters.jsx. The path you need to use is custom-theme > lib > components > CustomPostsCommenters.jsx. Paste the content of the PostsCommenters.jsx file 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}) => {
  return (
    <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" />
          <span className="posts-commenters-comments-count">
              {post.commentCount}</span>
          <span className="sr-only">Comments</span>
        </Link>
      </div>
    </div>
  )
}

PostsCommenters.displayName = "PostsCommenters";

module.exports = PostsCommenters;
export default PostsCommenters;

To remove the avatars, you need to delete the following lines inside your custom file called CustomPostsCommenters.jsx (not in the original):

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

To make this custom file actually override the original one, look for the part that looks like this:

const PostsCommenters = ({post}) => {
  return (
    <div className="posts-commenters">
      // more code here
    </div>
  )
}

PostsCommenters.displayName = "PostsCommenters";

module.exports = PostsCommenters;
export default PostsCommenters;

And edit it like this:

const CustomPostsCommenters = ({post}) => {
  return (
    <div className="posts-commenters">
      // more code here
    </div>
  )
}

export default CustomPostsCommenters;

You always need to name your custom files and components by using the “Custom” prefix. The rest of the file name is the same as of original file.

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

Add the following two statements to the components.js file:

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

Telescope.components.PostsCommenters = CustomPostsCommenters;

Repeat these steps for each new component you want to change. After customizing afew components, your components.js file will look something like this:

Overriding Telescope Nova componentsOverriding Telescope Nova components

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

Telescope Nova - Customized avatarsTelescope Nova - Customized avatars

6. Customize the CSS

Inside your package, follow the custom-theme > lib > stylesheets > custom.scss path. You can add your custom style rules to the custom.scss to file. If you are more comfortable with pure CSS, just make a new file, and call it for example custom.css.

Let’s see a simple change just for the sake of testing:

a {
  color: red;
}

Save it, then open your package.js file (custom-theme>lib>package.js). Inside the code, find the lines that say:

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

and add your new file to the next line.

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

Save it, wait for the app to reload, and you should now see red links.

Telescope Nova custom CSSTelescope Nova custom CSS

Final thoughts

Below you can see one of the custom Telescope Nova themes I’ve recently crafted, or you can check it out live.

Customized Telescope Nova Theme exampleCustomized Telescope Nova Theme example

For more information about how to make custom Telescope themes, take a look at these useful resources:

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

Source: Hongkiat

(1035 Posts)

Leave a Reply