acp skins first pass

public/less/admin/appearance/themes.less

@@ -28,9 +28,21 @@
 		}
 	}
 
+	[data-type="bootswatch"] {
+		.mdl-card__title {
+			height: 195px;
+		}
+
+		.mdl-card__title-text {
+			display: none;
+		}
+	}
 	.theme-card {
+		margin-bottom: 30px;
+
 		.mdl-card__title {
-			height: 250px;
+			height: 223px;
+			background-size: contain;
 
 			.mdl-card__title-text {
 				background: rgba(0,0,0,0.65);

src/views/admin/appearance/skins.tpl

@@ -1,24 +1,15 @@
 <div id="skins" class="row skins">
-	<div class="col-lg-9">
+	<div class="directory row" id="bootstrap_themes">
-		<div class="panel panel-default">
+		<i class="fa fa-refresh fa-spin"></i> Loading Themes
-			<div class="panel-heading">Bootswatch Themes</div>
-			<div class="panel-body">
-				<p>
-					NodeBB's skins are powered by Bootswatch, a repository containing themes built with Bootstrap as a base theme. Currently, the Vanilla theme is best optimized for use with Bootswatch.
-				</p>
-				<ul class="directory" id="bootstrap_themes">
-					<li><i class="fa fa-refresh fa-spin"></i> Loading Themes</li>
-				</ul>
-			</div>
-		</div>
 	</div>
-	<div class="col-lg-3 acp-sidebar">
+</div>
-		<div class="panel panel-default">
+
-			<div class="panel-heading">Revert to Default</div>
+<div class="col-lg-3 acp-sidebar">
-			<div class="panel-body">
+	<div class="panel panel-default">
-				<p>This will remove any custom Bootswatch skin applied to your NodeBB, and restore the base theme.</p>
+		<div class="panel-heading">Revert to Default</div>
-				<button class="btn btn-warning btn-md" id="revert_theme">Revert to Default</button>
+		<div class="panel-body">
-			</div>
+			<p>This will remove any custom Bootswatch skin applied to your NodeBB, and restore the base theme.</p>
+			<button class="btn btn-warning btn-md" id="revert_theme">Revert to Default</button>
 		</div>
 	</div>
 </div>

src/views/admin/partials/theme_list.tpl

@@ -1,7 +1,7 @@
 <!-- BEGIN themes -->
 <div class="col-xs-4" data-type="{themes.type}" data-theme="{themes.id}"<!-- IF themes.css --> data-css="{themes.css}"<!-- ENDIF themes.css -->>
 	<div class="theme-card mdl-card mdl-shadow--2dp">
-		<div class="mdl-card__title mdl-card--expand" style="background: url('{themes.screenshot_url}');">
+		<div class="mdl-card__title mdl-card--expand" style="background-image: url('{themes.screenshot_url}');">
 			<h2 class="mdl-card__title-text">{themes.name}</h2>
 		</div>
 		<div class="mdl-card__supporting-text">