Added Basic Branding Support

The logo is now easily re-branded. Updated README to include info for additional customization.

README.md

@@ -118,6 +118,21 @@ Both tools should operate seamlessly in a local development environment. When de
 When creating new pages that utilize RequireJS dependencies, remember to use the `static_rjs` templatetag to load
 the script, and to add a new module to `build.js`.
 
+Theming and Branding
+--------------------
+We presently have support for basic branding of the logo displayed in the header and on error pages. This is facilitated
+by including an additional SCSS file specifying the path and dimensions of the logo. The default Open edX theme located
+at `static/sass/themes/open-edx.scss` is a good starting point for those interested in changing the logo. Once your
+customizations are complete, update the value of the setting `THEME_SCSS` with the path to your new SCSS file.
+
+Developers may also choose to further customize the site by changing the variables loaded by SCSS. This is most easily
+accomplished via the steps below. This will allow for easily changing basic colors and spacing.
+
+        1. Copy `static/sass/_config-variables.scss` to a new file (e.g. static/sass/_config-variables-awesome-theme).
+        2. Modify your variable values, but not the names, to correspond with your theme.
+        3. Update `static/sass/style-application.scss` to load your file immediately after loading `config-variables`.
+
+We welcome contributions from those interested in further expanding theming support!
 
 License
 -------

analytics_dashboard/analytics_dashboard/settings/base.py

@@ -399,3 +399,9 @@ with open(join(DOCS_ROOT, "config.ini")) as config_file:
     DOCS_CONFIG = ConfigParser.ConfigParser()
     DOCS_CONFIG.readfp(config_file)
 ########## END DOCS/HELP CONFIGURATION
+
+
+########## THEME CONFIGURATION
+# Path of the SCSS file to use for the site's theme
+THEME_SCSS = 'sass/themes/open-edx.scss'
+########## END THEME CONFIGURATION

analytics_dashboard/static/sass/_base.scss

@@ -71,15 +71,7 @@ hr.has-emphasis {
 }
 
 .navbar-brand {
-  padding: 25px 50px; // needed for edX logo to render properly
-
-  .navbar-brand-logo {
-    display: inline-block;
-    vertical-align: middle;
-    // setting the width keeps IE from computing the width too large (and sizing the brand section oddly)
-    width: 64px;
-    margin-right: 10px;
-  }
+  padding: 25px 50px; // needed for logo to render properly
 
   .navbar-brand-app {
     @include transition(color ease-in-out .25s);
@@ -412,13 +404,6 @@ hr.has-emphasis {
     margin-bottom: $padding-large-vertical;
   }
 
-  .masthead-brand-logo {
-    display: inline-block;
-    vertical-align: middle;
-    height: 60px;
-    margin-right: 10px;
-  }
-
   .masthead-brand-app {
     @extend %hd-titlecased;
     @extend %brand-app;

analytics_dashboard/static/sass/_config-variables.scss

@@ -249,4 +249,4 @@ $error-border: 1px solid $edx-gray-t1;
 $error-section-highlight-color: rgb(195, 53, 59);
 
 // FontAwesome font directory
-$fa-font-path: "/static/bower_components/font-awesome/fonts";
\ No newline at end of file
+$fa-font-path: "/static/bower_components/font-awesome/fonts";

analytics_dashboard/static/sass/_mixins.scss

@@ -6,3 +6,20 @@
     }
   }
 }
+
+@mixin brand-logo($brand-logo-path, $width, $height, $scaled-height:"") {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+  background: url($brand-logo-path) no-repeat;
+  background-size: contain;
+
+  @if $scaled-height != "" {
+    $scale: $scaled-height / $height;
+    $width: $width * $scale;
+    $height: $scaled-height;
+  }
+
+  width: $width;
+  height: $height;
+}

analytics_dashboard/static/sass/themes/edx.scss

+$brand-logo-path: '/static/images/edx-logo-header.png';
+$brand-logo-width: 93px;
+$brand-logo-height: 47px;
+
+@import "open-edx";
+
+.navbar-brand {
+  .navbar-brand-app {
+    // No padding is needed for the edX logo.
+    padding-top: 0;
+  }
+}

analytics_dashboard/static/sass/themes/open-edx.scss

+$brand-logo-path: '/static/images/openedx-logo.png' !default;
+$brand-logo-width: 450px !default;
+$brand-logo-height: 91px !default;
+
+@import "../mixins";
+
+.masthead-brand-logo {
+  @include brand-logo($brand-logo-path, $brand-logo-width, $brand-logo-height, 60px);
+}
+
+.navbar-brand {
+  .navbar-brand-logo {
+    @include brand-logo($brand-logo-path, $brand-logo-width, $brand-logo-height, 32px);
+  }
+
+  .navbar-brand-app {
+    padding-top: 8px;
+  }
+}

analytics_dashboard/templates/base.html

@@ -21,7 +21,11 @@
 
     {% block stylesheets %}
     {% compress css %}
-    <link rel="stylesheet" href="{% static 'sass/style-application.scss' %}" type="text/x-scss">
+      <link rel="stylesheet" href="{% static 'sass/style-application.scss' %}" type="text/x-scss">
+      {% captureas theme_scss %}
+        {% settings_value 'THEME_SCSS' %}
+      {% endcaptureas %}
+      <link rel="stylesheet" href="{% static theme_scss %}" type="text/x-scss">
     {% endcompress %}
     {% endblock %}
 

analytics_dashboard/templates/brand.html

@@ -3,6 +3,6 @@
 {% load dashboard_extras %}
 
 <a class="{{ class_prefix }}-brand" href="/">
-  <img class="{{ class_prefix }}-brand-logo" src="{% static 'images/edx-logo-header.png' %}" alt="{% settings_value 'PLATFORM_NAME' %}"/>
+  <div class="{{ class_prefix }}-brand-logo" alt="{% settings_value 'PLATFORM_NAME' %}"></div>
   <span class="{{ class_prefix }}-brand-app">{% settings_value 'APPLICATION_NAME' %}</span>
 </a>