theming customize page

src/views/admin/appearance/customise.tpl

@@ -1,38 +1,46 @@
 <!-- IMPORT admin/appearance/header.tpl -->
 
 <div id="customise">
-	<h3>Custom CSS</h3>
+	<div class="panel panel-default">
-	<p>
+		<div class="panel-heading">Custom CSS</div>
-		You may also opt to enter your own CSS declarations here, which will be applied after all other styles.
+		<div class="panel-body">
-	</p>
+			<p>
-	<div id="customCSS"></div>
+				Enter your own CSS declarations here, which will be applied after all other styles.
-	<input type="hidden" id="customCSS-holder" value="" data-field="customCSS" />
+			</p>
+			<div id="customCSS"></div>
+			<input type="hidden" id="customCSS-holder" value="" data-field="customCSS" />
 
-	<form class="form">
+			<form class="form">
-		<div class="form-group">
+				<div class="form-group">
-			<label for="useCustomCSS">
+					<label for="useCustomCSS">
-				Use Custom CSS?
+						Use Custom CSS?
-				<input id="useCustomCSS" type="checkbox" data-field="useCustomCSS" />
+						<input id="useCustomCSS" type="checkbox" data-field="useCustomCSS" />
-			</label>
+					</label>
+				</div>
+			</form>
 		</div>
-	</form>
+	</div>
 
-	<h3>Custom Header</h3>
+	<div class="panel panel-default">
-	<p>
+		<div class="panel-heading">Custom Header</div>
-		You can enter custom HTML here (ex. JavaScript, Meta Tags, etc.) which will be appended to the <code>&lt;head&gt;</code> section of your forum's markup.
+		<div class="panel-body">
-	</p>
+			<p>
+				Enter custom HTML here (ex. JavaScript, Meta Tags, etc.), which will be appended to the <code>&lt;head&gt;</code> section of your forum's markup.
+			</p>
 
-	<div id="customHTML"></div>
+			<div id="customHTML"></div>
-	<input type="hidden" id="customHTML-holder" value="" data-field="customJS" />
+			<input type="hidden" id="customHTML-holder" value="" data-field="customJS" />
 
-	<form class="form">
+			<form class="form">
-		<div class="form-group">
+				<div class="form-group">
-			<label for="useCustomJS">
+					<label for="useCustomJS">
-				Use Custom Header?
+						Use Custom Header?
-				<input id="useCustomJS" type="checkbox" data-field="useCustomJS" />
+						<input id="useCustomJS" type="checkbox" data-field="useCustomJS" />
-			</label>
+					</label>
+				</div>
+			</form>
 		</div>
-	</form>
+	</div>
 
 	<button class="btn btn-primary" id="save">Save</button>
 </div>