I'm still working on alerts. I've worked out the client-side UI for Cosmo, the UI will be tweaked for the other themes shortly. The client-side JS also now pulls the alerts from the server.

The errors are now sent properly via JSON.
The success JSON messages are now sent properly.
Optimised the message for guests.
Added the opthead class for adding a nice Cosmo specific enhancement.

errors.go

@@ -36,14 +36,14 @@ func InternalErrorJSQ(err error, w http.ResponseWriter, r *http.Request, is_js s
 	if is_js == "0" {
 		w.Write(error_internal)
 	} else {
-		w.Write([]byte(`{'errmsg': 'A problem has occured in the system.'}`))
+		w.Write([]byte(`{"errmsg":"A problem has occured in the system."}`))
 	}
 	log.Fatal(err)
 }
 
 func InternalErrorJS(err error, w http.ResponseWriter, r *http.Request) {
 	w.WriteHeader(500)
-	w.Write([]byte(`{'errmsg': 'A problem has occured in the system.'}`))
+	w.Write([]byte(`{"errmsg":"A problem has occured in the system."}`))
 	log.Fatal(err)
 }
 
@@ -81,7 +81,7 @@ func PreErrorJSQ(errmsg string, w http.ResponseWriter, r *http.Request, is_js st
 		templates.ExecuteTemplate(&b,"error.html", pi)
 		fmt.Fprintln(w,b.String())
 	} else {
-		w.Write([]byte(`{'errmsg': '` + errmsg + `'}`))
+		w.Write([]byte(`{"errmsg":"` + errmsg + `"}`))
 	}
 }
 
@@ -93,7 +93,7 @@ func LocalErrorJSQ(errmsg string, w http.ResponseWriter, r *http.Request, user U
 		templates.ExecuteTemplate(&b,"error.html", pi)
 		fmt.Fprintln(w,b.String())
 	} else {
-		w.Write([]byte(`{'errmsg': '` + errmsg + `'}`))
+		w.Write([]byte(`{"errmsg":"` + errmsg + `"}`))
 	}
 }
 
@@ -119,7 +119,7 @@ func NoPermissionsJSQ(w http.ResponseWriter, r *http.Request, user User, is_js s
 		templates.ExecuteTemplate(&b,"error.html", pi)
 		fmt.Fprintln(w,b.String())
 	} else {
-		w.Write([]byte("{'errmsg': 'You don't have permission to do that.'}"))
+		w.Write([]byte(`{"errmsg":"You don't have permission to do that."}`))
 	}
 }
 
@@ -139,7 +139,7 @@ func BannedJSQ(w http.ResponseWriter, r *http.Request, user User, is_js string)
 		templates.ExecuteTemplate(&b,"error.html", pi)
 		fmt.Fprintln(w,b.String())
 	} else {
-		w.Write([]byte("{'errmsg': 'You have been banned from this site.'}"))
+		w.Write([]byte(`{"errmsg":"You have been banned from this site."}`))
 	}
 }
 
@@ -151,7 +151,7 @@ func LoginRequiredJSQ(w http.ResponseWriter, r *http.Request, user User, is_js s
 		templates.ExecuteTemplate(&b,"error.html", pi)
 		fmt.Fprintln(w,b.String())
 	} else {
-		w.Write([]byte("{'errmsg': 'You need to login to do that.'}"))
+		w.Write([]byte(`{"errmsg":"You need to login to do that."}`))
 	}
 }
 
@@ -184,6 +184,6 @@ func CustomErrorJSQ(errmsg string, errcode int, errtitle string, w http.Response
 		templates.ExecuteTemplate(&b,"error.html", pi)
 		fmt.Fprintln(w,b.String())
 	} else {
-		w.Write([]byte(`{'errmsg': '` + errmsg + `'}`))
+		w.Write([]byte(`{"errmsg":"` + errmsg + `"}`))
 	}
 }

general_test.go

@@ -1387,7 +1387,7 @@ func TestForumGuestRoute(t *testing.T) {
 	}
 	db = db_test
 	alert_w := httptest.NewRecorder()
-	alert_req := httptest.NewRequest("get","/api/?action=get&module=alerts",bytes.NewReader(nil))
+	alert_req := httptest.NewRequest("get","/api/?action=get&module=alerts&format=json",bytes.NewReader(nil))
 	alert_handler := http.HandlerFunc(route_api)
 	//testdb.StubQuery()
 	testdb.SetQueryFunc(func(query string) (result sql.Rows, err error) {

mod_routes.go

@@ -66,7 +66,7 @@ func route_edit_topic(w http.ResponseWriter, r *http.Request) {
 	if is_js == "0" {
 		http.Redirect(w,r,"/topic/" + strconv.Itoa(tid),http.StatusSeeOther)
 	} else {
-		fmt.Fprintf(w,"{'success': '1'}")
+		fmt.Fprintf(w,`{"success":"1"}`)
 	}
 }
 
@@ -255,7 +255,7 @@ func route_reply_edit_submit(w http.ResponseWriter, r *http.Request) {
 	if is_js == "0" {
 		http.Redirect(w,r, "/topic/" + strconv.Itoa(tid) + "#reply-" + strconv.Itoa(rid), http.StatusSeeOther)
 	} else {
-		fmt.Fprintf(w,"{'success': '1'}")
+		fmt.Fprintf(w,`{"success":"1"}`)
 	}
 }
 
@@ -316,7 +316,7 @@ func route_reply_delete_submit(w http.ResponseWriter, r *http.Request) {
 	if is_js == "0" {
 		//http.Redirect(w,r, "/topic/" + strconv.Itoa(tid), http.StatusSeeOther)
 	} else {
-		fmt.Fprintf(w,"{'success': '1'}")
+		fmt.Fprintf(w,`{"success":"1"}`)
 	}
 	
 	wcount := word_count(content)
@@ -382,7 +382,7 @@ func route_profile_reply_edit_submit(w http.ResponseWriter, r *http.Request) {
 	if is_js == "0" {
 		http.Redirect(w,r, "/user/" + strconv.Itoa(uid) + "#reply-" + strconv.Itoa(rid), http.StatusSeeOther)
 	} else {
-		fmt.Fprintf(w,"{'success': '1'}")
+		fmt.Fprintf(w,`{"success":"1"}`)
 	}
 }
 
@@ -433,7 +433,7 @@ func route_profile_reply_delete_submit(w http.ResponseWriter, r *http.Request) {
 	if is_js == "0" {
 		//http.Redirect(w,r, "/user/" + strconv.Itoa(uid), http.StatusSeeOther)
 	} else {
-		fmt.Fprintf(w,"{'success': '1'}")
+		fmt.Fprintf(w,`{"success":"1"}`)
 	}
 }
 
@@ -878,7 +878,7 @@ func route_panel_forums_edit_submit(w http.ResponseWriter, r *http.Request) {
 	if is_js == "0" {
 		http.Redirect(w,r,"/panel/forums/",http.StatusSeeOther)
 	} else {
-		fmt.Fprintf(w,"{'success': '1'}")
+		fmt.Fprintf(w,`{"success":"1"}`)
 	}
 }
 

mysql.go

@@ -19,7 +19,7 @@ var get_topic_stmt *sql.Stmt
 var get_topic_by_reply_stmt *sql.Stmt
 var get_topic_replies_stmt *sql.Stmt
 var get_topic_replies_offset_stmt *sql.Stmt
-var get_post_stmt *sql.Stmt
+var get_reply_stmt *sql.Stmt
 var get_forum_topics_stmt *sql.Stmt
 var get_forum_topics_offset_stmt *sql.Stmt
 var create_topic_stmt *sql.Stmt
@@ -154,8 +154,8 @@ func init_database(err error) {
 		log.Fatal(err)
 	}
 	
-	log.Print("Preparing get_post statement.")
+	log.Print("Preparing get_reply statement.")
-	get_post_stmt, err = db.Prepare("select content, createdBy, createdAt, lastEdit, lastEditBy, ipaddress, likeCount from replies where rid = ?")
+	get_reply_stmt, err = db.Prepare("select content, createdBy, createdAt, lastEdit, lastEditBy, ipaddress, likeCount from replies where rid = ?")
 	if err != nil {
 		log.Fatal(err)
 	}

public/global.js

@@ -5,7 +5,7 @@ function post_link(event)
 	event.preventDefault();
 	var form_action = $(event.target).closest('a').attr("href");
 	//console.log("Form Action: " + form_action);
-	$.ajax({ url: form_action, type: "POST", dataType: "json", data: { js: "1" } });
+	$.ajax({ url: form_action, type: "POST", dataType: "json", data: {js: "1"} });
 }
 
 $(document).ready(function(){
@@ -162,6 +162,65 @@ $(document).ready(function(){
 		}
 	});
 	
+	$(".menu_alerts").click(function(event) {
+		if($(this).hasClass("selectedAlert")) return;
+		var menu_alerts = $(this);
+		
+		this.className += " selectedAlert";
+		$.ajax({
+			type: 'get',
+			dataType: 'json',
+			url:'/api/?action=get&module=alerts&format=json',
+			success: function(data) {
+				if("errmsg" in data) {
+					console.log(data.errmsg);
+					menu_alerts.find(".alertList").html("<div class='alertItem'>"+data.errmsg+"</div>");
+					return;
+				}
+				
+				var alist = "";
+				for(var i in data.msgs) {
+					var msg = data.msgs[i];
+					var mmsg = msg.msg;
+					
+					if("sub" in msg) {
+						for(var i = 0; i < msg.sub.length; i++) {
+							mmsg = mmsg.replace("\{"+i+"\}", msg.sub[i]);
+							console.log("Sub #" + i);
+							console.log(msg.sub[i]);
+						}
+					}
+					
+					if("avatar" in msg) {
+						alist += "<div class='alertItem withAvatar' style='background-image:url(\""+msg.avatar+"\");'><div class='text'>"+mmsg+"</div></div>";
+						console.log(msg.avatar);
+					} else {
+						alist += "<div class='alertItem'>"+mmsg+"</div>";
+					}
+					console.log(msg);
+					console.log(mmsg);
+				}
+				
+				if(alist == "") {
+					alist = "<div class='alertItem'>You don't have any alerts</div>"
+				}
+				menu_alerts.find(".alertList").html(alist);
+			},
+			error: function(magic,theStatus,error) {
+				try {
+					var data = JSON.parse(magic.responseText);
+					if("errmsg" in data)
+					{
+						console.log(data.errmsg);
+						errtxt = data.errmsg;
+					}
+					else errtxt = "Unable to get the alerts"
+				} catch(e) { errtxt = "Unable to get the alerts"; }
+				menu_alerts.find(".alertList").html("<div class='alertItem'>"+errtxt+"</div>");
+			}
+		});
+	});
+	
 	this.onkeyup = function(event){
 		if(event.which == 37) this.querySelectorAll("#prevFloat a")[0].click();
 		if(event.which == 39) this.querySelectorAll("#nextFloat a")[0].click();

reply.go

@@ -45,6 +45,6 @@ type ReplyShort struct
 
 func get_reply(id int) (*ReplyShort, error) {
 	reply := ReplyShort{ID:id}
-	err := get_post_stmt.QueryRow(id).Scan(&reply.Content, &reply.CreatedBy, &reply.CreatedAt, &reply.LastEdit, &reply.LastEditBy, &reply.IpAddress, &reply.LikeCount)
+	err := get_reply_stmt.QueryRow(id).Scan(&reply.Content, &reply.CreatedBy, &reply.CreatedAt, &reply.LastEdit, &reply.LastEditBy, &reply.IpAddress, &reply.LikeCount)
 	return &reply, err
 }

routes.go

@@ -1606,10 +1606,14 @@ func route_register_submit(w http.ResponseWriter, r *http.Request) {
 	http.Redirect(w,r, "/", http.StatusSeeOther)
 }
 
+var phrase_login_alerts []byte = []byte(`{"msgs":[{"msg":"Login to see your alerts","path":"/accounts/login"}]}`)
 func route_api(w http.ResponseWriter, r *http.Request) {
 	err := r.ParseForm()
-	is_js := r.PostFormValue("js")
+	format := r.FormValue("format")
-	if is_js == "" {
+	var is_js string
+	if format == "json" {
+		is_js = "1"
+	} else { // html
 		is_js = "0"
 	}
 	if err != nil {
@@ -1631,9 +1635,14 @@ func route_api(w http.ResponseWriter, r *http.Request) {
 	module := r.FormValue("module")
 	switch(module) {
 		case "alerts": // A feed of events tailored for a specific user
+			if format != "json" {
+				PreError("You can only fetch alerts in the JSON format!",w,r)
+				return
+			}
+			
 			w.Header().Set("Content-Type","application/json")
 			if !user.Loggedin {
-				w.Write([]byte(`{"msgs":[{"msg":"Login to see your alerts","path":"/accounts/login"}]}`))
+				w.Write(phrase_login_alerts)
 				return
 			}
 			
@@ -1675,7 +1684,7 @@ func route_api(w http.ResponseWriter, r *http.Request) {
 				}*/
 				
 				if event == "friend_invite" {
-					msglist += `{"msg":"You received a friend invite from {0}","sub":["` + actor.Name + `"],"path":"/user/`+strconv.Itoa(actor.ID)+`"},`
+					msglist += `{"msg":"You received a friend invite from {0}","sub":["` + actor.Name + `"],"path":"\/user\/`+strconv.Itoa(actor.ID)+`","avatar":"`+strings.Replace(actor.Avatar,"/","\\/",-1)+`"},`
 					continue
 				}
 				
@@ -1767,7 +1776,7 @@ func route_api(w http.ResponseWriter, r *http.Request) {
 					}
 				}
 				
-				msglist += `{"msg":"{0} ` + start_frag + act + post_act + ` {1}` + end_frag + `","sub":["` + actor.Name + `","` + area + `"],"path":"` + url + `"},`
+				msglist += `{"msg":"{0} ` + start_frag + act + post_act + ` {1}` + end_frag + `","sub":["` + actor.Name + `","` + area + `"],"path":"` + url + `","avatar":"` + actor.Avatar + `"},`
 			}
 			
 			err = rows.Err()
@@ -1781,10 +1790,17 @@ func route_api(w http.ResponseWriter, r *http.Request) {
 				msglist = msglist[0:len(msglist)-1]
 			}
 			w.Write([]byte(`{"msgs":[`+msglist+`]}`))
+			//fmt.Println(`{"msgs":[`+msglist+`]}`)
 		//case "topics":
 		//case "forums":
 		//case "users":
 		//case "pages":
+		// This might not be possible. We might need .xml paths for sitemaps
+		/*case "sitemap":
+			if format != "xml" {
+				PreError("You can only fetch sitemaps in the XML format!",w,r)
+				return
+			}*/
 		default:
 			PreErrorJSQ("Invalid Module",w,r,is_js)
 	}

template_forum.go

@@ -32,10 +32,6 @@ w.Write(menu_5)
 w.Write(menu_6)
 }
 w.Write(menu_7)
-if !tmpl_forum_vars.CurrentUser.Loggedin {
-w.Write(menu_8)
-}
-w.Write(menu_9)
 w.Write(header_3)
 if len(tmpl_forum_vars.NoticeList) != 0 {
 for _, item := range tmpl_forum_vars.NoticeList {

template_forums.go

@@ -1,7 +1,7 @@
 /* This file was automatically generated by the software. Please don't edit it as your changes may be overwritten at any moment. */
 package main
-import "io"
 import "strconv"
+import "io"
 
 func init() {
 	template_forums_handle = template_forums
@@ -32,10 +32,6 @@ w.Write(menu_5)
 w.Write(menu_6)
 }
 w.Write(menu_7)
-if !tmpl_forums_vars.CurrentUser.Loggedin {
-w.Write(menu_8)
-}
-w.Write(menu_9)
 w.Write(header_3)
 if len(tmpl_forums_vars.NoticeList) != 0 {
 for _, item := range tmpl_forums_vars.NoticeList {

template_list.go

@@ -40,9 +40,10 @@ var menu_6 []byte = []byte(`
 		<li class="menu_left menu_login"><a href="/accounts/login/">Login</a></li>
 		`)
 var menu_7 []byte = []byte(`
-		<li class="menu_right menu_alerts">🔔︎<div class="alert_counter">`)
+		<li class="menu_right menu_alerts">🔔︎
-var menu_8 []byte = []byte(`1`)
+			<div class="alert_counter"></div>
-var menu_9 []byte = []byte(`</div></li>
+			<div class="alertList"></div>
+		</li>
 	</ul>
 	</div>
 	</div>
@@ -403,6 +404,9 @@ var profile_36 []byte = []byte(`
 </div>
 `)
 var forums_0 []byte = []byte(`
+<div class="rowblock opthead">
+	<div class="rowitem rowhead"><a>Forums</a></div>
+</div>
 <div class="rowblock">
 	`)
 var forums_1 []byte = []byte(`<div class="rowitem">

template_profile.go

@@ -32,10 +32,6 @@ w.Write(menu_5)
 w.Write(menu_6)
 }
 w.Write(menu_7)
-if !tmpl_profile_vars.CurrentUser.Loggedin {
-w.Write(menu_8)
-}
-w.Write(menu_9)
 w.Write(header_3)
 if len(tmpl_profile_vars.NoticeList) != 0 {
 for _, item := range tmpl_profile_vars.NoticeList {

template_topic.go

@@ -32,10 +32,6 @@ w.Write(menu_5)
 w.Write(menu_6)
 }
 w.Write(menu_7)
-if !tmpl_topic_vars.CurrentUser.Loggedin {
-w.Write(menu_8)
-}
-w.Write(menu_9)
 w.Write(header_3)
 if len(tmpl_topic_vars.NoticeList) != 0 {
 for _, item := range tmpl_topic_vars.NoticeList {

template_topic_alt.go

@@ -32,10 +32,6 @@ w.Write(menu_5)
 w.Write(menu_6)
 }
 w.Write(menu_7)
-if !tmpl_topic_alt_vars.CurrentUser.Loggedin {
-w.Write(menu_8)
-}
-w.Write(menu_9)
 w.Write(header_3)
 if len(tmpl_topic_alt_vars.NoticeList) != 0 {
 for _, item := range tmpl_topic_alt_vars.NoticeList {

template_topics.go

@@ -32,10 +32,6 @@ w.Write(menu_5)
 w.Write(menu_6)
 }
 w.Write(menu_7)
-if !tmpl_topics_vars.CurrentUser.Loggedin {
-w.Write(menu_8)
-}
-w.Write(menu_9)
 w.Write(header_3)
 if len(tmpl_topics_vars.NoticeList) != 0 {
 for _, item := range tmpl_topics_vars.NoticeList {

templates/forums.html

@@ -1,4 +1,7 @@
 {{template "header.html" . }}
+<div class="rowblock opthead">
+	<div class="rowitem rowhead"><a>Forums</a></div>
+</div>
 <div class="rowblock">
 	{{range .ItemList}}<div class="rowitem">
 		<a href="/forum/{{.ID}}" style="font-size: 20px;position:relative;top: -2px;font-weight: normal;text-transform: none;">{{.Name}}</a>

templates/menu.html

@@ -15,7 +15,10 @@
 		<li class="menu_left menu_register"><a href="/accounts/create/">Register</a></li>
 		<li class="menu_left menu_login"><a href="/accounts/login/">Login</a></li>
 		{{end}}
-		<li class="menu_right menu_alerts">🔔︎<div class="alert_counter">{{if not .CurrentUser.Loggedin}}1{{end}}</div></li>
+		<li class="menu_right menu_alerts">🔔︎
+			<div class="alert_counter"></div>
+			<div class="alertList"></div>
+		</li>
 	</ul>
 	</div>
 	</div>

themes/cosmo-conflux/public/main.css

@@ -87,17 +87,76 @@ li:hover
 	padding-right: 10px;
 	height: 38px;
 	text-align: center;
+	border-left: 1px solid #7a7a7a;
 }
 
-.menu_right:hover
+.menu_alerts .alert_counter {
-{
+	position: relative;
-	border: #282828 1px solid;
+	font-size: 9px;
-	background: #282828;
+	top: -24px;
-	padding-left: 10px;
+	background-color: rgb(140,0,0);
-	padding-right: 10px;
+	color: white;
-	height: 38px;
+	padding: 3px;
+	width: 14px;
+	left: 10px;
+	line-height: 8px;
+	border-radius: 20px;
+	padding-top: 2.5px;
+	height: 14px;
+	opacity: 0.8;
 	text-align: center;
 }
+.menu_alerts .alert_counter:empty {
+	display: none;
+}
+
+.selectedAlert {
+	background: white;
+	color: black;
+}
+.selectedAlert:hover {
+	background: white;
+	color: black;
+}
+.menu_alerts .alertList {
+	display: none;
+}
+.selectedAlert .alertList {
+	position: absolute;
+	top: 41px;
+	display: block;
+	background: white;
+	font-size: 10px;
+	line-height: 16px;
+	width: 135px;
+	right: -15px;
+	border-top: 1px solid #ccc;
+	border-left: 1px solid #ccc;
+	border-right: 1px solid #ccc;
+}
+.alertItem {
+	padding: 8px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.alertItem.withAvatar {
+	/*background-image: url('/uploads/avatar_1.jpg');*/
+	background-size: auto 56px;
+	background-repeat: no-repeat;
+	text-align: right;
+	padding-right: 12px;
+	height: 46px;
+}
+.alertItem.withAvatar:not(:last-child) {
+	border-bottom: 1px solid rgb(230,230,230);
+}
+.alertItem.withAvatar .text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	float: right;
+	width: calc(100% - 20px);
+	height: 30px;
+}
 
 #footer
 {
@@ -626,18 +685,7 @@ blockquote p
 	.options:last-child { border-left: 1px solid rgba(100,100,110,0.75); }
 	.right_most { margin-right: 10%; border-right: 1px solid rgba(100,100,110,0.75); }
 	
-	#alertFeed { background: url('../../images/bell.png') no-repeat center center / 24px, rgba(30,30,30,0.75); }
+	/*.options > .counter
-	#alertFeed:hover { background: url('../../images/bell.png') no-repeat center center / 24px, rgba(90, 90, 90, 0.4); }
-	#mailFeed { background: url('../../images/mail.png') no-repeat center center / 24px, rgba(30,30,30,0.75); }
-	#mailFeed:hover { background: url('../../images/mail.png') no-repeat center center / 24px, rgba(90, 90, 90, 0.4); }
-	#awardFeed { background: url('../../images/emblem.png') no-repeat center center / 24px, rgba(30,30,30,0.75); }
-	#awardFeed:hover { background: url('../../images/emblem.png') no-repeat center center / 24px, rgba(90, 90, 90, 0.4); }
-	
-	.selectedAlert { background: url('../../images/bell.png') no-repeat center center / 24px, rgba(250,250,250, 1) !important; }
-	.selectedMail { background: url('../../images/mail.png') no-repeat center center / 24px, rgba(250,250,250, 1) !important; }
-	.selectedAward { background: url('../../images/emblem.png') no-repeat center center / 24px, rgba(250,250,250, 1) !important; }
-	
-	.options > .counter
 	{
 		background: red;
 		border-radius: 5px;
@@ -651,77 +699,7 @@ blockquote p
 		
 		position: absolute;
 		right: 0px;
-	}
+	}*/
-	
-	.options > .alertList
-	{
-		display: none;
-		position: absolute;
-		display: block;
-		width: 250px;
-		left: -250%;
-		top: 40px;
-		opacity: 0;
-		visibility: hidden;
-		overflow: hidden;
-		
-		background: rgba(250,250,250,1);
-		word-wrap: none;
-		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-		padding: 0px;
-		z-index: 50;
-	}
-	
-	.options > .alertList > h2
-	{
-		font-weight: normal;
-		padding-top: 10px;
-		padding-left: 0px;
-		padding-right: 0px;
-		padding-bottom: 0px;
-		margin-left: 10px;
-		margin-top: 0px;
-		margin-right: 0px;
-		margin-bottom: 5px;
-		font-size: 20px;
-		line-height: 30px;
-		border: none;
-	}
-	
-	.options > .alertList > hr
-	{
-		border: 0.5px solid rgba(220,220,220,1);
-		width: 100%;
-		margin: 0px;
-		padding: 0px;
-	}
-	
-	.options > .alertList > .alertItem
-	{
-		display: block;
-		font-size: 13px;
-		margin-left: 0px;
-		margin-top: 0px;
-		margin-right: 0px;
-		margin-bottom: 3px;
-		padding-top: 10px;
-		padding-bottom: 10px;
-		padding-left: 10px;
-		padding-right: 0px;
-		overflow: hidden;
-		
-		border-bottom: 1px solid rgb(220, 220, 220);
-	}
-	
-	.options > .alertList > .alertItem:last-child { border: none; }
-	.options > .alertList > .alertItem > a { color: rgba(25,25,25,1); }
-	
-	.options > .alertList > .alertItem > .alertAvatar
-	{
-		float: left;
-		border-radius: 3px;
-		margin-right: 2px;
-	}
 }
 
 @media (max-width: 800px)

themes/cosmo/public/main.css

@@ -99,6 +99,54 @@ li:hover
 	display: none;
 }
 
+.selectedAlert {
+	background: white;
+	color: black;
+}
+.selectedAlert:hover {
+	background: white;
+	color: black;
+}
+.menu_alerts .alertList {
+	display: none;
+}
+.selectedAlert .alertList {
+	position: absolute;
+	top: 41px;
+	display: block;
+	background: white;
+	font-size: 10px;
+	line-height: 16px;
+	width: 135px;
+	right: -15px;
+	border-top: 1px solid #ccc;
+	border-left: 1px solid #ccc;
+	border-right: 1px solid #ccc;
+}
+.alertItem {
+	padding: 8px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.alertItem.withAvatar {
+	/*background-image: url('/uploads/avatar_1.jpg');*/
+	background-size: auto 56px;
+	background-repeat: no-repeat;
+	text-align: right;
+	padding-right: 12px;
+	height: 46px;
+}
+.alertItem.withAvatar:not(:last-child) {
+	border-bottom: 1px solid rgb(230,230,230);
+}
+.alertItem.withAvatar .text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	float: right;
+	width: calc(100% - 20px);
+	height: 30px;
+}
+
 #footer
 {
 	clear: left;
@@ -672,18 +720,7 @@ blockquote p
 	.options:last-child { border-left: 1px solid rgba(100,100,110,0.75); }
 	.right_most { margin-right: 10%; border-right: 1px solid rgba(100,100,110,0.75); }
 	
-	#alertFeed { background: url('../../images/bell.png') no-repeat center center / 24px, rgba(30,30,30,0.75); }
+	/*.options > .counter
-	#alertFeed:hover { background: url('../../images/bell.png') no-repeat center center / 24px, rgba(90, 90, 90, 0.4); }
-	#mailFeed { background: url('../../images/mail.png') no-repeat center center / 24px, rgba(30,30,30,0.75); }
-	#mailFeed:hover { background: url('../../images/mail.png') no-repeat center center / 24px, rgba(90, 90, 90, 0.4); }
-	#awardFeed { background: url('../../images/emblem.png') no-repeat center center / 24px, rgba(30,30,30,0.75); }
-	#awardFeed:hover { background: url('../../images/emblem.png') no-repeat center center / 24px, rgba(90, 90, 90, 0.4); }
-	
-	.selectedAlert { background: url('../../images/bell.png') no-repeat center center / 24px, rgba(250,250,250, 1) !important; }
-	.selectedMail { background: url('../../images/mail.png') no-repeat center center / 24px, rgba(250,250,250, 1) !important; }
-	.selectedAward { background: url('../../images/emblem.png') no-repeat center center / 24px, rgba(250,250,250, 1) !important; }
-	
-	.options > .counter
 	{
 		background: red;
 		border-radius: 5px;
@@ -697,77 +734,7 @@ blockquote p
 		
 		position: absolute;
 		right: 0px;
-	}
+	}*/
-	
-	.options > .alertList
-	{
-		display: none;
-		position: absolute;
-		display: block;
-		width: 250px;
-		left: -250%;
-		top: 40px;
-		opacity: 0;
-		visibility: hidden;
-		overflow: hidden;
-		
-		background: rgba(250,250,250,1);
-		word-wrap: none;
-		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-		padding: 0px;
-		z-index: 50;
-	}
-	
-	.options > .alertList > h2
-	{
-		font-weight: normal;
-		padding-top: 10px;
-		padding-left: 0px;
-		padding-right: 0px;
-		padding-bottom: 0px;
-		margin-left: 10px;
-		margin-top: 0px;
-		margin-right: 0px;
-		margin-bottom: 5px;
-		font-size: 20px;
-		line-height: 30px;
-		border: none;
-	}
-	
-	.options > .alertList > hr
-	{
-		border: 0.5px solid rgba(220,220,220,1);
-		width: 100%;
-		margin: 0px;
-		padding: 0px;
-	}
-	
-	.options > .alertList > .alertItem
-	{
-		display: block;
-		font-size: 13px;
-		margin-left: 0px;
-		margin-top: 0px;
-		margin-right: 0px;
-		margin-bottom: 3px;
-		padding-top: 10px;
-		padding-bottom: 10px;
-		padding-left: 10px;
-		padding-right: 0px;
-		overflow: hidden;
-		
-		border-bottom: 1px solid rgb(220, 220, 220);
-	}
-	
-	.options > .alertList > .alertItem:last-child { border: none; }
-	.options > .alertList > .alertItem > a { color: rgba(25,25,25,1); }
-	
-	.options > .alertList > .alertItem > .alertAvatar
-	{
-		float: left;
-		border-radius: 3px;
-		margin-right: 2px;
-	}
 }
 
 @media (max-width: 800px)

themes/tempra-conflux/public/main.css

@@ -82,6 +82,54 @@ li a
 	display: none;
 }
 
+.selectedAlert {
+	background: white;
+	color: black;
+}
+.selectedAlert:hover {
+	background: white;
+	color: black;
+}
+.menu_alerts .alertList {
+	display: none;
+}
+.selectedAlert .alertList {
+	position: absolute;
+	top: 41px;
+	display: block;
+	background: white;
+	font-size: 10px;
+	line-height: 16px;
+	width: 135px;
+	right: -15px;
+	border-top: 1px solid #ccc;
+	border-left: 1px solid #ccc;
+	border-right: 1px solid #ccc;
+}
+.alertItem {
+	padding: 8px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.alertItem.withAvatar {
+	/*background-image: url('/uploads/avatar_1.jpg');*/
+	background-size: auto 56px;
+	background-repeat: no-repeat;
+	text-align: right;
+	padding-right: 12px;
+	height: 46px;
+}
+.alertItem.withAvatar:not(:last-child) {
+	border-bottom: 1px solid rgb(230,230,230);
+}
+.alertItem.withAvatar .text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	float: right;
+	width: calc(100% - 20px);
+	height: 30px;
+}
+
 .container
 {
 	width: 90%;
@@ -154,10 +202,8 @@ li a
 	text-decoration: none;
 	color: black;
 }
-.rowitem a:hover
+.rowitem a:hover { color: silver; }
-{
+.opthead { display: none; }
-	color: silver;
-}
 
 .col_left
 {

themes/tempra-simple/public/main.css

@@ -80,6 +80,54 @@ li a
 	display: none;
 }
 
+.selectedAlert {
+	background: white;
+	color: black;
+}
+.selectedAlert:hover {
+	background: white;
+	color: black;
+}
+.menu_alerts .alertList {
+	display: none;
+}
+.selectedAlert .alertList {
+	position: absolute;
+	top: 41px;
+	display: block;
+	background: white;
+	font-size: 10px;
+	line-height: 16px;
+	width: 135px;
+	right: -15px;
+	border-top: 1px solid #ccc;
+	border-left: 1px solid #ccc;
+	border-right: 1px solid #ccc;
+}
+.alertItem {
+	padding: 8px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.alertItem.withAvatar {
+	/*background-image: url('/uploads/avatar_1.jpg');*/
+	background-size: auto 56px;
+	background-repeat: no-repeat;
+	text-align: right;
+	padding-right: 12px;
+	height: 46px;
+}
+.alertItem.withAvatar:not(:last-child) {
+	border-bottom: 1px solid rgb(230,230,230);
+}
+.alertItem.withAvatar .text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	float: right;
+	width: calc(100% - 20px);
+	height: 30px;
+}
+
 .container
 {
 	width: 90%;
@@ -144,6 +192,7 @@ li a
 	color: black;
 }
 .rowitem a:hover { color: silver; }
+.opthead { display: none; }
 
 .col_left
 {