styled category selector

less/category.less

@@ -7,6 +7,51 @@
 				-moz-opacity: 0.30;
 				opacity: 0.30;
 			}
+
+			.select {
+				position: relative;
+				.pointer;
+
+				&:before {
+					content: "";
+				}
+
+				.fa-check {
+					border: 1px solid @brand-success;
+					color: @brand-success;
+					padding: 14px;
+					border-radius: 50%;
+					position: absolute;
+					font-size: 15px;
+					opacity: 0;	
+					top: 0px;
+
+					&:before {
+						.pointer;
+					}
+				}
+
+				.user-img {
+					opacity: 1;
+				}
+
+				.fa-check, .user-img {
+					.transition(.2s ease-in-out opacity);
+				}
+
+				width: 50px;
+				float: left;
+			}
+
+			&.selected {
+				.user-img {
+					opacity: 0;
+				}
+
+				.fa-check {
+					opacity: 1;
+				}
+			}
 		}
 
 		&:last-child li {

templates/partials/topics_list.tpl

@@ -5,14 +5,19 @@
 		<meta itemprop="name" content="{topics.title}">
 
 		<div class="col-md-7 col-sm-12 col-xs-12 content">
+			
+
 			<div class="pull-left">
 				<!-- IF showSelect -->
-					<i class="fa fa-fw fa-square-o pull-left select pointer"></i>
+					<div class="select fa-square-o">
+						<img src="{topics.user.picture}" class="img-circle user-img" />
+						<i class="fa fa-check"></i>
+					</div>
+				<!-- ELSE -->
+					<a href="{relative_path}/user/{topics.user.userslug}" class="pull-left">
+						<img src="{topics.user.picture}" class="img-circle user-img" title="{topics.user.username}"/>
+					</a>
 				<!-- ENDIF showSelect -->
-
-				<a href="{relative_path}/user/{topics.user.userslug}" class="pull-left">
-					<img src="{topics.user.picture}" class="img-circle user-img" title="{topics.user.username}"/>
-				</a>
 			</div>
 
 			<h1 class="title pull-left">