A quick guide to using a purchased theme in your Rails app.

I spent a few hours yesterday building a new layout for a client. Just documenting this process over here incase someone needs help with this.

Step 1: Choose a theme

I highly recommend Themeforest for this. Lots of different options with detailed reviews from customers who have purchased these themes before.

Step 2: Identify the CSS + JS files

Once I have bought the theme, I look into the HTML of that page, to see what files (CSS, JS) are being used with this theme.

The header section gives me a list of all the CSS files used.
The JS files are listed at the bottom of the page.

Step 3: Create your Vendor/Assets folder

The next step is to copy all the CSS + JS files and put them in the Vendor/Assets folder of your app.

List of CSS files placed in the vendor/assets/stylesheets folder of your app
List of JS files placed in the vendor/assets/javascripts folder of your app

Step 4: Update your application files

Change your application.scss and your application.js files to include the new files that you downloaded into your Vendor/assets folder in the step above.

application.scss
application.js

Step 5: Fonts

The next step is to setup the fonts that are used in the theme correctly. Similar to how you loaded the CSS + JS files, you have to load the fonts into the public folder.

Placing all the fonts in the public/assets directory

Then you have to find the css files in your vendor/assets/stylesheets folder that references these fonts and change them accordingly. The first image shows the original settings, and the second image shows the new directory layout.

Original settings
New settings

Final Step: Copy the HTML code

The last and final step is to copy the HTML code from the theme page, and place it in the corresponding page of your Rails app.

Front page of the Rails app

That’s it. Your’e now all set up and ready to use the new theme in your app!