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.
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.
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.
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.
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.
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.
That’s it. Your’e now all set up and ready to use the new theme in your app!