Integrating Wrap Bootstrap Themes with Ruby on Rails

Question

I need help integrating a wrap Bootstrap theme in Rails. If its not asking too much a more in depth step by step would be great. I always feel like small details are left.

I purchased http://wrapbootstrap.com/preview/WB02634G3 and can't get some of the styling/JavaScript to work correctly.

I have added all my files to the respective assets folder and tried requiring each file name in the application.js/application.css file. Like this example below.

//= require theme

For the images I've renamed them to mostly "/assets/showcase1.png" In some cases I found that this format works too "../images/showcase.png"

Here is what my application.html.erb file looks like.

<!DOCTYPE html>

<html>

 <head>
  <title>DPL</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <%=s tylesheet_link_tag "application", :media=>"all" %>
      <%=j avascript_include_tag "application" %>
      <%=c srf_meta_tags %>
      <!-- Styles -->
       <link href="css/bootstrap.css" rel="stylesheet">
       <link rel="stylesheet" type="text/css" href="css/theme.css">
       <link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />
       <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
       <link rel="stylesheet" type="text/css" href="css/lib/animate.css" media="screen, projection">
 </head>

 <body>

   <body class="pull_top">
     <div class="navbar transparent navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </a>
         <a class="brand" href="index.html">
         <strong>DPL</strong>
         </a>

       <div class="nav-collapse collapse">
         <ul class="nav pull-right">
            <li><a href="index.html" class="active">HOME</a></li>
            <li><a href="about-us.html">ABOUT US</a></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            PAGES
            <b class="caret"></b>
            </a>

         <ul class="dropdown-menu">
            <li><a href="features.html">Features</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="portfolio-item.html">Portfolio Item</a></li>
            <li><a href="coming-soon.html">Coming Soon</a></li>
            <li><a href="sign-in.html">Sign in</a></li>
            <li><a href="sign-up.html">Sign up</a></li>
            <li><a href="backgrounds.html">Backgrounds</a></li>
         </ul>
            </li>
            <li><a href="pricing.html">PRICING</a></li>
            <li><a href="contact.html">CONTACT US</a></li>
            <li><a href="blog.html">BLOG</a></li>
            <li><a class="btn-header" href="sign-up.html">Sign up</a></li>
            <li><a class="btn-header" href="sign-in.html">Sign in</a></li>
         </ul>
          </div>
      </div>
     </div>
    </div>
    <div class="container">
                <%=y ield %>
            </div>
        </body>

</html>

I've added these to my gem file.

gem 'libv8'
gem 'twitter-bootstrap-rails'
gem 'bootswatch-rails'

Could you be more specific about what issues are you having please? Also, can you provide that did you purchase from wrapbootstrap (a CSS, a LESS file, a modified bootstrap theme...) for those who have never bought a theme in that site? — Pigueiras, Apr 23 '13 at 06:42
Hey could you please clarify the exact nature of the issue? What is the you are expecting and not getting it? — bbh, Jun 02 '15 at 08:20

score 5 · Answer 1 · edited May 23 '17 at 12:15

There's a helpful blog post here which should detail the general direction to take when integrating a theme into the asset pipeline. I've had to do this a couple of times, and in general, this is what I learned:

One

Keep a folder in your app/vendor directory where you leave the entire theme completely untouched. Just something like app/vendor/templates/theme. (Don't forget to includes vendor/template/* in your .gitignore file, though - this is just for reference.) That way, no matter what happens, you have the entire theme on hand. Instead of actually moving the files into your application's asset path, copy them.

Two

Don't store your theme assets in app/assets. Store them in vendor assets. It may help you remain more organized if you also create manifest files in your vendor directories, as such:

+ vendor
  - assets
    - stylesheets
      - vendor_sheets.css

then in vendor_sheets.css:

/*
 *= require vendor stylesheets
 */

Then in assets/stylesheets/applications.css:

/*
 * ...
 *= require vendor_sheets
 */

Rails will know to look in vendor. Then, you make a promise to yourself not to edit any of your vendor files unless it's absolutely necessary - as long as you require vendor_sheets in application.css before requiring any of your own stylesheets, you can simply override the themes' styles with your own.

Three

Start by translating one html page. Don't just move everything from the theme into the asset pipeline and assume it'll work. Instead, take, for example, the index.html file, and then copy each stylesheet that's linked in the index.html file into vendor/assets/stylesheets and *=require them in your vendor_sheets.css file in the exact same order that they're specified in the index.html file.

Don't do require_tree. Require the files explicitly. This guarantees proper order.

Four

Inspect Element is your best friend. Look at your sources. Make sure they're loaded, and that they're loaded in the proper order. Check your console for errors often. If you're focused on getting your stylesheets loaded properly, ignore image warnings and javascript warnings. One thing at a time.

Five

Treat the JavaScript files the same way you treat the stylesheets. Do a vendor_scripts.js manifest file in vendor/assets/javascripts, and then include that manifest file in assets/application.js. Make sure to include this file after the Rails defaults, such as jQuery and Turbolinks (which I'll get to in a minute), but before any of your own custom scripts. Again, Inspect Element to ensure all of your JavaScript files are included, and in the proper order.

Six

Images can be tricky. Copy the images you'll need into vendor/assets/images. You'll need to go into config/application.rb and make add vendor/assets/images to your assets paths, as follows:

config.assets.paths << Rails.root.join("app", "assets", "vendor/assets/images")

Restart your server.

Seven

Go into your vendor/stylesheets files and, one by one, search them for url('. Replace url('path/to/image/file_name.ext') with image_path('file_name'). Do step 6 and 7 for fonts as well, using vendor/assets/fonts for your directory and, instead of image_path, use `asset_path('file_name.ext'). Any stylesheet where you need to do this, append 'scss' to the name of the file, so that if it was styles.css before, now it's styles.css.scss.

There are a number of helpers you can use with sass-rails gem, which comes with Rails by default, to find assets despite the fact that your load paths are going to change in production. Use them, or else you may end up with everything working in localhost and then completely breaking once you deploy.

Here is some discussion on image referencing in Rails 4 that you may find helpful.

Eight

Copy and paste HTML from your template .html files as much as possible. This minimizes typos. Also read it thoroughly, however, and try to get a good grasp on how to use what's available.

Nine

Turbolinks: If your JavaScript still isn't working, Turbolinks may be getting in the way. You could just disable Turbolinks but... you really don't have to, and Turbolinks will speed up the feel of your site so there's no reason to get rid of it. But you do need to modify your JavaScript a little. Any JavaScript file that starts with:

$(document).on('ready', function() {

needs to be changed to

$(document).ready(function() {

Here is a helpful discussion about Turbolinks, and getting around it.

OK, apart from that, I've also noticed you have some problems your application.html.erb file:

 <%=s tylesheet_link_tag "application", :media=>"all" %>
  <%=j avascript_include_tag "application" %>
  <%=c srf_meta_tags %>
  <!-- Styles -->
   <link href="css/bootstrap.css" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="css/theme.css">
   <link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />
   <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="css/lib/animate.css" media="screen, projection">

Specifically <%=s tylesheet, <%=j avascript, and <%=c srf should be breaking things. You need <%= stylesheet, <%= javascript and <%= csrf respectively here.

On top of that, do not include links to internal stylesheets in your header. If you're requiring the files properly in application.css, they'll be included. The only exception is the Google Font.

I also see that you have, indeed, removed Turbolinks. This isn't necessary or even really advisable.

Good luck with your theme.