290420 New theme, personal settings and bugfixes

README.md

@@ -20,4 +20,10 @@ Enjoy
 
 # Update
 
-If you wish to update your instalation to a newer version, just download the package and overwrite all changed files (except for settings.php file unless explicitly directd to)
+Option 1:
+
+Download package and replace all files with different size (except settings.php on root).
+
+Option 2:
+
+Delete everything (except settings.php on root and /data folder) and reupload. 

action.php

@@ -16,11 +16,41 @@ require_once "include/functions.php";
 
 $srv = $user_settings['instance'];
 
-if (isset($_GET['action']) && $_GET['action'] == "settings"){
+if (isset($_POST['action']) && $_POST['action'] == "settings"){
-	//file_put_contents("settings.txt",var_export($_GET,true));
+	if(!empty($_FILES["avatar"]["name"])){
-	
+		$ext = strtolower(end(explode('.', $_FILES["avatar"]['name'])));
-	foreach($_GET as $key => $value){
+		if(in_array($ext,array("jpg","jpeg","gif","png"))){
+			$file_name = time().mt_rand(100,199).".".$ext;
+			$file_tmp = $_FILES["avatar"]['tmp_name'];
+			move_uploaded_file($file_tmp, $file_name);
+			upload_profile($file_name,'avatar');
+			unlink($file_name);	
+		} else {
+			unlink($_FILES["avatar"]['tmp_name']);	
+		}
+	}
+	if(!empty($_FILES["header"]["name"])){
+		$ext = strtolower(end(explode('.', $_FILES["header"]['name'])));
+		if(in_array($ext,array("jpg","jpeg","gif","png"))){
+			$file_name = time().mt_rand(100,199).".".$ext;
+			$file_tmp = $_FILES["header"]['tmp_name'];
+			move_uploaded_file($file_tmp, $file_name);
+			upload_profile($file_name,'header');
+			unlink($file_name);	
+		} else {
+			unlink($_FILES["header"]['tmp_name']);	
+		}
+	}
+	foreach($_POST as $key => $value){
 		switch($key){
+			case "username":
+				api_patch("accounts/update_credentials",array('display_name'=>$value));
+				break;
+			
+			case "bio":
+				api_patch("accounts/update_credentials",array('note'=>$value));
+				break;
+			
 			case "explicit":
 				$user_settings['explicit'] = htmlentities($value);
 				break;
@@ -98,7 +128,7 @@ if (isset($_GET['action']) && $_GET['action'] == "settings"){
 	}
 	setrawcookie("user_settings",base64_encode(json_encode($user_settings)),time()+60*60*24*30,'/'); 
 	setrawcookie("theme",base64_encode(json_encode($theme)),time()+60*60*24*30,'/'); 
-	die();
+	header("location: ./?page=settings");
 }
 
 
@@ -263,6 +293,7 @@ foreach($_GET as $key => $value){
 						<span style='width:290; height:30px; display:block; margin-top:10px;'>
 							".($logedin ? "<span id='".$info['id']."' class='profileButton ".(($rel[0]['following'] || $rel[0]['requested']) ? "unfollow" : "follow" )."'>".($rel[0]['following'] || $rel[0]['requested'] ? "Following" : "Follow" )."</span>" : "")."
 							<span id='".$info['id']."' class='profileButton ".(in_array($info['id'],$user_settings['nsfw']) ? "unnsfw" : "nsfw" )."'>".(in_array($info['id'],$user_settings['nsfw']) ? "NSFW <span class='fontello'>&#xf205;</span>" : "NSFW <span class='fontello'>&#xf204;</span>" )."</span>
+							".($logedin ? "<span id='" . $info['id'] . "' class='profileButton " . ($rel[0]['muting'] ? "un" : "") . "mute'>" . ($rel[0]['muting'] ? "&#xe81a; Unmute" : "&#xe81b; Mute") . "</span>" : "")."
 						</span>
 					</div>
 				  ";
@@ -284,11 +315,15 @@ foreach($_GET as $key => $value){
 	
 	
 	case "themefile":
-		//echo $value;
 			echo themes("get",$value);
 			die();
 			break;
 			
+		case "themename":
+			echo $user_settings['theme'];
+			die();
+			break;
+			
 	case "emoji":
 		echo emoji_list(sanitize($value));
 		//die();

css/color.css

@@ -253,6 +253,24 @@ input[type="submit"] {
 	background-color: #eee;
 }
 
+.public::after {
+	content: '';
+}
+
+.unlisted::after {
+	content: '';
+}
+
+.private::after {
+	content: '';
+}
+
+.direct::after {
+	content: '';
+}
+
+
+
 .post_buttons {
 	color: #404040;
 }

css/mobile.css

@@ -233,7 +233,7 @@ aside {
 	height: 60px;
 	border: 1px solid #ccc;
 	display: inline-block;
-	box-shadow: 3px 3px 3px grey;
+	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
 	float: left;
 	background-size: cover;
 }
@@ -360,10 +360,9 @@ aside {
 }
 
 .avatar {
-	display:none;
+	width: 80px;
-	width: 50px;
+	background-size: 80px;
-	background-size: cover;
+	height: 80px;
-	height: 50px;
 	float: left;
 	margin: 15px;
 	border-radius: 10px;
@@ -423,20 +422,28 @@ aside {
 	display: none;
 	position: absolute;
 	left:0px;
-	top:-198px;
+	top:15px;
 	width: 300px;
-	height: 200px;
+	height: auto;
 	border-radius:3px;
+	line-height:initial;
+	z-index:99;
+}
+
+.userinfo_upper{
+	top:-100px;
 }
 
 .userinfo_co {
 	width: 280px;
 	margin: 10px;
+	text-align: center; 
+	position:relative;
 }
 
 .userinfo_he {
 	width: 300px;
-	height: 100px;
+	height: 150px;
 }
 
 .media {

css/style.css

@@ -233,7 +233,7 @@ aside {
 	height: 60px;
 	border: 1px solid #ccc;
 	display: inline-block;
-	box-shadow: 3px 3px 3px grey;
+	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
 	float: left;
 	background-size: cover;
 }
@@ -360,11 +360,11 @@ aside {
 
 .avatar {
 	width: 80px;
-	background-size: 80px;
 	height: 80px;
 	float: left;
 	margin: 15px;
 	border-radius: 10px;
+	background-size: auto 80px;
 }
 
 .post,

include/functions.php

@@ -230,8 +230,57 @@ function api_delete($url, $array) {
 	return json_decode($result, true);
 }
 
+/* a function to make general PATCH api calls to the logged-in instance*/
+function api_patch($url, $array) {
+	global $srv;
+	global $token;
+
+	$cSession = curl_init();
+	curl_setopt($cSession, CURLOPT_HEADER, false);
+	curl_setopt($cSession, CURLOPT_POST, 1);
+	curl_setopt($cSession, CURLOPT_URL, "https://$srv/api/v1/" . $url);
+	curl_setopt($cSession, CURLOPT_CUSTOMREQUEST, "PATCH");
+	if (!is_null($token)) {
+		curl_setopt($cSession, CURLOPT_HTTPHEADER, array(
+			'Authorization: Bearer ' . $token
+		));
+	}
+	curl_setopt($cSession, CURLOPT_POSTFIELDS, http_build_query($array));
+	curl_setopt($cSession, CURLOPT_RETURNTRANSFER, true);
+	$result = curl_exec($cSession);
+	curl_close($cSession);
+
+	return json_decode($result, true);
+}
+
+function upload_profile($file,$type){
+	global $srv;
+	global $token;
+	
+	$mime = get_mime($file);
+	$info = pathinfo($file);
+	$name = $info['basename'];
+	$output = new CURLFile($file, $mime, $name);
+		$cSession = curl_init();
+		curl_setopt($cSession, CURLOPT_URL, "https://$srv/api/v1/accounts/update_credentials");
+		curl_setopt($cSession, CURLOPT_RETURNTRANSFER, true);
+		curl_setopt($cSession, CURLOPT_POST, 1);
+		curl_setopt($cSession, CURLOPT_CUSTOMREQUEST, "PATCH");
+		curl_setopt($cSession, CURLOPT_HTTPHEADER, array(
+			'Authorization: Bearer ' . $token
+		));
+		curl_setopt($cSession, CURLOPT_POSTFIELDS, array(
+			$type => $output
+		));
+		$result = curl_exec($cSession);
+		curl_close($cSession);
+		return $result;
+}
+
 /* this function is used to generate the html code of a poll */
 function renderPoll($elem) {
+	global $logedin;
+	
 	$output = "";
 	$output .= "<br>";
 	$votes = $elem['poll']['votes_count'];
@@ -246,7 +295,7 @@ function renderPoll($elem) {
 		foreach ($elem['poll']['options'] as $option){
 			$output .= "<div class='polloption'>".$option['title']."</div>";
 		}
-		$output .= "<input type='submit' class='vote' id='".$elem['poll']['id']."' value='Send Vote' style='padding:2px;' onClick='return false;'>";
+		$output .= ($logedin ? "<input type='submit' class='vote' id='".$elem['poll']['id']."' value='Send Vote' style='padding:2px;' onClick='return false;'>" : "");
 	}
 	return $output;
 }
@@ -306,7 +355,7 @@ function render_reply($item) {
 	$unlisted = "&#xe816;";
 	$direct = "&#xf0e0;";
 
-	$reply['date'] = "<a class='ldr postAge' id='".strtotime($item['created_at'])."' style='text-decoration:none;' target='_blank' href='?thread=" . $item['id'] . "&instance=$srv" . "'>" . time_elapsed_string($item['created_at']) . "</a> - <span class='fontello'>" . $$item['visibility'] . "</span>";
+	$reply['date'] = "<a class='ldr postAge' id='".strtotime($item['created_at'])."' style='text-decoration:none;' target='_blank' href='?thread=" . $item['id'] . "'>" . time_elapsed_string($item['created_at']) . "</a> - <span class='fontello ".$item['visibility']."'>  </span>";
 
 	$reply['media'] = "";
 	if (!empty($item['media_attachments'])) {
@@ -494,8 +543,6 @@ function uploadpic($file) {
 		$info = pathinfo($file);
 		$name = $info['basename'];
 		$output = new CURLFile($file, $mime, $name);
-
-		do {
 			$cSession = curl_init();
 			curl_setopt($cSession, CURLOPT_URL, "https://$srv/api/v1/media");
 			curl_setopt($cSession, CURLOPT_RETURNTRANSFER, true);
@@ -507,7 +554,6 @@ function uploadpic($file) {
 				'file' => $output
 			));
 			$result = curl_exec($cSession);
-		} while (empty($result));
 		curl_close($cSession);
 		$array = json_decode($result, true);
 
@@ -938,7 +984,7 @@ function themes($mode,$name = false){
 			$themes = scandir("themes/");
 			$themelist = array();
 			foreach ($themes as $elem){
-				if ($elem != ".." && $elem != "." && $elem != "custom"){
+				if ($elem != ".." && $elem != "." && $elem != "custom" && is_dir("themes/".$elem)){
 					$themelist[] = $elem;
 				}
 			}

index.php

@@ -42,8 +42,16 @@ include "settings.php";				# the general settings of the FE
 include "include/init.php";			# initializes the page load with some variables and cookies
 include "include/functions.php";    # the functions that are used on all the FE files.
 
+if ($logedin){ 
+	$info = api_get("accounts/verify_credentials");
+	if(!$info['display_name']){
+		header('Location: ./logout');
+	}
+}
+
+
 /* if part of the url query is an ajax action, this file will handle it */
-if(isset($_GET['action'])){
+if(isset($_GET['action']) || isset($_POST['action'])){
 	include "action.php";
 }
 

js/scripts.js

@@ -112,7 +112,7 @@ $('body').on('click', '.ldr', function(e) {
 	var url = $(this).attr('href');
 	var id = $(this).attr('id');
 	localStorage.setItem("content", $('#content .element').detach());
-	$('#content').html('<center><img src="img/loadingb.gif"></center>');
+	$('#content').html('<center><div class="loadingImage"></div></center>');
 	$.get(url + "&ajax=1", function(data) {
 		$('#content').html(data);
 		history.pushState({}, "Dashboard FE", url);
@@ -120,6 +120,7 @@ $('body').on('click', '.ldr', function(e) {
 	});
 });
 
+
 $('body').on('click', '.gotop a', function(e) {
 	e.preventDefault();
 	$('html, body').animate({
@@ -432,6 +433,7 @@ window.setInterval(function() {
 	newPosts();
 }, 25000);
 
+/*
 $('body').on('click', '#settings #send', function() {
 	$('#settings #send').after('<img id="loading" src="img/loading.gif">');
 	var params = {
@@ -458,7 +460,7 @@ $('body').on('click', '#settings #send', function() {
 		window.location.reload(true); 
 	});
 });
-
+*/
 
 function themecheck(name){
 	if(name.value == "custom"){
@@ -469,7 +471,6 @@ function themecheck(name){
     }
 };
 
-
 function timeSince(date) {
   /*  https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site  */
   
@@ -478,27 +479,27 @@ function timeSince(date) {
   var interval = Math.floor(seconds / 31536000);
 
   if (interval >= 1) {
-    return interval + " years";
+    return interval + " year"+(interval > 1 ? "s" : "");
   }
   interval = Math.floor(seconds / 2592000);
   if (interval >= 1) {
-    return interval + " months";
+    return interval + " month"+(interval > 1 ? "s" : "");
   }
   interval = Math.floor(seconds / 604800);
   if (interval >= 1) {
-    return interval + " weeks";
+    return interval + " week"+(interval > 1 ? "s" : "");
   }
   interval = Math.floor(seconds / 86400);
   if (interval >= 1) {
-    return interval + " days";
+    return interval + " day"+(interval > 1 ? "s" : "");
   }
   interval = Math.floor(seconds / 3600);
   if (interval >= 1) {
-    return interval + " hours";
+    return interval + " hour"+(interval > 1 ? "s" : "");
   }
   interval = Math.floor(seconds / 60);
   if (interval >= 1) {
-    return interval + " minutes";
+    return interval + " minute"+(interval > 1 ? "s" : "");
   }
   return Math.floor(seconds) + " seconds";
 }

layout/footer.php

@@ -382,68 +382,68 @@ $query = http_build_query(array_filter(array(
 	});
 
 
-                document.onpaste = function (event) {
+	document.onpaste = function (event) {
-                    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
+		var items = (event.clipboardData || event.originalEvent.clipboardData).items;
-                    /*Make Sure Only One File is Copied*/
+		/*Make Sure Only One File is Copied*/
-                    if (items.length != 1) {
+		if (items.length != 1) {
-                        return;
+			return;
-                    }
+		}
-                    var item = items[0];
+		var item = items[0];
-                    /*Verify If The Copied Item is File*/
+		/*Verify If The Copied Item is File*/
-                    if (item.kind === 'file') {
+		if (item.kind === 'file') {
-                        var file = item.getAsFile();
+			var file = item.getAsFile();
-                        var filename = file.name;
+			var filename = file.name;
-                        /*Get File Extension*/
+			/*Get File Extension*/
-                        var ext = filename.split('.').reverse()[0].toLowerCase();
+			var ext = filename.split('.').reverse()[0].toLowerCase();
-                        /*Check Image File Extensions*/
+			/*Check Image File Extensions*/
-                        if (jQuery.inArray(ext, ['jpg', 'png']) > -1) {
+			if (jQuery.inArray(ext, ['jpg', 'png']) > -1) {
-                            /*Create FormData Instance*/
+				/*Create FormData Instance*/
-                            var data = new FormData();
+				var data = new FormData();
-                            data.append('file', file);
+				data.append('file', file);
-                            /*Request Ajax With File*/
+				/*Request Ajax With File*/
-                            request_ajax_file('upload.php', data, file_uploaded);
+				request_ajax_file('upload.php', data, file_uploaded);
-                        } else {
+			} else {
-                            alert('Invalid File');
+				alert('Invalid File');
-                        }
+			}
-                    }
+		}
-                };
+	};
 
-            function file_uploaded(data) {
+	function file_uploaded(data) {
-                if ($("#postform .uploadBox").length < 1){
+		if ($("#postform .uploadBox").length < 1){
-					$("#postform #status").before('<div class="uploadBox"><ul id="files" style="margin:0px;"></ul></div>');
+			$("#postform #status").before('<div class="uploadBox"><ul id="files" style="margin:0px;"></ul></div>');
-					 $( function() {
+			 $( function() {
-						$( "#files" ).sortable();
+				$( "#files" ).sortable();
-						$( "#files" ).disableSelection();
+				$( "#files" ).disableSelection();
-					} );
+			} );
+		}
+		var files = JSON.parse(data);
+		$.each(files, function( index, elem ) {
+			$("#files").append('<li class="uploadedImage" id="'+elem[0]+'" style="position:relative; background-image:url('+elem[1]+')"><div class="fontello delpic">&#xe813;</div></li>');
+		});
+		var nfiles = $("#postform .uploadBox").children().length;		    
+		$("#postform .status").html('');
+	}
+
+	/*Function to Make AJAX Request With File*/
+	function request_ajax_file(ajax_url, ajax_data, ajax_callback) {
+		$("#postform .status").html('<span id="loading" class="animate-spin fontello">&#xe838;</span>');
+		jQuery.ajax({
+			url: ajax_url,
+			data: ajax_data,
+			type: 'POST',
+			processData: false,
+			contentType: false,
+			success: function (response) {
+				if (typeof ajax_callback == 'function') {
+					ajax_callback(response);
+				} else if (typeof ajax_callback == 'string') {
+					if (ajax_callback != '') {
+						eval(ajax_callback + '(response)');
+					}
 				}
-				var files = JSON.parse(data);
+			}
-				$.each(files, function( index, elem ) {
+		});
-					$("#files").append('<li class="uploadedImage" id="'+elem[0]+'" style="position:relative; background-image:url('+elem[1]+')"><div class="fontello delpic">&#xe813;</div></li>');
+	}
-				});
-				var nfiles = $("#postform .uploadBox").children().length;		    
-				$("#postform .status").html('');
-            }
-
-            /*Function to Make AJAX Request With File*/
-            function request_ajax_file(ajax_url, ajax_data, ajax_callback) {
-				$("#postform .status").html('<span id="loading" class="animate-spin fontello">&#xe838;</span>');
-                jQuery.ajax({
-                    url: ajax_url,
-                    data: ajax_data,
-                    type: 'POST',
-                    processData: false,
-                    contentType: false,
-                    success: function (response) {
-                        if (typeof ajax_callback == 'function') {
-                            ajax_callback(response);
-                        } else if (typeof ajax_callback == 'string') {
-                            if (ajax_callback != '') {
-                                eval(ajax_callback + '(response)');
-                            }
-                        }
-                    }
-                });
-            }
 
 	function upload_files() {
 	    $("#postform .status").html('<span id="loading" class="animate-spin fontello">&#xe838;</span>');

layout/header.php

@@ -1,12 +1,6 @@
 <!DOCTYPE html>
 <head>
 	<title><?php echo $setting['appname']; ?></title>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" media='screen and (min-width: 801px)' href='./<?php echo themes("file","css/style.css")?>?id=<?php echo mt_rand(1000, 2500); ?>' />
-	<link rel="stylesheet" media='screen and (max-width: 800px)' href='./<?php echo themes("file","css/mobile.css")?>?id=<?php echo mt_rand(1000, 2500); ?>' />
-	<link rel="stylesheet" href='./<?php echo ($user_settings['theme'] == "custom" ? themes("file","css/color.php") : themes("file","css/color.css"))?>?id=<?php echo mt_rand(1000, 2500); ?>' />
-	<link rel="stylesheet" href="./css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->
-	<link rel="stylesheet" href="./css/animate.css">
 	<style type="text/css">
 @font-face {
       font-family: 'fontello';
@@ -53,7 +47,7 @@
 .nte_type span{
 		font-family:fontello;
 		font-size:8px;
-		color:white;
+		color:white !important;
 		margin-top:4px;
 		display:block;
 	}
@@ -61,7 +55,21 @@
 	#emojisearch {
 		border:0;
 	}
+	
+	.loadingImage{
+		width:100px;
+		height:100px;
+		background-image: url("./img/loadingb.gif");
+		background-repeat:no-repeat;
+	}
 	</style>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" media='screen and (min-width: 801px)' href='./<?php echo themes("file","css/style.css")?>?id=<?php echo mt_rand(1000, 2500); ?>' />
+	<link rel="stylesheet" media='screen and (max-width: 800px)' href='./<?php echo themes("file","css/mobile.css")?>?id=<?php echo mt_rand(1000, 2500); ?>' />
+	<link rel="stylesheet" href='./<?php echo ($user_settings['theme'] == "custom" ? themes("file","css/color.php") : themes("file","css/color.css"))?>?id=<?php echo mt_rand(1000, 2500); ?>' />
+	<link rel="stylesheet" href="./css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->
+	<link rel="stylesheet" href="./css/animate.css">
+
 </head>
 <body>
 <?php
@@ -74,8 +82,8 @@ if ($logedin) {
 <div class='gotop'><a href='#top'>▲</a></div>
 <div class="topbar" style='text-align:center; background-color:none;'>
 	<div class="topbar" style='position:fixed; top:0px; left:0px; height:45px; z-index:99;'>
-	<span style='float:left; line-height:45px;margin-left:10px;'>
+	<span style='float:left; line-height:45px;padding-left:10px;' class='appname'>
-		<a href="./<?php echo ($logedin ? "?mode=home" : ""); ?>" style="font-family: 'patua', serif; font-weight:bold; color:white; font-size:20px; text-decoration:none"><?php echo $setting['appname']; ?></a>
+		<a href="./<?php echo ($logedin ? "?mode=home" : ""); ?>" style="font-family: 'patua', serif; font-weight:bold; color:white; font-size:20px; text-decoration:none" ><?php echo $setting['appname']; ?></a>
 	</span>
 
 	<?php if ($logedin): ?>

layout/sidebar.php

@@ -1,14 +1,12 @@
 <aside>
 <?php
-$info = api_get("accounts/verify_credentials");
-
 if ($logedin || $tl['mode'] == 'user') {
 	echo "
 		<div class='side_element' style='margin:0px; width:100%;'>
-			<div style='width:100%; height:120px; display:block; background-color:#" . averageColor($info['avatar']) . "; background-size:cover; background-image:url(" . $info['header_static'] . "); '></div>
+			<div style='width:100%; height:120px; display:block; background-color:#" . averageColor($info['avatar']) . "; background-size:cover; background-image:url(" . $info['header_static'] . "); ' class='profileheader'></div>
 			<div class='avatar' style='background-color:white; background-image:url(" . $info['avatar'] . "); text-align:center; float:none; display:inline-block; border:3px solid white; margin-top:-50px; border-radius:90px;'></div>
 			<div style='clear:both; margin-top:-15px; padding-bottom:10px;'>" . ($logedin ? "<a href='?mode=account' class='ldr'>" : "") . "<span style='font-weight:bold; font-size:22px;'>
-				" . $info['display_name'] . "</span>" . ($logedin ? "</a>" : "") . "
+				" . emojify($info['display_name'], $info['emojis'], 20). "</span>" . ($logedin ? "</a>" : "") . "
 				<br><span>(@" . $info['acct'] . ")</span>
 			</div>
 		</div>

login/index.php

@@ -9,7 +9,7 @@ include "../include/functions.php";
 $message = "";
 
 if (isset($_POST['user']) || isset($_GET['instance'])){ 
-	$instance = (isset($_POST['user']) ? htmlentities($_POST['user']) : htmlentities($_GET['instance']));
+	$instance = strtolower((isset($_POST['user']) ? htmlentities($_POST['user']) : htmlentities($_GET['instance'])));
 	$check = json_decode(file_get_contents("https://$instance/api/v1/instance"),true);
 	
 	if(is_null($check['title'])){

logout/index.php

@@ -1,4 +1,4 @@
 <?php
ini_set('display_errors', 1);
ini_set("log_errors", 1);
 include "../settings.php";
include "../include/init.php";
include "../include/functions.php";
 $cdata = parse_url($setting['url']);
-unset($_COOKIE['token']);
setcookie('token','',-1,$cdata['path'],$cdata['host']);

unset ($user_settings['pleroma']);
unset ($user_settings['acct']);
unset ($user_settings['username']);
unset ($user_settings['avatar']);
unset ($user_settings['uid']);
setrawcookie("user_settings",base64_encode(json_encode($user_settings)),time()+60*60*24*30,'/'); 

header('Location: '.$setting['url']);
+unset($_COOKIE['token']);
setcookie('token','',-1,$cdata['path'],$cdata['host']);
setcookie('user_settings','',-1,$cdata['path'],$cdata['host']);

/*
unset ($user_settings['pleroma']);
unset ($user_settings['acct']);

unset ($user_settings['pleroma']);

unset ($user_settings['acct']);

unset ($user_settings['username']);

unset ($user_settings['avatar']);

unset ($user_settings['uid']);


header('Location: '.$setting['url']);

modules/settings.php

@@ -3,11 +3,39 @@
 	<div class='post' style='text-align:left;'>
 		<div style='padding:15px; width:90%; text-align:left; display:inline-block;' id="settings">
 			<h1><span class='fontello' style='font-size:inherit;'>&#xe82e;</span> Settings</h1>
-			<form method='GET'>
+			<form method='post' enctype="multipart/form-data">
 			<input type='hidden' name='action' value='settings'>
 			<br>
-			<fieldset style='width:100%'>
+			<?php if ($logedin): ?>
+			<fieldset>
+			<legend>Account</legend>
+				<h2>Username</h2>
+				<div class='setting'>
+					<input type='text' name='username' value='<?php echo $info['display_name']; ?>'>
+				</div>
+				
+				<h2>Bio</h2>
+				<div class='setting'>
+					<textarea name='bio' style='width:85%; height:100px'><?php
+							echo trim(strip_tags(str_replace("<br/>","\n",$info['note'])));
+						?></textarea>
+				</div>
+				
+				<h2>Avatar</h2>
+				<div class='setting'>
+					<div class='avatar' style='height:80px; background-image:url("<?php echo $info['avatar']; ?>"); background-size:80px; margin-top:0px !important; margin-left:0px !important;'></div><input type='file' name='avatar'>
+				</div>
+				
+				<div style='clear:both;'></div>
+				<h2>Header</h2>
+				<div class='setting' style='clear:both;'>
+					<div style='height:150px; width:300px; max-width:85%; background-image:url("<?php echo $info['header']; ?>"); background-size:cover; background-repeat: no-repeat; margin-top:0px !important; margin-left:0px !important;'></div><input type='file' name='header'>
+				</div>
+			</fieldset>
+			<?php endif; ?>
+			<fieldset>
 			<legend>Timeline</legend>
+			<?php if ($logedin): ?>
 				<h2>Show replies</h2>
 				<div class='setting'>
 					<select name="replies">
@@ -15,7 +43,7 @@
 						<option value="off" <?php echo ($user_settings['replies'] == 'off' ? "selected" : ""); ?>>Only to people i follow</option>
 					</select>
 				</div>
-
+			<?php endif; ?>
 				<h2>Show text-only posts</h2>
 				<div class='setting'>
 					<input type='radio' name='text' id='textOn' value='on' style='display:none;' <?php echo ($user_settings['text'] == 'on' ? "checked" : ""); ?>>
@@ -35,7 +63,7 @@
 				<h2>Muted words</h2>
 				<span>One per line</span>
 				<div class='setting'>
-					<textarea name='mtwords' style='width:300px'><?php
+					<textarea name='mtwords' style='width:85%;'><?php
 							foreach($user_settings['mtwords'] as $word){
 								echo (empty($word) ? "" : trim($word)."\n");
 							}
@@ -43,7 +71,7 @@
 				</div>
 			</fieldset>
 			
-			<fieldset style='width:100%'>
+			<fieldset>
 			<legend>Attachments</legend>
 				<h2>Hide Attachments, show a link instead.</h2>
 				<div class='setting'>
@@ -72,7 +100,7 @@
 				</div>
 			</fieldset>
 			
-			<fieldset style='width:100%'>
+			<fieldset>
 			<legend>User Interface</legend>
 				<h2>Theme.</h2>
 				<select name='theme' onChange='themecheck(this)'>
@@ -107,7 +135,7 @@
 			</fieldset>
 			<br><br>
 			<br><br>
-			<input type="submit" value="Save" id="send" onClick='return false;'>
+			<input type="submit" value="Save" id="send">
 			</form>
 		</div>
 	</div>

modules/timeline.php

@@ -293,7 +293,7 @@ if ((!isset($thread[0]['id']) && !empty($thread)) || !is_array($thread)) {
 
 		/* the code of the post footer (date, visibility and like/reblog buttons */
 		$post['footer'] = "<div style='float:left;'>
-							<a style='text-decoration:none;' class='ldr postAge' id='".strtotime($elem['created_at'])."' target='_blank' href='?thread=" . $elem['id'] . "&instance=$srv" . "' title='".gmdate("d/m/y H:i", strtotime($elem['created_at']))."'>" .time_elapsed_string($elem['created_at'])  . "</a> - <span class='fontello'>" . $$elem['visibility'] . " </span> 
+							<a style='text-decoration:none;' class='ldr postAge' id='".strtotime($elem['created_at'])."' target='_blank' href='?thread=" . $elem['id'] . "' title='".gmdate("d/m/y H:i", strtotime($elem['created_at']))."'>" .time_elapsed_string($elem['created_at'])  . "</a> - <span class='fontello ".$elem['visibility']."'> </span> 
 					</div>
 					<div class='post_buttons' id='" . $elem['id'] . "'>
 					" . ($logedin ? "<div class='felem'><a onClick='return false' class='replyform' href='?thread=" . $elem['id'] . "' style='font-family:fontello; vertical-align:middle;' alt='reply'>&#xf112;</a></div>" : "") . "

templates/post.txt

@@ -1,5 +1,5 @@
 <div class='element'>
-	<div class='avatar' style='background-image:url(:avatar:) :style:'></div>
+	<div class='avatar desktop' style='background-image:url(:avatar:) :style:'></div>
 	<div class='post' id=':id:' pid=':pid:'>
 		<div id='a:id:' class='ancestors'>:ancestors:</div>
 		<div class='postHeader'>

templates/reply.txt

@@ -7,7 +7,7 @@
 			</a>
 			<span class='desktop'>(:acct:)</span>
 		</span>
-		<span style='margin:10px; float:right; display:block;'>
+		<span style='margin:12px; float:right; display:block;'>
 			<span class='postMenu fontello'>&#xf0c9;
 				<div style='display:none; z-index:99; width:130px; position: absolute; top: 15px; right: -1px;' class='menu'>:menu:</div>
 			</span>

templates/replyform.txt

@@ -5,7 +5,7 @@
 		<input type='hidden' id='thread' name='thread' value=':id:'>
 		<div style='width:100%; border: 1px solid #ddd; text-align:left;'>
 			<div style='width:100% height:27px; border-bottom: 1px solid #ddd;'>
-				<input type='text' name='spoiler' value='Title (optional)' onClick='this.value=""' style='border:none; width:100%;'>
+				<input type='text' name='spoiler' placeholder='Title (optional)' style='border:none; width:100%;'>
 			</div>
 			<textarea name='status' id="status" style='width:100%; height:100px; border:none;'>:content:</textarea>
 		</div>

templates/textpost.txt

@@ -1,5 +1,5 @@
 <div class='element'>
-	<div class='avatar' style='background-image:url(:avatar:) :style:'></div>
+	<div class='avatar desktop' style='background-image:url(:avatar:) :style:'></div>
 	<div class='post' id=':id:' pid=':pid:'>
 		<div id='a:id:' class='ancestors'>:ancestors:</div>
 		<div class='postHeader'>

themes/1994/css/color.css

@@ -29,20 +29,14 @@ label {
 }
 
 input[type="submit"] {
+	border: 2px outset #f2e0f5 !important;
 	background-color: #b967ff;
-	border-top:2px solid #ffffff;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	color:white; 
 }
 
 textarea,input[type="text"],.notifpic{
 	background-color:#c8f7f5;
-	border-bottom:2px solid #ffffff !important;
+	border: 2px inset #f2e0f5 !important;
-	border-right:2px solid #ffffff !important;
-	border-top:2px solid #828282 !important;
-	border-left:2px solid #828282 !important;
 	color:#692b84;
 	text-shadow: 1px 1px white;
 }
@@ -56,7 +50,7 @@ textarea{
 
 .media{
 	border-bottom:2px solid #ffffff !important;
-	border-top:2px solid #828282 !important;
+	border-top:2px solid #a46aaa !important;
 }
 
 input[type="radio"]:checked+label {
@@ -113,24 +107,13 @@ input[type="checkbox"]:checked+label {
 	text-decoration:underline !important;
 }
 
-#quicksend {
-	background-color: #efd7f3;
-	border-top:2px solid #ffffff;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
-}	
-
 .new {
 	background-color:#efd7f3;
 }
 
 .side_element {
 	background-color: #efd7f3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #f2e0f5 !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 }
 
 .side_element li:hover {
@@ -165,10 +148,7 @@ input[type="checkbox"]:checked+label {
 
 .profile,.loader,.menu,.notif {
 	background-color: #efd7f3 !important;
-	border-top:2px solid #ffffff;
+	border: 2px outset #f2e0f5 !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 }
 
 .menu li {
@@ -181,20 +161,14 @@ input[type="checkbox"]:checked+label {
 
 .postMenu {
 	background-color: #efd7f3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #f2e0f5 !important; 
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	color:black;
-	padding:1px;
+	padding:2px;
 }
 
 .postMenu div{
 	background-color: #efd7f3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #f2e0f5 !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	color:black;
 	box-shadow: 1px 1px 2px black;
 }
@@ -265,31 +239,24 @@ input[type="checkbox"]:checked+label {
 	color: red !important;
 }
 
+.loadingImage{
+	width:100px;
+	height:100px;
+	background-image: url("../loadingb.gif");
+	background-repeat:no-repeat;
+}
+
 .post,
 .rb,
 .textonly,
-.loadmore {
+.loadmore, .postform,.searchmobile {
 	background-color: #efd7f3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #f2e0f5 !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
-}
-
-.postform,.searchmobile {
-	background-color: #efd7f3;
-	border-top:2px solid #ffffff;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 }
 
 .previewpost,.userinfo {
 	background-color: #efd7f3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #f2e0f5 !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	box-shadow: 1px 1px 1px rgba(0,0,0,0.8);
 	color:black !important;
 }
@@ -329,20 +296,14 @@ input[type="checkbox"]:checked+label {
 
 .polloption{
 	background-color: #efd7f3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #f2e0f5 !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	display:block;
 	margin:5px;
 	padding:5px;
 }
 
 .polloption:hover:not(.fixed),.voted{
-	border-bottom:2px solid #ffffff;
+	border: 2px inset #f2e0f5 !important;
-	border-right:2px solid #ffffff;
-	border-top:2px solid #828282;
-	border-left:2px solid #828282;
 	cursor: pointer;
 	background-color:#c8f7f5;
 }
@@ -352,13 +313,26 @@ input[type="checkbox"]:checked+label {
 }
 
 .post_footer {
-	border-bottom:2px solid #ffffff;
+	border: 2px inset #f2e0f5 !important;
-	border-right:2px solid #ffffff;
-	border-top:2px solid #828282;
-	border-left:2px solid #828282;
 	background-color:#c8f7f5;
 }
 
+.public::after {
+	content: '';
+}
+
+.unlisted::after {
+	content: '';
+}
+
+.private::after {
+	content: '';
+}
+
+.direct::after {
+	content: '';
+}
+
 .notif .post_buttons {
 	color: black;
 	background-color:#efd7f3;
@@ -378,19 +352,13 @@ input[type="checkbox"]:checked+label {
 }
 
 .setting label {
-	background-color:#e2e2e2;
+	background-color:#fff;
-	border-bottom:2px solid #ffffff;
+	border: 2px inset #f2e0f5 !important;
-	border-right:2px solid #ffffff;
-	border-top:2px solid #828282;
-	border-left:2px solid #828282;
 	color:#aaaaaa;
 }
 
 .setting input[type="radio"]:checked+label {
 	background-color: #efd7f3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #f2e0f5 !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	color: black;
 }

themes/1994/css/mobile.css

@@ -433,20 +433,28 @@ aside {
 	display: none;
 	position: absolute;
 	left:0px;
-	top:-198px;
+	top:15px;
 	width: 300px;
-	height: 200px;
+	height: auto;
 	border-radius:3px;
+	line-height:initial;
+	z-index:99;
+}
+
+.userinfo_upper{
+	top:-100px;
 }
 
 .userinfo_co {
 	width: 280px;
 	margin: 10px;
+	text-align: center; 
+	position:relative;
 }
 
 .userinfo_he {
 	width: 300px;
-	height: 100px;
+	height: 150px;
 }
 
 .media {

themes/1994/css/style.css

@@ -365,13 +365,14 @@ aside {
 
 .avatar {
 	width: 80px;
-	background-size: 80px;
 	height: 80px;
 	float: left;
 	margin: 15px;
 	border-radius: 10px;
+	background-size: auto 80px;
 }
 
+
 .post,
 .rb,
 .textonly,

themes/ancientbird/css/color.css

@@ -1,9 +1,9 @@
 a, .link {
-	color: #04a0c6;
+	color: #048fb3;
 }
 
 body {
-	background-color: #7dbcda;
+	background-color: #c4e0ee;
 }
 
 select{
@@ -23,12 +23,12 @@ input[type="checkbox"]:checked+label {
 	color: red;
 }
 
-input[type="text"] {
+input[type="text"]:not([name="spoiler"]),textarea {
-	border:0px;
+	border:1px solid #aaa !important;
 }
 
 .topbar {
-	background-color: #373737;
+	background-image: linear-gradient(#2e2c2e, #090a14);
 }
 
 .gotop {
@@ -76,7 +76,7 @@ input[type="text"] {
 }
 
 .toggleblur{
-	background-color: #04a0c6;
+	background-color: #048fb3;
 	color: #373737;
 }
 
@@ -87,7 +87,7 @@ input[type="text"] {
 	background-color: white;
 	border:2px solid #7dbcda;
 	border-radius:7px;
-	color:#04a0c6;
+	color:#048fb3;
 	font-weight:bold;
 }
 
@@ -99,7 +99,7 @@ input[type="text"] {
 }
 
 .voteBar{
-	background-color: #04a0c6;
+	background-color: #048fb3;
 }
 
 .new {
@@ -108,7 +108,13 @@ input[type="text"] {
 
 .side_element {
 	background-color: white;
-	color: #04a0c6;
+	color: #048fb3;
+	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+	border-radius:5px;
+}
+
+.side_element .avatar {
+	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .side_element li:hover {
@@ -120,7 +126,7 @@ input[type="text"] {
 }
 
 .side_element a {
-	color: #04a0c6;
+	color: #048fb3;
 }
 
 .uploadBox {
@@ -133,21 +139,22 @@ input[type="text"] {
 }
 
 input[type="submit"] {
-	background-color:#04a0c6; 
+	background-color:#048fb3; 
-	border: 1px solid #04a0c6; 
+	border: 1px solid #048fb3; 
 	color:white; 
 }
 
 .formbtn {
-	color:#04a0c6; 
+	color:#048fb3; 
 }
 
 .formbtn label{
-	color:#04a0c6; 
+	color:#048fb3; 
 }
 
 .profile,.loader {
 	background-color:white; 
+	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .menu,.menu li {
@@ -228,11 +235,15 @@ input[type="submit"] {
 .loadmore {
 	background-color: white;
 	border: 1px solid #8fa9b8;
+	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+	border-radius:5px;
 }
 
 .postform,.searchmobile {
 	background-color: white;
-	border: 1px solid #8fa9b8
+	border: 1px solid #8fa9b8;
+	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+	border-radius:5px;
 }
 
 .previewpost {
@@ -255,6 +266,22 @@ input[type="submit"] {
 	background-color: #eee;
 }
 
+.public::after {
+	content: '';
+}
+
+.unlisted::after {
+	content: '';
+}
+
+.private::after {
+	content: '';
+}
+
+.direct::after {
+	content: '';
+}
+
 .post_buttons {
 	color: #0b82d2;
 }
@@ -278,7 +305,7 @@ input[type="submit"] {
 }
 
 .setting input[type="radio"]:checked+label {
-	background-color:#04a0c6; 
+	background-color:#048fb3; 
 	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 	color: white;
 }

themes/ancientbird/css/mobile.css

@@ -435,20 +435,28 @@ aside {
 	display: none;
 	position: absolute;
 	left:0px;
-	top:-198px;
+	top:15px;
 	width: 300px;
-	height: 200px;
+	height: auto;
 	border-radius:3px;
+	line-height:initial;
+	z-index:99;
+}
+
+.userinfo_upper{
+	top:-100px;
 }
 
 .userinfo_co {
 	width: 280px;
 	margin: 10px;
+	text-align: center; 
+	position:relative;
 }
 
 .userinfo_he {
 	width: 300px;
-	height: 100px;
+	height: 150px;
 }
 
 .media {

themes/ancientbird/css/style.css

@@ -365,11 +365,11 @@ aside {
 
 .avatar {
 	width: 80px;
-	background-size: 80px;
 	height: 80px;
 	float: left;
 	margin: 15px;
 	border-radius: 10px;
+	background-size: auto 80px;
 }
 
 .post,

themes/bythebook/css/color.css

@@ -255,6 +255,22 @@ input[type="submit"] {
 	border-top:2px solid #dedfe1;
 }
 
+.public::after {
+	content: '';
+}
+
+.unlisted::after {
+	content: '';
+}
+
+.private::after {
+	content: '';
+}
+
+.direct::after {
+	content: '';
+}
+
 .post_buttons {
 	color: #425f99;
 }

themes/chicago/css/color.css

@@ -17,10 +17,7 @@ label {
 
 textarea,input[type="text"]{
 	background-color:white;
-	border-bottom:2px solid #ffffff !important;
+	border: 2px inset #fff !important;
-	border-right:2px solid #ffffff !important;
-	border-top:2px solid #828282 !important;
-	border-left:2px solid #828282 !important;
 }
 
 .media{
@@ -88,10 +85,7 @@ input[type="checkbox"]:checked+label {
 
 .side_element {
 	background-color: #c3c3c3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #fff !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 }
 
 .side_element li:hover {
@@ -118,10 +112,7 @@ input[type="checkbox"]:checked+label {
 
 input[type="submit"] {
 	background-color: #c3c3c3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #fff !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	color:black; 
 }
 
@@ -135,10 +126,7 @@ input[type="submit"] {
 
 .profile,.loader,.menu,.notif {
 	background-color: #c3c3c3 !important;
-	border-top:2px solid #ffffff;
+	border: 2px outset #fff !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 }
 
 .menu li {
@@ -151,20 +139,14 @@ input[type="submit"] {
 
 .postMenu {
 	background-color: #c3c3c3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #fff !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	color:black;
-	padding:1px;
+	padding:2px;
 }
 
 .postMenu div{
 	background-color: #c3c3c3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #fff !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	color:black;
 	box-shadow: 1px 1px 2px black;
 }
@@ -235,6 +217,10 @@ input[type="submit"] {
 	color: red !important;
 }
 
+.loadingImage{
+	background-image: url("../loadingb.gif") !important;
+}
+
 .post,
 .rb,
 .textonly,
@@ -242,18 +228,12 @@ input[type="submit"] {
 .postform,
 .searchmobile {
 	background-color: #c3c3c3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #fff !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 }
 
 .previewpost,.userinfo {
 	background-color: #c3c3c3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #fff !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	box-shadow: 1px 1px 1px rgba(0,0,0,0.8);
 	color:black;
 }
@@ -290,19 +270,13 @@ input[type="submit"] {
 	margin:5px;
 	padding:5px;
 	background-color: #c3c3c3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #fff !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	color:black; 
 }
 
 .polloption:hover:not(.fixed),.voted{
 	cursor: pointer;
-	border-bottom:2px solid #ffffff ;
+	border: 2px inset #fff !important;
-	border-right:2px solid #ffffff;
-	border-top:2px solid #828282;
-	border-left:2px solid #828282;
 }
 
 .voteBar{
@@ -310,10 +284,47 @@ input[type="submit"] {
 }
 
 .post_footer {
-	border-bottom:2px solid #ffffff;
+	border: 2px inset #fff !important;
-	border-right:2px solid #ffffff;
+}
-	border-top:2px solid #828282;
+
-	border-left:2px solid #828282;
+.public{
+	display:inline-block;
+	width:17px;
+	height:17px;
+	background-image: url("../public.gif");
+	background-size:auto 17px;
+	vertical-align:middle;
+	background-repeat:no-repeat;
+}
+
+.unlisted{
+	display:inline-block;
+	width:17px;
+	height:17px;
+	background-image: url("../unlisted.gif");
+	background-size:auto 17px;
+	vertical-align:middle;
+	background-repeat:no-repeat;
+}
+
+.private{
+	display:inline-block;
+	width:17px;
+	height:17px;
+	background-image: url("../private.gif");
+	background-size:auto 17px;
+	vertical-align:middle;
+	background-repeat:no-repeat;
+}
+
+.direct{
+	display:inline-block;
+	width:17px;
+	height:17px;
+	background-image: url("../direct.gif");
+	background-size:auto 17px;
+	vertical-align:middle;
+	background-repeat:no-repeat;
 }
 
 .notif .post_buttons {
@@ -336,18 +347,12 @@ input[type="submit"] {
 
 .setting label {
 	background-color:#e2e2e2;
-	border-bottom:2px solid #ffffff;
+	border: 1px inset #fff !important;
-	border-right:2px solid #ffffff;
-	border-top:2px solid #828282;
-	border-left:2px solid #828282;
 	color:#aaaaaa;
 }
 
 .setting input[type="radio"]:checked+label {
 	background-color: #c3c3c3;
-	border-top:2px solid #ffffff;
+	border: 2px outset #fff !important;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	color: black;
 }

themes/cuatro/css/color.css

@@ -185,6 +185,10 @@ input[type="submit"] {
 	color: red !important;
 }
 
+.loadingImage{
+	background-image: url("../loadingb.gif") !important;
+}
+
 .post,
 .rb,
 .textonly,
@@ -241,6 +245,22 @@ input[type="submit"] {
 	border-top:2px solid #eeaa88;
 }
 
+.public::after {
+	content: '';
+}
+
+.unlisted::after {
+	content: '';
+}
+
+.private::after {
+	content: '';
+}
+
+.direct::after {
+	content: '';
+}
+
 .post_buttons {
 	color: #425f99;
 }

themes/custom/css/color.php

@@ -300,6 +300,22 @@ input[type="submit"] {
 	border-radius: 0px 0px <?php echo $theme['br']; ?>px <?php echo $theme['br']; ?>px;
 }
 
+.public::after {
+	content: '';
+}
+
+.unlisted::after {
+	content: '';
+}
+
+.private::after {
+	content: '';
+}
+
+.direct::after {
+	content: '';
+}
+
 .post_buttons {
 	color: #404040;
 }

themes/how_to_create_a_theme

@@ -0,0 +1,8 @@
+If you want to create a new theme for your instance, all you have to do is 
+create a new folder in this /themes directory with the name of your theme, 
+create a directory called "css" inside of it, copy the file /css/color.css
+from the base directory into this new directory and modify the values in 
+it.
+
+you can also just copy of one of the theme folders in this directory
+and modify the values to your liking.

themes/monad/css/color.css

@@ -92,6 +92,22 @@ input[type="checkbox"]:checked+label {
 	box-shadow: 0px 0px 7px #000;
 }
 
+.public::after {
+	content: '';
+}
+
+.unlisted::after {
+	content: '';
+}
+
+.private::after {
+	content: '';
+}
+
+.direct::after {
+	content: '';
+}
+
 .side_element li:hover {
 	background-color: rgba(255, 255, 255, 0.25);
 }

themes/monad/css/mobile.css

@@ -443,20 +443,28 @@ aside {
 	display: none;
 	position: absolute;
 	left:0px;
-	top:-198px;
+	top:15px;
 	width: 300px;
-	height: 200px;
+	height: auto;
 	border-radius:3px;
+	line-height:initial;
+	z-index:99;
+}
+
+.userinfo_upper{
+	top:-100px;
 }
 
 .userinfo_co {
 	width: 280px;
 	margin: 10px;
+	text-align: center; 
+	position:relative;
 }
 
 .userinfo_he {
 	width: 300px;
-	height: 100px;
+	height: 150px;
 }
 
 .media {

themes/monad/css/style.css

@@ -374,11 +374,11 @@ aside {
 
 .avatar {
 	width: 80px;
-	background-size: 80px;
 	height: 80px;
 	float: left;
 	margin: 15px;
 	border-radius: 10px;
+	background-size: auto 80px;
 }
 
 .post,

themes/phubbub/css/color.css

@@ -218,6 +218,22 @@ textarea,input[type="text"]{
 	border-top:2px solid #2f2f2f;
 }
 
+.public::after {
+	content: '';
+}
+
+.unlisted::after {
+	content: '';
+}
+
+.private::after {
+	content: '';
+}
+
+.direct::after {
+	content: '';
+}
+
 .polloption{
 	display:block;
 	margin:5px;

themes/whistler/css/color.css

@@ -1,13 +1,13 @@
 a, .link {
-	color: #04e703;
+	color: #042eb8;
 }
 
 body {
-	background-color: #3a6ea5;
+	background-image: url("../wallpaper.jpg");
 }
 
 .element div, .element span, .element p{
-	color:white;
+	color:black;
 }
 
 select{
@@ -36,9 +36,16 @@ input[type="checkbox"]:checked+label {
 }
 
 .topbar {
-	background-color: #d4d0c8;
+	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-	border-bottom:2px solid #a9b5bf;
+}
-	box-shadow: 2px 2px 4px #000000;
+
+.appname {
+	background-image: linear-gradient(#48ab49, #69c069, #48ab49, #48ab49, #3f943f);
+	padding-right:20px;
+	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7) inset;
+	border-radius: 0px 20px 20px 0px;
+	border-bottom: 3px solid black;
+	line-height:43px !important;
 }
 
 .gotop {
@@ -49,16 +56,12 @@ input[type="checkbox"]:checked+label {
 	color: white;
 }
 
-.topicon {
+.topicon,.badge {
-	color: black;
+	color: white;
 }
 
 .tiselected {
-	border-bottom: 2px solid black;
+	border-bottom: 2px solid white;
-}
-
-.badge {
-	color: black;
 }
 
 .alert {
@@ -66,7 +69,7 @@ input[type="checkbox"]:checked+label {
 }
 
 #notifications {
-	background-color: #d4d0c8 !important;
+	background-color: #e7e9d4 !important;
 	color:black;
 	box-shadow: 1px 1px 1px black;
 }
@@ -85,15 +88,23 @@ input[type="checkbox"]:checked+label {
 }
 
 .new {
-	background-color:#c3c3c3;
+	background-color:#e7e9d4;
 }
 
 .side_element {
-	background-color: #c3c3c3;
+	background-color: #285bc8;
-	border-top:2px solid #ffffff;
+	border:2px solid #042eb8;
-	border-left:2px solid #ffffff;
+	border-radius:5px;
-	border-bottom:2px solid #828282;
+	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-	border-right:2px solid #828282;
+	color:white;
+}
+
+.profileheader{
+	border-bottom:2px solid white;
+}
+
+.profileButton{
+	color:white !important;
 }
 
 .side_element li:hover {
@@ -105,8 +116,12 @@ input[type="checkbox"]:checked+label {
 	background-color: rgba(255, 255, 255, 0.25);
 }
 
-.side_element a, .userinfo a, .userinfo .ldr {
+.userinfo a, .userinfo .ldr {
-	color: black !important;
+	color: #042eb8 !important;
+}
+
+.side_element a {
+	color:white;
 }
 
 .uploadBox,.picker {
@@ -119,11 +134,9 @@ input[type="checkbox"]:checked+label {
 }
 
 input[type="submit"] {
-	background-color: #c3c3c3;
+	background-image: linear-gradient(to bottom, #fffffc, #eef1eb);
-	border-top:2px solid #ffffff;
+	border:2px solid #426fc4;
-	border-left:2px solid #ffffff;
+	border-radius:3px;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
 	color:black; 
 }
 
@@ -135,8 +148,16 @@ input[type="submit"] {
 	color:black; 
 }
 
+.loadingImage{
+	width:100px;
+	height:100px;
+	background-image: url("../loadingb.gif");
+	background-repeat:no-repeat;
+	background-size:100px;
+}
+
 .loader,.menu,.notif {
-	background-color: #d4d0c8!important;
+	background-color: #e7e9d4 !important;
 	border-top:2px solid #ffffff;
 	border-left:2px solid #ffffff;
 	border-bottom:2px solid #828282;
@@ -148,20 +169,27 @@ input[type="submit"] {
 }
 
 .menu li {
-	background-color: #d4d0c8!important;
+	background-color: #e7e9d4 !important;
 }
 
 #usermenu .menu {
-	background-color: #6B91B6;
+	background-color: #e7e9d4;
+}
+
+.postHeader .postMenu {
+	color:white !important;
+	padding:5px;
+	background-image: linear-gradient(to bottom right, #f4a088, #be4e29);
+	border-radius:4px;
+	border:1px solid white;
 }
 
 .postMenu {
-	color:#d3b870 !important;
+	background-color: #e7e9d4 !important;
-	padding:1px;
 }
 
 .postMenu div{
-	background-color: #c3c3c3;
+	background-color: #e7e9d4 !important;
 	border-top:2px solid #ffffff;
 	border-left:2px solid #ffffff;
 	border-bottom:2px solid #828282;
@@ -171,7 +199,7 @@ input[type="submit"] {
 }
 
 .postMenu li{
-	background-color: #c3c3c3;
+	background-color: #e7e9d4;
 	color:black;
 }
 
@@ -191,7 +219,7 @@ input[type="submit"] {
 
 .listmenu li {
 	background-color:black;
-	color:white;
+	color:black !important;
 }
 
 .listmenu li:hover {
@@ -241,31 +269,16 @@ input[type="submit"] {
 .rb,
 .textonly,
 .loadmore,
-.searchmobile {
+.searchmobile,.postform {
-	background-color: #383858;
+	background-color: #e7e9d4;
-	border-top:2px solid #6a6a82;
+	border:2px solid #042eb8;
-	border-left:2px solid #6a6a82;
+	border-radius:5px;
-	border-bottom:2px solid #26263c;
+	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-	border-right:2px solid #26263c;
-	box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.5), 0 1px rgba(255, 255, 255, 0.1);
-}
-
-.postform {
-	background-color: #c3c3c3;
-	border-top:2px solid #ffffff;
-	border-left:2px solid #ffffff;
-	border-bottom:2px solid #828282;
-	border-right:2px solid #828282;
-	box-shadow: 2px 2px 4px #000000;
 }
 
 .previewpost,.userinfo {
-	background-color: #383858 !important;
+	background-color: #e7e9d4 !important;
-	border-top:2px solid #6a6a82;
+	border:3px solid #042eb8;
-	border-left:2px solid #6a6a82;
-	border-bottom:2px solid #26263c;
-	border-right:2px solid #26263c;
-	box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.5), 0 1px rgba(255, 255, 255, 0.1);
 }
 
 .userinfo_he a{
@@ -276,12 +289,28 @@ input[type="submit"] {
 	background-color: black;
 }
 
-.postHeader {
+.postHeader,.topbar {
+	 background-image: linear-gradient(#3091ff, #0053e1,#0053e1, #0053e1, #0058ef,#0058ef,#0058ef ,#0058ef, #0060f9, #0060f9, #0060f9, #0060f9); 
+	/*https://pythonhosted.org/pyglet/programming_guide/window_xp_default.png */
+	/* background-image: linear-gradient(#0055e0, #0063f9); */
 	color:white;
+	border-top:2px solid #3a90ff;
+	border-bottom:3px solid #1047ab;
+}
+
+.reply .postHeader{
+	background-image: none !important; 
+	background-color: #7b97e1 !important;
+	color:white;
+	border: 0px !important;
 }
 
 .postHeader a, .postHeader .link {
-	color: #d3b870 !important;
+	color: white;
+}
+
+.postHeader, .postHeader span {
+	color: white;
 }
 
 .toggleblur{
@@ -289,46 +318,54 @@ input[type="submit"] {
 	color:white;
 }
 
-.post_footer {
-	box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.5), 0 1px rgba(255, 255, 255, 0.1);
-	border-bottom:2px solid #6a6a82;
-	border-right:2px solid #6a6a82;
-	border-top:2px solid #26263c;
-	border-left:2px solid #26263c;
-	background-color:black;
-}
-
 .polloption{
 	display:block;
-	box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.5), 0 1px rgba(255, 255, 255, 0.1);
+	background-color:white;
-	border-bottom:2px solid #6a6a82;
+	border:2px solid #707069;
-	border-right:2px solid #6a6a82;
+	border-radius:3px;
-	border-top:2px solid #26263c;
+	color:black !important; 
-	border-left:2px solid #26263c;
 	margin-bottom:2px;
 	padding:5px;
-	background-color: black;
-	color:#04e703 !important;
 }
 
 .polloption:hover:not(.fixed),.voted{
-	background-color: #04e703;
-	color:black !important;
 	cursor:pointer;
+	background-color: #285bc8;
+	color:white !important;
 }
 
 .voteBar{
-	background-color: #04e703;
+	background-image: linear-gradient(#b4e6b8, #39c04d, #b4e6b8); 
+}
+
+.post_footer{
+	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2) inset;
+}
+
+.public::after {
+	content: '';
+}
+
+.unlisted::after {
+	content: '';
+}
+
+.private::after {
+	content: '';
+}
+
+.direct::after {
+	content: '';
 }
 
 .post_footer .post_buttons a, .post_footer span{
-	color: #04e703;
+	color: #042eb8;
 }
 
 .reply {
-	background-color: #20193d !important;
+	background-color: #f0f1e4 !important;
-	border-top:2px solid #6a6a82;
+	border-top:0px solid #6a6a82;
-	border-bottom:2px solid #26263c;
+	border-bottom:0px solid #26263c;
 	/* box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.5), 0 1px rgba(255, 255, 255, 0.1); */
 }
 
@@ -341,19 +378,15 @@ input[type="submit"] {
 }
 
 .setting label {
-	background-color:#e2e2e2;
+	background-color: white;
-	border-bottom:2px solid #ffffff;
+	border:2px solid white;
-	border-right:2px solid #ffffff;
+	border-radius:3px;
-	border-top:2px solid #828282;
+	color:black; 
-	border-left:2px solid #828282;
-	color:#aaaaaa;
 }
 
 .setting input[type="radio"]:checked+label {
-	background-color: #c3c3c3;
+	background-color: #426fc4;
-	border-top:2px solid #ffffff;
+	border:2px solid #426fc4;
-	border-left:2px solid #ffffff;
+	border-radius:3px;
-	border-bottom:2px solid #828282;
+	color:white; 
-	border-right:2px solid #828282;
-	color: black;
 }

themes/whistler/css/mobile.css

@@ -0,0 +1,673 @@
+/* overall */
+* {
+	font-family: arial, helvetica, sans-serif;
+	font-size: 12pt;
+}
+
+html,body{
+	height:100%;
+}
+
+a {
+	text-decoration:none;
+}
+
+h1 {
+	font-size:20px;
+}
+
+p {
+	margin: 0px !important;
+}
+
+body {
+	margin: 0;
+}
+
+body {
+	background-attachment: fixed;
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    background-position: left top;
+}
+
+ul{
+	padding:0px;
+	margin:0px;
+}
+
+select{
+	padding:5px;
+	margin-top:5px;
+	border:0px;
+	font-weight:bold;
+	font-family:fontello, sans-serif;
+}
+	
+option{
+	font-family:fontello, sans-serif;
+	}
+
+label {
+	margin-left: 5px;
+	margin-right: 5px;
+	cursor: pointer;
+}
+
+input[type="file"], .nloadmore {
+	cursor:pointer;
+}
+
+textarea {
+	resize: none;
+}
+
+/* omnipresent */
+
+.desktop{
+	display:none !important;
+}
+
+.link {
+	text-decoration: none;
+}
+
+.external:after{
+		font-family:fontello;
+		font-weight:normal;
+		content: ' ';
+		}
+
+/* basic structure */
+
+.topbar {
+	width: 100vw;
+	height: 45px;
+	margin: 0;
+	position: relative;
+}
+
+.wrapper {
+	width: 100vw;
+	clear: both;
+	display: inline-block;
+	text-align: center;
+}
+
+.container {
+	width: 100% !important;
+	display: inline-block;
+	text-align: center;
+}
+
+#posts {
+	width: 100% !important;
+}
+
+.content {
+	width: 100%;
+	display: inline-block;
+	margin:0px !important;
+	text-align: left;
+	word-break: break-all;
+}
+
+aside {
+	display:none !important;
+}
+
+.gotop {
+	width: 30px;
+	height: 30px;
+	padding: 5px;
+	position: fixed;
+	display: table;
+	text-align: center;
+	right: 20px;
+	bottom: 20px;
+	border-radius: 10px;
+	z-index:50;
+}
+
+.gotop a {
+	text-align: center;
+	display: table-cell;
+	vertical-align: middle;
+	opacity: 0.7;
+	font-size: 20px;
+}
+
+#hiddenside {
+	background-color: rgba(255, 255, 255, 0);
+	position: fixed;
+	left: 0px;
+	bottom: 0px;
+	width: 100vw;
+	height: auto;
+	z-index: 99;
+}
+
+/* topbar elements */
+
+.mid {
+	display:none;
+}
+
+.topbutton {
+	vertical-align: middle;
+	display: table-cell;
+	line-height: 45px;
+	height: 100%;
+	width: 50px;
+	position: relative;
+}
+
+.topicon {
+	text-decoration: none;
+	display: inline;
+	font-size: 20px;
+}
+
+.badge {
+	text-decoration: none;
+}
+
+.alert {
+	border-radius: 90px;
+	width: 10px;
+	height: 10px;
+	position: absolute;
+	right: 15px;
+	top: 15px;
+	display: none;
+}
+
+#notifications {
+	position: fixed;
+	left: 0px;
+	top: 45px;
+	width: 100vw;
+	max-height: 400px;
+	display: none;
+	line-height:12px;
+	overflow-y:scroll;
+	border-radius:3px;
+}
+
+.notif{
+	width:100%;
+	height:80px;
+	display:inline-block;
+	text-align:left;
+	position:relative;
+}
+
+#quicksend {
+	border-radius: 3px;
+	font-weight: bold;
+}	
+
+.notifContents{
+	margin:10px; 
+	display:flex;
+	height:60px; 
+	max-width:325px;
+}
+
+.nloadmore {
+	display:inline-block; 
+	height:20px; 
+	padding-top:10px;
+}
+
+/* sidebar */
+
+.side_element {
+	display:none;
+	width: 92%;
+	margin: 10px;
+	display: inline-block;
+	text-align: center;
+	color: lightgray;
+}
+
+.side_element a {
+	color: lightgray;
+}
+
+/* posts area elements */
+
+.uploadedImage {
+	width: 60px;
+	margin: 10px 0px 10px 10px;
+	height: 60px;
+	border: 1px solid #ccc;
+	display: inline-block;
+	box-shadow: 3px 3px 3px grey;
+	float: left;
+	background-size: cover;
+}
+
+.uploadBox {
+	width: 100%;
+	display: inline-block;
+	border-bottom: 1px solid #ddd;
+}
+
+.delpic {
+	border-radius:90px;
+	display:inline-block;
+	cursor:pointer;
+}
+
+#send {
+	padding:5px; 
+	border-radius:3px; 
+	font-weight:bold; 
+	margin-top:5px;
+}
+	
+.formbtn {
+	background-color:transparent; 
+	border: 0px; 
+	margin-top:11px;
+	margin-left:15px;
+	float:left;
+	width:20px;
+	height:20px;
+	line-height:20px;
+	text-align:center;
+	overflow:hidden; 
+	font-size:20px;
+}
+
+.formbtn label{
+	margin:-5px;
+	font-size:20px;
+}
+
+.element {
+	width: 90% !important;
+	clear: both;
+	display: inline-block;
+	margin-top: 3px;
+}
+
+.profile {
+	float:left; 
+	background-color:white; 
+	border-radius:5px; 
+	//width:650px;
+	width:100%;
+}
+
+.profileButton{
+	padding: 5px;
+	border-radius: 5px;
+	font-family: fontello, sans-serif;
+}
+
+#usermenu .menu {
+	display: none;
+	width: 150px;
+	height: 100px;
+	position: absolute;
+	top: 45px;
+	left: -80px;
+	transition: 0.4s;
+}
+
+#usermenu:hover>.menu,
+#usermenu:active>.menu {
+	display: block;
+	transition: 0.4s;
+}
+
+.postMenu,.listmenu {
+	cursor: pointer;
+	position:relative;
+}
+
+.postMenu div{
+	border-radius: 3px;
+}
+
+.postMenu li {
+	margin:0px;
+	width:100%;
+	height:35px;
+	display:block;
+	text-align:center;
+	line-height:35px;
+}
+
+.postMenu:hover > div{
+	display:block !important;
+}
+
+.postMenu ul {
+	margin:0px;
+	width:100%;
+	padding:0px;
+}
+
+.profileMenu:hover > div, .listmenu:hover > div{
+	display:block !important;
+}
+
+.listmenu li {
+	font-family: fontello, sans-serif;
+	height:30px;
+	line-height:30px;
+	text-align:left;
+	padding-left:12px;
+	list-style-type: none;
+}
+
+.felem {
+	margin-left: 10px;
+	float: left;
+}
+
+.avatar {
+	display:none;
+	width: 50px;
+	background-size: cover;
+	height: 50px;
+	float: left;
+	margin: 15px;
+	border-radius: 10px;
+}
+
+.post,
+.loader,
+.loadmore,
+.rb,
+.textonly,
+.profile {
+	width: 100% !important;
+	float: left;
+	text-align: center;
+	position: relative;
+	border-radius: 3px;
+}
+
+.postform,.searchmobile {
+	position:fixed;
+	width: 100vw !important;
+	left:0px;
+	top:45px;
+	text-align: center;
+	border-radius: 3px;
+	z-index: 99;
+}
+
+#postform,#searchmobile {
+	display:none;
+}
+
+.postHeader {
+	width: 100%;
+	display: inline-block;
+	height: 40px;
+	text-align: left;
+}
+
+.postHeader *,.post_footer *{
+	font-size:small;
+}
+
+.previewpost {
+	display: none;
+	position: absolute;
+	margin-top: -100px;
+	width: 400px;
+	border-radius:3px;
+}
+
+.user {
+	position:relative;
+}
+
+.userinfo {
+	display: none;
+	position: absolute;
+	left:0px;
+	top:15px;
+	width: 300px;
+	height: auto;
+	border-radius:3px;
+	line-height:initial;
+	z-index:99;
+}
+
+.userinfo_upper{
+	top:-100px;
+}
+
+.userinfo_co {
+	width: 280px;
+	margin: 10px;
+	text-align: center; 
+	position:relative;
+}
+
+.userinfo_he {
+	width: 300px;
+	height: 150px;
+}
+
+.media {
+	width: 100%;
+	display: inline-block;
+}
+
+.img {
+	width: 600px;
+	text-align: center;
+}
+
+.blur {
+	-webkit-filter: blur(25px) brightness(70%) grayscale(100%);
+	/* Safari 6.0 - 9.0 */
+	filter: blur(25px) brightness(70%) grayscale(100%);
+	opacity: 0.5;
+	transition: 0.4s;
+}
+
+.toggleblur {
+	display:none;
+	cursor: pointer;
+	font-family: sans, fontello;
+}
+
+.small {
+	width: 48% !important;
+	height: 321px;
+	line-height: 321px;
+	background-color: black;
+	float:left;
+	margin:2px !important;
+}
+
+.smaller {
+	width: 31% !important;
+	height: 212px;
+	line-height: 212px;
+	background-color: black;
+	float:left;
+	margin:2px !important;
+}
+
+.icon {
+	width: 80px !important;
+	height: 80px !important;
+	line-height: 80px;
+	float:left;
+	text-align:center;
+	margin:2px !important;
+}
+
+.postbody {
+	margin: 15px;
+}
+
+.post_footer {
+	width: 630px;
+	display: table-cell;
+	clear: both;
+	padding: 10px;
+	height: 20px;
+	text-align: left;
+	border-radius: 3px;
+}
+
+.post_buttons {
+	font-family: fontello;
+	float: right;
+	display: inline-block;
+	text-align: right;
+	font-size: 15pt;
+}
+
+.post_buttons a,
+.post_buttons span {
+	font-family: inherit;
+	text-decoration: none;
+	color: inherit;
+	font-size: inherit;
+}
+
+.reply {
+	width: 100%;
+	clear: both;
+	text-align: left;
+	display: block;
+}
+
+.note {
+	width: 640px;
+	float: left;
+	text-align: left;
+	border-radius: 5px;
+	padding: 5px;
+}
+
+.button {
+	padding: 15px;
+	float: left;
+	text-align: center;
+	border-radius: 5px;
+	font-size: 20pt;
+}
+
+/* pages */
+
+.setting label {
+	display: block;
+	width: 40px;
+	height: 20px;
+	padding: 5px;
+	float: left;
+	margin: 0px;
+	text-align: center;
+	transition: all 0.3s ease-in-out;
+}
+
+.setting input[type="radio"]:checked+label {
+	font-weight: bold;
+}
+
+/* other stuff */
+
+/* <lightbox> */
+.lightbox-opened {
+	/* background-color: #333; */
+	background-color: rgba(50, 50, 50, 0.85);
+	cursor: pointer;
+	height: 100%;
+	/* left: 0; */
+	overflow-y: scroll;
+	position: fixed;
+	text-align: center;
+	top: 0;
+	width: 100%;
+	z-index:105;
+	&:before {
+		background-color: #333;
+		background-color: rgba(#333, 0.9);
+		color: #eee;
+		content: "x";
+		font-family: sans-serif;
+		padding: 6px 12px;
+		position: fixed;
+		text-transform: uppercase;
+	}
+	img {
+		box-shadow: 0 0 6px 3px #333;
+	}
+}
+/*
+.lightbox-opened {
+	//background-color: #333;
+	background-color: rgba(50, 50, 50, 0.85);
+	cursor: pointer;
+	height: 100%;
+	left: 0;
+	overflow-y: scroll;
+	padding: 24px;
+	position: fixed;
+	text-align: center;
+	top: 0;
+	width: 100%;
+	&:before {
+		background-color: #333;
+		background-color: rgba(#333, 0.9);
+		color: #eee;
+		content: "x";
+		font-family: sans-serif;
+		padding: 6px 12px;
+		position: fixed;
+		text-transform: uppercase;
+	}
+	img {
+		box-shadow: 0 0 6px 3px #333;
+	}
+}
+*/
+.no-scroll {
+	overflow: hidden;
+}
+
+/* </lightbox> */
+
+.fontello {
+	font-family: fontello, sans-serif;
+}
+
+.loading {
+	font-family: fontello;
+	color: black;
+	content: "\E822";
+	animation-name: spin;
+	animation-duration: 5000ms;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	/* transform: rotate(3deg); */
+	/* transform: rotate(0.3rad);/ */
+	/* transform: rotate(3grad); */
+	/* transform: rotate(.03turn);  */
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.disabled {
+	background-color: black;
+}

themes/whistler/css/style.css

@@ -0,0 +1,641 @@
+/* overall */
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+	background-attachment: fixed;
+    background-size: cover;
+}
+
+* {
+	font-family: arial, helvetica, sans-serif;
+	font-size: 11pt;
+}
+
+a {
+	text-decoration: none;
+}
+
+h1 { 
+	font-size:30px;
+}
+
+p {
+	margin: 0px !important;
+}
+
+body {
+	margin: 0;
+}
+
+ul{
+	padding:0px;
+	margin:0px;
+}
+
+select{
+	padding:5px;
+	margin-top:5px;
+	border:0px;
+	font-weight:bold;
+	font-family:fontello, sans-serif;
+}
+	
+option{
+	font-family:fontello, sans-serif;
+}
+
+label {
+	margin-left: 5px;
+	margin-right: 5px;
+	cursor: pointer;
+}
+
+input[type="file"], .nloadmore {
+	cursor:pointer;
+}
+
+textarea {
+	resize: none;
+}
+
+/* omnipresent */
+
+.mobile {
+	display:none !important;
+}
+
+.link {
+	text-decoration: none;
+}
+
+.external:after{
+		font-family:fontello;
+		font-weight:normal;
+		content: ' ';
+		}
+
+/* basic structure */
+
+.topbar {
+	width: 100%;
+	height: 45px;
+	margin: 0;
+	position: relative;
+}
+
+.wrapper {
+	width: 100%;
+	clear: both;
+	display: inline-block;
+	text-align: center;
+}
+
+.container {
+	display: inline-block;
+	text-align: center;
+}
+
+#posts {
+	width: 800px;
+	float: left;
+}
+
+aside {
+	margin-top: 5px;
+	width: 280px;
+	float: left;
+	display: inline-block;
+}
+
+.gotop {
+	width: 30px;
+	height: 30px;
+	padding: 5px;
+	position: fixed;
+	display: table;
+	text-align: center;
+	right: 20px;
+	bottom: 20px;
+	border-radius: 10px;
+}
+
+.gotop a {
+	text-align: center;
+	display: table-cell;
+	vertical-align: middle;
+	opacity: 0.7;
+	font-size: 20px;
+}
+
+#hiddenside {
+	background-color: rgba(255, 255, 255, 0);
+	position: fixed;
+	right: 10px;
+	bottom: 115px;
+	width: 350px;
+	height: auto;
+}
+
+/* topbar elements */
+
+.topbutton {
+	vertical-align: middle;
+	display: table-cell;
+	line-height: 45px;
+	height: 100%;
+	width: 50px;
+	position: relative;
+}
+
+.topicon {
+	text-decoration: none;
+	display: inline;
+	font-size: 20px;
+}
+
+.ntbutton {
+	position:relative;
+}
+
+.badge {
+	text-decoration: none;
+}
+
+.alert {
+	border-radius: 90px;
+	width: 10px;
+	height: 10px;
+	position: absolute;
+	right: 15px;
+	top: 15px;
+	display: none;
+}
+
+#notifications {
+	position: absolute;
+	right: -20px;
+	top: 45px;
+	width: 350px;
+	max-height: 500px;
+	display: none;
+	line-height:12px;
+	overflow-y:scroll;
+	border-radius:3px;
+}
+
+.notif{
+	width:330px;
+	height:80px;
+	display:inline-block;
+	text-align:left;
+	position:relative;
+}
+
+#quicksend {
+	border-radius: 3px;
+	font-weight: bold;
+}	
+
+.notifContents{
+	margin:10px; 
+	display:flex;
+	height:60px; 
+	max-width:325px;
+}
+
+.nloadmore {
+	display:inline-block; 
+	height:20px; 
+	padding-top:10px;
+}
+
+/* sidebar */
+
+.side_element {
+	border-radius: 3px;
+	width: 92%;
+	margin: 10px;
+	display: inline-block;
+	text-align: center;
+}
+
+.side_element li {
+	font-family: fontello, sans-serif;
+	height:30px;
+	line-height:30px;
+	text-align:left;
+	padding-left:12px;
+	list-style-type: none;
+}
+
+/* posts area elements */
+
+.uploadedImage {
+	width: 60px;
+	margin: 10px 0px 10px 10px;
+	height: 60px;
+	border: 1px solid #ccc;
+	display: inline-block;
+	box-shadow: 3px 3px 3px grey;
+	float: left;
+	background-size: cover;
+}
+
+.uploadBox {
+	width: 100%;
+	display: inline-block;
+	border-bottom: 1px solid #ddd;
+}
+
+.delpic {
+	border-radius:90px;
+	display:inline-block;
+	cursor:pointer;
+}
+
+#send {
+	padding:5px; 
+	border-radius:3px; 
+	font-weight:bold; 
+	margin-top:5px;
+	float:left;
+}
+	
+.formbtn {
+	background-color:transparent; 
+	border: 0px; 
+	margin-top:11px;
+	margin-left:15px;
+	float:left;
+	width:20px;
+	height:20px;
+	line-height:20px;
+	text-align:center;
+	overflow:hidden; 
+	font-size:20px;
+}
+
+.formbtn label{
+	margin:-5px;
+	font-size:20px;
+}
+
+.element {
+	width: 800px;
+	clear: both;
+	display: inline-block;
+	margin-top: 5px;
+}
+
+.profile,.loader {
+	float:left; 
+	border-radius:5px;
+	width:650px;
+}
+
+.profileButton{
+	padding: 5px;
+	border-radius: 5px;
+	font-family: fontello, sans-serif;
+}
+
+#usermenu .menu {
+	display: none;
+	width: 150px;
+	height: 100px;
+	position: absolute;
+	top: 45px;
+	left: -80px;
+	transition: 0.4s;
+}
+
+#usermenu:hover>.menu,
+#usermenu:active>.menu {
+	display: block;
+	transition: 0.4s;
+}
+
+.postMenu {
+	cursor: pointer;
+	position:relative;
+}
+
+.postMenu div{
+	border-radius: 3px;
+}
+
+.postMenu li {
+	margin:0px;
+	width:100%;
+	height:35px;
+	display:block;
+	text-align:center;
+	line-height:35px;
+}
+
+.postMenu:hover > div{
+	display:block !important;
+}
+
+.postMenu ul {
+	margin:0px;
+	width:100%;
+	padding:0px;
+}
+
+.profileMenu:hover > div, .listmenu:hover > div{
+	display:block !important;
+}
+
+.listmenu li {
+	font-family: fontello, sans-serif;
+	height:30px;
+	line-height:30px;
+	text-align:left;
+	padding-left:12px;
+	list-style-type: none;
+}
+
+.felem {
+	margin-left: 10px;
+	float: left;
+}
+
+.avatar {
+	width: 80px;
+	height: 80px;
+	float: left;
+	margin: 15px;
+	border-radius: 10px;
+	background-size: auto 80px;
+}
+
+
+.post,
+.rb,
+.textonly,
+.loadmore {
+	width: 650px;
+	float: left;
+	text-align: center;
+	position: relative;
+	border-radius: 3px;
+}
+
+#searchmobile{
+	display:none;
+}
+
+.postform {
+	width:650px;
+	float: left;
+	text-align: center;
+	position: relative;
+	border-radius: 3px;
+	display:block !important;
+}
+
+.postHeader {
+	width: 100%;
+	display: inline-block;
+	height: 40px;
+	text-align: left;
+}
+
+.previewpost {
+	display: none;
+	position: absolute;
+	margin-top: -100px;
+	width: 400px;
+	border-radius:3px;
+}
+
+.user {
+	position:relative;
+}
+
+.userinfo {
+	display: none;
+	position: absolute;
+	left:0px;
+	top:15px;
+	width: 300px;
+	height: auto;
+	border-radius:3px;
+	line-height:initial;
+	z-index:99;
+}
+
+.userinfo_upper{
+	top:-100px;
+}
+
+.userinfo_co {
+	width: 280px;
+	margin: 10px;
+	text-align: center; 
+	position:relative;
+}
+
+.userinfo_he {
+	width: 300px;
+	height: 150px;
+}
+
+.media {
+	width: 100%;
+	display: inline-block;
+}
+
+.img {
+	width: 600px;
+	text-align: center;
+}
+
+.blur {
+	-webkit-filter: blur(25px) brightness(70%) grayscale(100%);
+	/* Safari 6.0 - 9.0 */
+	filter: blur(25px) brightness(70%) grayscale(100%);
+	opacity: 0.5;
+	transition: 0.4s;
+}
+
+.toggleblur {
+	display:none;
+	cursor: pointer;
+	font-family: sans, fontello;
+}
+
+.small {
+	width: 321px !important;
+	height: 321px;
+	line-height: 321px;
+	/* background-color: black; */
+	float:left;
+	margin:2px !important;
+}
+
+.smaller {
+	width: 212px !important;
+	height: 212px;
+	line-height: 212px;
+	/* background-color: black; */
+	float:left;
+	margin:2px !important;
+}
+
+.icon {
+	width: 80px !important;
+	height: 80px !important;
+	line-height: 80px;
+	float:left;
+	text-align:center;
+	margin:2px !important;
+}
+
+.postbody {
+	margin: 15px;
+}
+
+.content {
+	width: 600px;
+	display: inline-block;
+	margin:0px !important;
+	text-align: left;
+}
+
+.post_footer {
+	width: 630px;
+	display: table-cell;
+	clear: both;
+	padding: 10px;
+	height: 20px;
+	text-align: left;
+	border-radius: 3px;
+}
+
+.post_buttons {
+	font-family: fontello;
+	float: right;
+	display: inline-block;
+	text-align: right;
+	font-size: 15pt;
+}
+
+.post_buttons a,
+.post_buttons span {
+	font-family: inherit;
+	text-decoration: none;
+	color: inherit;
+	font-size: inherit;
+}
+
+.reply {
+	width: 100%;
+	clear: both;
+	text-align: left;
+	display: block;
+}
+
+.note {
+	width: 640px;
+	float: left;
+	text-align: left;
+	border-radius: 5px;
+	padding: 5px;
+}
+
+.button {
+	padding: 15px;
+	float: left;
+	text-align: center;
+	border-radius: 5px;
+	font-size: 20pt;
+}
+
+/* pages */
+
+.setting label {
+	display: block;
+	width: 40px;
+	height: 20px;
+	padding: 5px;
+	float: left;
+	margin: 0px;
+	text-align: center;
+	transition: all 0.3s ease-in-out;
+}
+
+.setting input[type="radio"]:checked+label {
+	font-weight: bold;
+}
+
+
+/* other stuff */
+
+/* <lightbox> */
+.lightbox-opened {
+	/* background-color: #333; */
+	background-color: rgba(50, 50, 50, 0.85);
+	cursor: pointer;
+	height: 100%;
+	/* left: 0; */
+	overflow-y: scroll;
+	position: fixed;
+	text-align: center;
+	top: 0;
+	width: 100%;
+	z-index:105;
+	&:before {
+		background-color: #333;
+		background-color: rgba(#333, 0.9);
+		color: #eee;
+		content: "x";
+		font-family: sans-serif;
+		padding: 6px 12px;
+		position: fixed;
+		text-transform: uppercase;
+	}
+	img {
+		box-shadow: 0 0 6px 3px #333;
+	}
+}
+
+.no-scroll {
+	overflow: hidden;
+}
+
+/* </lightbox> */
+
+.fontello {
+	font-family: fontello;
+}
+
+.loading {
+	font-family: fontello;
+	color: black;
+	content: "\E822";
+	animation-name: spin;
+	animation-duration: 5000ms;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	/* transform: rotate(3deg); */
+	/* transform: rotate(0.3rad);/ */
+	/* transform: rotate(3grad); */
+	/* transform: rotate(.03turn);  */
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.disabled {
+	background-color: black;
+}

upload.php

@@ -15,8 +15,6 @@ include "include/functions.php";
 		$file_size = $file['size'];
 		@$file_ext = strtolower(end(explode('.', $file['name'])));
 
-		//$file_name = "tmp/".$file_name;
-		$file_name = $file_name;
 		move_uploaded_file($file_tmp, $file_name);
 		$media_id[] = json_decode(uploadpic($file_name),true);
 		unlink($file_name);