Skip to main content

Using Purchased Themes with Rails | GoRails - GoRails

General • Asked by Chris Oliver

2 Pro episodes in a row? :(

I was out for a week on vacation so catching up on Pro episodes for the subscribers first before putting out another free episode.

What free episodes do you want to see?

Definitely understandable! I hope you took some time to relax on your vacation.

There are a couple of things that I've struggled with recently, which don't have very many (if any) up-to-date resources available:

- Cleanly adding multiple join table entries through one nested form, as per my question on StackOverflow here: http://stackoverflow.com/qu...

- OAuth2 and Rails-API. There really aren't any recent tutorials on how to set up Rails as a backend API with a devise-like user model or OAuth2. I've recently been looking into Doorkeeper, but got a bit lost.

I second to this. My work currently have rails api and ember app, and would like to have a start from scratch setup on rails part


Chris Love it I need it this a year ago but love to learn your approach on this


Great video, thanks. Lots of quirks to consider when doing this!

It's definitely dependent on the frontend developer and you've either got an easy or tough job cut out for you once you download the code. :)


Thank you so much for this episode Chris! It's very helpful. Out of curiosity, how would you have handled the case where a login page's CSS did conflict with the rest of the theme's CSS?

Great question. In that case, I would probably try to rewrite that CSS so that it didn't conflict. Usually it's not super hard to do that (like renaming a higher level css scope or something). The worst case scenario is that you can't do that or it's too much work and you need to setup Rails to compile separate CSS files for those pages. In that case, you can follow something like this to compile various ones and save the trouble of rewriting chunks of the theme. http://stackoverflow.com/qu...


This is really great Chris. It would be really great if you added a section (Maybe just text) to describe doing this same process with a LESS or SASS theme. There aren't any themes just are just plain old CSS on Themeforest, I am beginning to discover.


Another way to get purchased theme working in minutes is to create subdomain specifically for serving assets, e.g. assets.domain.com. Then configure your server (Nginx, Apache) and add new server block, pointing to your local directory with theme files. I use this approach for sites, where I have mostly static content (e.g. one-pagers), with couple of dynamic features: contact us form and news section.


Hi Chris, I'm trying to figure out how to get this line of a template working in rails. I've tried using the asset-url helper and I've also tried the image tag but I can't find a way to get this line working so that I can replace the data-background class with the image reference that I have in my assets images file. Can you see how to do it? this line is in the show page

<div class="hero-section parallax-bg dark-layer" data-background="images/background2.jpg">

You should be able to say this in your HTML to add the url there.
https://gist.github.com/exc...

Thanks - I never know where to put things inside "". I'm getting lots of errors that say Failed to load resource: the server responded with a status of 404 (Not Found). I have moved all the js files into my vendor js folder. I have also added them as required in my application js file. I have link to the js application folder in my layout and also list each js vendor file in the bottom of the layout. I get an error in the console display that says 404. I can't figure out where I'm going wrong.

The JS console will show you the line of code that was the error in Chrome. That's often the best way of tracking down those little things you need to change.

You might need to modify the CSS to point to the asset-url version of the images since that's a common thing that you'll have to do. 404's won't happen with JS generally because you've got to precompile the files ahead of time, so traditionally this will come from CSS referencing images that are in different locations because of Rails.


Hi Chris, I'm afraid none of the js that works in the local development environment works when I try it in production. I'm stuck. All the heroku documents suggest that the rails 12 factor gem should be enough to integrate the js/images. Even images in my app/assets/images file that I put there myself aren't rendering (where I try to use them inside the theme css). Can you go further into how to make things rails compatible. None of my code is working. Thanks

You'll have to make sure to modify your theme to use the image_tag or asset_url helpers in the views to point to the correct version of the image when it's compiled for production. There's also an asset-url helper for CSS that you'll want to use for any images referenced in the CSS.

Rails compiles these assets and the urls for them can change in production so you must use these helpers when you reference assets. That's the main modification needed to most themes.


Hi Chris, I'm really struggling with this. I've been trying for weeks to plugin a theme. I now have the following process (but still not succeeding). 1. copy files to vendor/assets/css/ or /javacscripts folder. In my app/assets/stylesheets/application.css.scss file, I then have @import "[relevant vendor filename].css". In my layout head section, I have <%= stylesheet_link_tag "[relevant vendor filename].css" %>. When I then save all this and try, I get an error asking me to include: Rails.application.config.assets.precompile += %w( [relevant vendor filename].css ) in my config/initializer/assets.rb file. When I do that and try again, I can see in my console (of my code inspector) a 404 error showing the file is not found. I can't figure out if I'm supposed to insert some "../../" to make a path that goes between asset/application.css.scss where the import is back to the vendor/asset/css file or if maybe something is wrong with the form of expression of the stylesheet tag in the layout file. I'm getting the same 404 errors with my js assets as well (I know you said that shouldn't happen with js files -but it is). I have done rake assets precompile several times now. I have tried installing compass-rails to try and make this work but that isn't solving the problem either. Do you know of any other resources to use in getting help with this problem? My current issues are outlined on Stack Overflow at this post - although I've not been able to find help there either.http://stackoverflow.com/questions..., Thanks very much, Mel


Hi Chris, please can you extend this to show how to get vendor javascripts and fonts working with bootstrap. I think some of my javascript 404 errors might be something to do with conflicting jQuery and javascript formats. Some of the error messages start with: TypeError: undefined is not an object (evaluating '$') (anonymous function)circle-progress.self. I have been trying for weeks to figure out how to do this - i'd love if you could extend this tutorial to show how to use js files in a rails/bootstrap app.


I bought "The Project" template and was having trouble using it for Rails. I have a couple of questions:
(1) The CSS files go inside vendor because like you said "we don't want to touch them" but what happens if I need to modify some of the styling? Would you go back to modify the files in vendor or create one in assets that overrides that file?
(2) The links that are at the top of the page of the html template, you then basically moved them to application.html.erb and you used <% yield %> , is that because you want the header to appear in every page?
(3) What happens if the files I received from the template are CSS and not SCSS? Should I just change the file name and then still incorporate it within vendor?

Thanks for the awesome video!!!

1. Usually I would say never to modify those and instead override them with your own styles that are included afterwards. It's a bit more work to do the overrides, but if/when they release a new version of the theme, you can replace the vendor files and all your overrides will still exist. It's really, really hard to keep track of what you changed if you modify the original theme. Of course, things like image links in the CSS probably need to be changed regardless, so you may have to make some modifications to the original theme no matter what. The fewer changes you can make, the better.

2. The <%= yield %> is there so that the layout knows where the main page content from the views should get inserted. You can also use it for some other things, but yield without any parameters tells your template where you want the main page content to be.

3. If they're CSS files you can do the same thing as I did, except you can't use variables. Both LESS and SCSS compile down to regular CSS so you can use them together, just in separate files. I believe you can also change the theme's filenames to .scss if you wanted because CSS is all valid inside SCSS. Kinda confusing but you should be fine leaving them as .css and doing the imports like I showed.


great episode. Thanks for going over this topic!


Thks Chris. just wondering why the rails template still does not include a pre-created placeholder for fonts.
Anyway, i found this ressource that could be useful to solve questions with regards to fonts found on purchased themes
https://gist.github.com/ano...

PS: might be lazy but generally I dump everything under the asset pipeline rather than vendor. i know it is bad....ahah

That's a good question. I'm not sure why. I've setup fonts before like in the tutorial you linked and that works well. It seems pretty common of a feature, but I'm not sure why they don't include that by default.

Then again, there are a lot of people like me that use Google Fonts or TypeKit in order to just include the fonts from somewhere else without actually including them in the app. Maybe that's common enough they don't include the fonts folder.


Hey Chris, just wondering which is a better way, using @import or the require method. Thanks. Great tutorials

They serve similar but different purposes, but I did talk a little bit about that here: https://gorails.com/episode...


is this video good for rails 5.1 and Bootstrap 4?


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 22,346+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.