From 37f7d1d08a38b0ca822136d55f45c4a557c2b1a2 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@designcreateplay.com>
Date: Fri, 31 Jan 2014 13:17:28 -0500
Subject: [PATCH] resolved issue #913

---
 public/src/forum/admin/themes.js  |  4 +-
 public/templates/admin/themes.tpl | 67 ++++++++++++++++++++++---------
 public/templates/header.tpl       |  3 ++
 src/webserver.js                  |  7 ++++
 4 files changed, 61 insertions(+), 20 deletions(-)

diff --git a/public/src/forum/admin/themes.js b/public/src/forum/admin/themes.js
index a3685e127e..636edd2680 100644
--- a/public/src/forum/admin/themes.js
+++ b/public/src/forum/admin/themes.js
@@ -1,4 +1,4 @@
-define(function() {
+define(['forum/admin/settings'], function(Settings) {
 	var Themes = {};
 
 	Themes.init = function() {
@@ -96,6 +96,8 @@ define(function() {
 			instListEl.innerHTML = '';
 			instListEl.appendChild(themeFrag);
 		});
+
+		Settings.prepare();
 	}
 
 	Themes.render = function(bootswatch) {
diff --git a/public/templates/admin/themes.tpl b/public/templates/admin/themes.tpl
index 07b90b4bef..6fdf593aad 100644
--- a/public/templates/admin/themes.tpl
+++ b/public/templates/admin/themes.tpl
@@ -1,27 +1,56 @@
 <h1><i class="fa fa-th"></i> Themes</h1>
 <hr />
 
-<h3>Custom Themes</h3>
-<p>
-	The following themes are currently installed in this NodeBB instance.
-</p>
-<ul class="themes" id="installed_themes">
-	<li><i class="fa fa-refresh fa-spin"></i> Checking for installed themes...</li>
-</ul>
+<div class="themes">
+	<ul class="nav nav-tabs">
+		<li class="active"><a href="#" data-target="#themes" data-toggle="tab">Themes</a></li>
+		<li><a href="#" data-target="#customise" data-toggle="tab">Customise</a></li>
+	</ul>
 
-<h3>Bootswatch Themes</h3>
-<p>
-	NodeBB Themes are powered by Bootswatch, a repository containing themes built
-	with Bootstrap as a base theme.
-</p>
-<ul class="themes" id="bootstrap_themes">
-	<li><i class="fa fa-refresh fa-spin"></i> Loading Themes</li>
-</ul>
+	<div class="tab-content">
+		<div class="tab-pane active" id="themes">
+			<h3>Installed Themes</h3>
+			<p>
+				The following themes are currently installed in this NodeBB instance.
+			</p>
+			<ul class="directory" id="installed_themes">
+				<li><i class="fa fa-refresh fa-spin"></i> Checking for installed themes...</li>
+			</ul>
 
-<h3>Revert to Default</h3>
-<p class="alert">
-	<button class="btn btn-warning" id="revert_theme">Revert</button> This will remove any custom theme applied to your NodeBB, and restore the base theme.
-</p>
+			<h3>Bootswatch Themes</h3>
+			<p>
+				NodeBB Themes are powered by Bootswatch, a repository containing themes built
+				with Bootstrap as a base theme.
+			</p>
+			<ul class="directory" id="bootstrap_themes">
+				<li><i class="fa fa-refresh fa-spin"></i> Loading Themes</li>
+			</ul>
+
+			<h3>Revert to Default</h3>
+			<p class="alert">
+				<button class="btn btn-warning" id="revert_theme">Revert</button> This will remove any custom theme applied to your NodeBB, and restore the base theme.
+			</p>
+		</div>
+		<div class="tab-pane" id="customise">
+			<h3>Custom CSS</h3>
+			<p>
+				You may also opt to enter your own CSS declarations here, which will be applied after all other styles.
+			</p>
+			<textarea class="well" data-field="customCSS" placeholder="Enter your custom CSS here..."></textarea>
+
+			<form class="form">
+				<div class="form-group">
+					<label for="useCustomCSS">
+						Use Custom CSS?
+						<input id="useCustomCSS" type="checkbox" data-field="useCustomCSS" />
+					</label>
+				</div>
+			</form>
+
+			<button class="btn btn-lg btn-primary" id="save">Save</button>
+		</div>
+	</div>
+</div>
 
 <script>
 	var bootswatchListener = function(data) {
diff --git a/public/templates/header.tpl b/public/templates/header.tpl
index 5fc649f008..63dcf3a501 100644
--- a/public/templates/header.tpl
+++ b/public/templates/header.tpl
@@ -34,6 +34,9 @@
 
 	<!-- TODO : this has to be refactored, maybe configured from ACP? -baris -->
 	<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
+	<!-- IF useCustomCSS -->
+	<style type="text/css">{customCSS}</style>
+	<!-- ENDIF useCustomCSS -->
 </head>
 
 <body>
diff --git a/src/webserver.js b/src/webserver.js
index 84f68e6df9..03a61850d2 100644
--- a/src/webserver.js
+++ b/src/webserver.js
@@ -146,6 +146,13 @@ module.exports.server = server;
 				uid = options.req.user.uid;
 			}
 
+			// Custom CSS
+			templateValues.useCustomCSS = false;
+			if (meta.config.useCustomCSS === '1') {
+				templateValues.useCustomCSS = true;
+				templateValues.customCSS = meta.config.customCSS;
+			}
+
 			user.isAdministrator(uid, function(err, isAdmin) {
 				templateValues.adminDisplay = isAdmin ? 'show' : 'hide';