Using Purchased Themes with Rails | GoRails - GoRails
Stephen Dolan
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?
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. :)
Todd Quillen
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...
Jesse Waites
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...
CF
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.
Sarah Abogabir
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.
Bob Joel
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.
palmstudiosdev
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...
Sean Kelley
Hey Chris, or anyone with the knowledge. Can i reference this video to use a purchased theme on rails 6? Thanks in advance!
Jesus, yup all the concepts are still the same for Rails 6.
The only change is that Javascript is now primarily written in the app/javascript folder using Webpacker instead of the asset pipeline in app/assets/javascripts. Still works about the same, but has a lot of new features.
Stylesheets still go in app/assets/stylesheets, same as before.