Isolate design CSS

app/assets/stylesheets/themes/default/_variables.scss

@@ -1,3 +1,10 @@
+/*
+  Theme Path
+*/
+
+$theme-name: 'default';
+$theme-path: "themes/#{$theme-name}";
+
 /*
   Neat Overrides
 */

app/assets/stylesheets/themes/default/components/_flashes.scss

@@ -75,7 +75,7 @@ div#errors {
   top: 0;
 
   .message {
-    background: image-url('layout/flash-notice-background.png');
+    background: image-url("#{theme-path}/layout/flash-notice-background.png");
     position: relative;
     width: 730px;
     height: 60px;
@@ -89,7 +89,7 @@ div#errors {
     z-index: 2;
 
     &:before {
-      background: image-url('layout/flash-notice-icon.png');
+      background: image-url("#{theme-path}/layout/flash-notice-icon.png");
       content: '';
       display: block;
       width: 30px;
@@ -102,10 +102,10 @@ div#errors {
     &.warning,
     &.error,
     &.alert {
-      background: image-url('layout/flash-error-background.png');
+      background: image-url("#{theme-path}/layout/flash-error-background.png");
 
       &:before {
-        background: image-url('layout/flash-error-icon.png');
+        background: image-url("#{theme-path}/layout/flash-error-icon.png");
       }
     }
   }

app/assets/stylesheets/themes/default/layout/_body.scss

@@ -20,7 +20,7 @@ body#tinymce {
   min-height: 100%;
   background: {
     color: $blue;
-    image: image-url('layout/background.jpg');
+    image: image-url("#{$theme-path}/layout/background.jpg");
     position: top center;
     repeat: no-repeat;  
   }
@@ -39,11 +39,11 @@ body#tinymce {
   box-shadow: $content-shadow;
   margin-top: -35px;
   padding: 10px $container-padding $container-padding $container-padding;
-  background: image-url('layout/body-background.png') top center repeat-y;
+  background: image-url("#{$theme-path}/layout/body-background.png") top center repeat-y;
 
   &.full {
     padding-top: 40px;
-    background-image: image-url('layout/body-background-full.png');
+    background-image: image-url("#{$theme-path}/layout/body-background-full.png");
   }
 
   &.no-body {

app/assets/stylesheets/themes/default/layout/_footer.scss

@@ -1,7 +1,7 @@
 footer.footer {
   $footer-link-color: #5a5a5a;
 
-  background: image-url('layout/footer-background.png');
+  background: image-url("#{$theme-path}/layout/footer-background.png");
   height: 155px;
   max-height: 155px;
 

app/assets/stylesheets/themes/default/layout/_navigation.scss

@@ -9,7 +9,7 @@ $navigation-height: 50px;
   font-family: $header-font-family;
   height: $navigation-height;
   margin-top: -50px;
-  background: image-url('layout/nav-background.png') top center repeat-x;
+  background: image-url("#{$theme-path}/layout/nav-background.png") top center repeat-x;
   height: 100px;
   position: relative;
   z-index: 25;
@@ -128,7 +128,7 @@ ul.navigation {
       position: relative;
 
       ul {
-        background: image-url('layout/drop-menu-background.png') top center repeat-y;
+        background: image-url("#{$theme-path}/layout/drop-menu-background.png") top center repeat-y;
         width: 176px;
         position: absolute;
         box-shadow: $content-shadow;

app/assets/stylesheets/themes/default/layout/_sidebar.scss

@@ -13,7 +13,7 @@
       position: absolute;
       width: 265px;
       height: 75px;
-      background: image-url('layout/sidebar-shadow.png') top center no-repeat;
+      background: image-url("#{$theme-path}/layout/sidebar-shadow.png") top center no-repeat;
       top: 0;
       right: -20px;
     }

app/assets/stylesheets/themes/default/pages/_forums.scss

@@ -77,13 +77,13 @@ div#categories {
     width: 10%;
 
     background: {
-      image: image-url('layout/forum-category.png');  
+      image: image-url("#{$theme-path}/layout/forum-category.png");
       position: center center;
       repeat: no-repeat;
     }
 
     &.updated {
-      background-image: image-url('layout/forum-category-highlight.png');
+      background-image: image-url("#{$theme-path}/layout/forum-category-highlight.png");
     }
   }
 

app/helpers/application_helper.rb

@@ -9,6 +9,14 @@ module ApplicationHelper
     end
   end
 
+  def active_theme
+    'default'
+  end
+
+  def theme_stylesheet_link_tag
+    stylesheet_link_tag "themes/#{active_theme}/theme"
+  end
+
   def namelink model, length = nil
     return if model.nil?
     model = case model.class.to_s

app/views/application/_navigation.html.erb

@@ -1,7 +1,7 @@
 <nav id="menu">
   <div class="wrapper">
     <div id="logo">
-      <%= link_to image_tag('logo.png'), root_path %>
+      <%= link_to image_tag("themes/#{active_theme}/logo.png"), root_path %>
     </div>
     <ul class="navigation">
       <li class="icon">

app/views/layouts/application.html.erb

@@ -6,8 +6,8 @@
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <link rel="icon" type="image/png" href="/favicon.png" />
-    <%= stylesheet_link_tag "application" %>
-    <%= javascript_include_tag "application" %>
+    <%= theme_stylesheet_link_tag %>
+    <%= javascript_include_tag 'application' %>
     <%= csrf_meta_tag %>
   </head>
   <body>

app/views/layouts/forums.html.erb

@@ -6,8 +6,8 @@
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <link rel="icon" type="image/png" href="/favicon.png" />
-    <%= stylesheet_link_tag "application" %>
-    <%= javascript_include_tag "application" %>
+    <%= theme_stylesheet_link_tag %>
+    <%= javascript_include_tag 'application' %>
     <%= csrf_meta_tag %>
   </head>
   <body>

app/views/layouts/full.html.erb

@@ -6,8 +6,8 @@
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <link rel="icon" type="image/png" href="/favicon.png" />
-    <%= stylesheet_link_tag "application" %>
-    <%= javascript_include_tag "application" %>
+    <%= theme_stylesheet_link_tag %>
+    <%= javascript_include_tag 'application' %>
     <%= csrf_meta_tag %>
   </head>
   <body>