Wrapbootstrap theme on Rails 4 App

A few weeks back I bought a theme from wrapbootstrap in order to play around a bit with a new design. This kicked off a fairly and confusing process to get it set up in my Rails 4 app. I couldn’t find any good answers out there, although I found a few people asking similar questions.

I bought the theme called Treble. http://wrapbootstrap.com/preview/WB089478D I don’t know if the process would be different from every theme, but I imagine it might be.

Once you purchase the theme, wrap bootstrap sends a zip file that includes a number of folders – the most important of which is the folder source/assets. This /assets folder contains 4 folders – fonts, images, js and style. From the documentation, which isn’t great, I assumed that I should drop these sub-folders into the respective folders in the asset pipeline.  My only experience with the Rails asset pipeline at this point had been in app/assets directory. The default file structure includes a javascripts and style sheets folder.

So my first attempt with the wrapbootstrap files was to drop them into the /app/assets directories. I added the style folder (from wrapbootstrap) to the stylesheets folder (default Rails), added the js folder (from wrapbootstrap) to the javascripts folder (default Rails). I also dropped the fonts and images folders into the app/assets folder which created those folders in the directory. This was mistake #1 and would up costing me a week of frustration.

I was getting crazy errors and tried to require different pages in the manifest file (application.js for example). After all that, the simple solution was that the folders needed to live in the vendor/assets directory. Adding them there, stopped the errors, and the page loaded – although this didn’t fix everything. I could get the page to load, and the JS seemed to be working, but the images weren’t loading.

One of the problems that a friend found was that somehow, bootstrap was being called twice. I couldn’t get a full explanation, but the fix is to comment out line 19 which reads <link rel=”stylesheet” href=”assets/style/bootstrap.css” type=”text/css”>. I’m guessing there were some files left over from the install in app/assets and those were getting compiled along with the files in vendor/assets and this was causing issues.

I still had a few more problems which were solved by copying all the folders into the /public folder. Rails seems to pull the bootstrap.css file from the vendor folder and the images from the public folder. So when you need to edit the CSS, do it in the vendor files and when you’re changing the images, do that in the public folder.

Hope this helps at least someone out there.

About these ads
This entry was posted in rails, Web. Bookmark the permalink.

7 Responses to Wrapbootstrap theme on Rails 4 App

  1. charlie says:

    Rail guide describes this in detail in the “Asset pipeline” section, so vendor/assets is a good place. Now it’s my turn to install the sb-admin-2 free theme :D
    Thanks for sharing your experiences.

  2. Just bought a theme today and couldn’t get it to work. Your instructions saved me a lot of time, thanks!

  3. Thank you for sharing, I’m facing also a lot of issues, but i was capable of integrating the theme, but i have some other issues, such as scrolling is not working, so the page content became not fully loaded.

    the side menu, show/hide button is not working after clicking at any navigation link

    did you face issues like these?

  4. mikesabat says:

    Every theme is different – I didn’t even have a side menu. I’d recommend finding specific help, unless you really want to dig in at the beginning of the project. I go to freelancer.com and have hired this guy a number of times. He fixes the issue and is very fast and communicative. Username: samgonrails – https://www.freelancer.com/u/samgonrails.html?ref_project_id=undefined

    He’s really helped me through things.

    Good luck and share the link when you can.

  5. Doug Clark says:

    What wrapbootstrap provides are HTML templates for your app. They are almost always built under the concept of using them straight up – modifying text and images to create a static website. I’ve purchased several themes from them and haven’t had any issues, but yes, the vendor/assets folder is what you should use.

    You probably shouldn’t use the templates at face value, because Rails is a completely different beast. You also probably shouldn’t use the included Bootstrap library – you should include a bootstrap gem (sass-bootstrap-rails is a good one) that you explicitly mark, in your gemfile, as the version you want to use. You’ll have less issues regarding the asset pipeline, updating bootstrap, and compiling for production that way. The JS libraries included can be referenced in your application.js file (or whatever other manifest js file you wish to use), and probably should be specified in the explicit order listed in the theme file. The head section of each theme often requires separate js files – you can either require them all right away, or have separate js manifests for each particular view you wish to use. You probably need to use your own head section for your own app and tear it apart completely.

    The CSS is very similar – you’ll have to go through and update references to all images using the asset pipeline image helpers (url: image-url(‘path/to/image.png’)), and give all the files an scss extension, but once that’s done, it’ll compile properly.

    I like to make partials right away for the individual pages, keep the common stuff in a layout (or several layouts, depending on the template), and put them in a “snippets” folder you can get to easily. You’ll probably never want to use those “snippets” exactly as the theme defines – you’ll want to roll out your own content and update it based on the usage of the app – but just have it as a reference.

    If a theme gets updated, I would urge you to consider whether you actually need to update the theme. The JS and CSS libraries often will need to be re-evaluated again (image-url in scss files, for instance). You can use a difftool (like Kaleidoscope, for instance) to check the changes and merge what you want. Either way though, upgrading is more of an undertaking than just installing the proper CSS/JS/HTML the first time through.

    One last note here – if you’re using HAML for your templates, http://html2haml.heroku.com/ (not mine, I don’t endorse it, but I do use it often) is a great way to convert your HTML to HAML quickly and easily. It’s not perfect – it does miss tags from time to time – but it does save the time in rewriting every bit of code in HAML.

    Hope that helps and gives you some more insight on how to use these. I’ve used their templates on multiple projects, and understanding right out of the gate that they are usually designed for people to use on static pages or PHP really helps to understand that a lot of changes need to be made to make it all work properly with Rails. You’d have the same issues if you were working with a template from ThemeForest as well.

  6. I am working on this right now, thanks for the article!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s