Quick Tip: How to Build Your Custom Theme for Telescope Nova

Telescope Nova is the perfect platform to use if you want to build your own social web app fast and easy. This is a free and open-source project created by Sacha Greif. The front-end development part of the app is built with the React library , while the back-end is taken care of by the Meteor framework. Both are written in JavaScript, one of the most popular programming languages today.

Since at work we are using Meteor.js for back-end development, it was next to impossible for us not to try to customize Telescope Nova, which is one of the most popular among Meteor apps.

In this quick tip, you will learn how to create your own custom theme for Telescope Nova. But first, a few words on how to get your development environment set up.

Installing Node.js , NPM and Meteor.js

Before you can install Nova, you need to have Node.js, NPM and Meteor.js already installed. If you haven't, proceed with the following installation steps:

1. Install Node.js and NPM . If you are using Windows and struggle with installation, How to Install Node.js and NPM on Windows by Dave McFarland should be helpful
2. Install Meteor.js.

Installing Telescope Nova

Now let’s install Nova on your localhost. On the command line, type:

[code language="bash"]
git clone http://ift.tt/1Fxijzw

cd Telescope

npm install

meteor
[/code]

Then you should be able to see the app running on http://localhost:3000/ .

For more info about installing Nova, go to their GitHub instructions.

Creating Your Theme Package

Once your app is up and running, you can start to customize its default look by following the steps outlined below:

1. Go inside your Telescope>packages folder. There you will find the folder my-custom-package
2. Copy/Paste the my-custom-package folder and rename the copy, for
   example, custom-theme. Now you have created your own package
3. Inside your custom-theme package, find the file package.js and open
   it in your editor. Replace this piece of code - name: “my-custom-package” — to match your package name. So in this case it will be name: “custom-theme”
4. In the terminal, navigate to your Telescope folder and type: meteor add custom-theme to apply your new package to the app
5. Then start the app using the command: meteor
6. Finally, go to http://localhost:3000 where you should see this new look with
   star-shaped emojis around the logo.

Customizing Components

Continue reading %Quick Tip: How to Build Your Custom Theme for Telescope Nova%

by Jelena Jovanovic via SitePoint