adding specific layout with form wizard to learning object creation studio

app/assets/stylesheets/application/form-wizard.scss

+@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
+
+/* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/
+
+.board {
+  width: 75%;
+  margin: auto;
+  min-height: 500px;
+  background: #fff;
+
+  .nav-tabs {
+    position: relative;
+
+    margin: 40px auto;
+    margin-bottom: 0;
+    box-sizing: border-box;
+  }
+  > div.board-inner {
+    background: image-url('geometry2.png');
+    background-size: 30%;
+  }
+
+  p.narrow {
+    width: 60%;
+    margin: 10px auto;
+  }
+
+  .liner {
+    height: 2px;
+    background: #ddd;
+    position: absolute;
+    width: 80%;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    top: 50%;
+    z-index: 1;
+  }
+
+  .nav-tabs > li.active > a {
+    color: #555555;
+    cursor: default;
+    background-color: transparent !important;
+    border: 0;
+    border-bottom-color: transparent;
+    &:hover, &:focus {
+      color: #555555;
+      cursor: default;
+      background-color: transparent !important;
+      border: 0;
+      border-bottom-color: transparent;
+    }
+  }
+
+  span.round-tabs {
+    width: 70px;
+    height: 70px;
+    line-height: 70px;
+    display: inline-block;
+    border-radius: 100px;
+    background: white;
+    z-index: 2;
+    position: absolute;
+    left: 0;
+    text-align: center;
+    font-size: 25px;
+    &.one {
+      color: rgb(34, 194, 34);
+      border: 2px solid rgb(34, 194, 34);
+    }
+  }
+
+  li.active span.round-tabs.one {
+    background: #fff !important;
+    border: 2px solid #ddd;
+    color: rgb(34, 194, 34);
+  }
+
+  span.round-tabs.two {
+    color: #febe29;
+    border: 2px solid #febe29;
+  }
+
+  li.active span.round-tabs.two {
+    background: #fff !important;
+    border: 2px solid #ddd;
+    color: #febe29;
+  }
+
+  span.round-tabs.three {
+    color: #3e5e9a;
+    border: 2px solid #3e5e9a;
+  }
+
+  li.active span.round-tabs.three {
+    background: #fff !important;
+    border: 2px solid #ddd;
+    color: #3e5e9a;
+  }
+
+  span.round-tabs.four {
+    color: #f1685e;
+    border: 2px solid #f1685e;
+  }
+
+  li.active span.round-tabs.four {
+    background: #fff !important;
+    border: 2px solid #ddd;
+    color: #f1685e;
+  }
+
+  span.round-tabs.five {
+    color: #999;
+    border: 2px solid #999;
+  }
+
+  li.active span.round-tabs.five {
+    background: #fff !important;
+    border: 2px solid #ddd;
+    color: #999;
+  }
+
+  .nav-tabs > li {
+    &.active > a span.round-tabs {
+      background: #fafafa;
+    }
+    width: 33.33%;
+  }
+
+  /*li.active:before {
+      content: " ";
+      position: absolute;
+      left: 45%;
+      opacity:0;
+      margin: 0 auto;
+      bottom: -2px;
+      border: 10px solid transparent;
+      border-bottom-color: #fff;
+      z-index: 1;
+      transition:0.2s ease-in-out;
+  }*/
+
+  li {
+    &:after {
+      content: " ";
+      position: absolute;
+      left: 45%;
+      opacity: 0;
+      margin: 0 auto;
+      bottom: 0px;
+      border: 5px solid transparent;
+      border-bottom-color: #ddd;
+      transition: 0.1s ease-in-out;
+    }
+    &.active:after {
+      content: " ";
+      position: absolute;
+      left: 45%;
+      opacity: 1;
+      margin: 0 auto;
+      bottom: 0px;
+      border: 10px solid transparent;
+      border-bottom-color: #ddd;
+    }
+  }
+
+  .nav-tabs > li a {
+    width: 70px;
+    height: 70px;
+    margin: 20px auto;
+    border-radius: 100%;
+    padding: 0;
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  .tab-content {
+  }
+
+  .tab-pane {
+    position: relative;
+    padding-top: 50px;
+  }
+
+  .tab-content .head {
+    font-family: 'Roboto Condensed', sans-serif;
+    font-size: 25px;
+    text-transform: uppercase;
+    padding-bottom: 10px;
+  }
+
+  .btn-outline-rounded {
+    padding: 10px 40px;
+    margin: 20px 0;
+    border: 2px solid transparent;
+    border-radius: 25px;
+  }
+
+  .btn.green {
+    background-color: #5cb85c;
+    /*border: 2px solid #5cb85c;*/
+    color: #ffffff;
+  }
+
+  @media (max-width: 585px) {
+    .board {
+      width: 90%;
+      height: auto !important;
+    }
+    span.round-tabs {
+      font-size: 16px;
+      width: 50px;
+      height: 50px;
+      line-height: 50px;
+    }
+    .tab-content .head {
+      font-size: 20px;
+    }
+    .nav-tabs > li a {
+      width: 50px;
+      height: 50px;
+      line-height: 50px;
+    }
+    li.active:after {
+      content: " ";
+      position: absolute;
+      left: 35%;
+    }
+    .btn-outline-rounded {
+      padding: 12px 20px;
+    }
+  }
+}
\ No newline at end of file

app/controllers/learning_objects/build_controller.rb

 class LearningObjects::BuildController < ::ApplicationController
+  layout 'learning_object_studio'
+
   include Wicked::Wizard
   before_action :set_learning_object, only: [:show, :update]
 

app/views/layouts/application.html.erb

@@ -30,7 +30,7 @@
   <% end %>
 
   <div id="content">
-    <%= yield %>
+    <%= content_for?(:content)? yield(:content) : yield %>
   </div>
 </div>
 

app/views/layouts/learning_object_studio.html.erb

+<% content_for :content do %>
+    <div class="container">
+      <div class="row">
+        <div class="board">
+          <h2>Bem vindo ao estúdio de criação de conteúdos educacionais <span style="color:#f48260;">♥</span></h2>
+          <div class="board-inner">
+            <%= yield(:learning_object_studio_navigation) %>
+          </div>
+
+          <div class="tab-content">
+            <div class="tab-pane fade in active">
+              <%= yield(:learning_object_studio_content) %>
+            </div>
+            <div class="clearfix"></div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <script>
+      $(function () {
+        $('a[title]').tooltip();
+      });
+    </script>
+<% end %>
+<%= render template: "layouts/application" %>
\ No newline at end of file