Browse Source

Allows the user to change the avatar

Allows the user change the avatar from the default one given, it uses a
1*1 pixel png as a placeholder so the broken image icon is not
displayed.
AceLewis 8 years ago
parent
commit
5c7b03b772
5 changed files with 11 additions and 1 deletions
  1. 2 0
      README.md
  2. 1 0
      css/ZeroBlog.css
  3. 1 0
      css/all.css
  4. BIN
      img/avatar.png
  5. 7 1
      index.html

+ 2 - 0
README.md

@@ -6,3 +6,5 @@ Demo for decentralized, self publishing blogging platform.
 ![Screenshot](http://i.imgur.com/diTYHcm.png) 
 
 ZeroNet address: http://127.0.0.1:43110/1BLogC9LN4oPDcruNz3qo1ysa133E9AGg8
+
+To change the avatar replace the image /img/avatar.png with your new avatar, it can be a .png, .jpg or .gif

+ 1 - 0
css/ZeroBlog.css

@@ -80,6 +80,7 @@ a:hover { color: #3498db }
 .left .avatar {
 	background-color: #F0F0F0; width: 60px; height: 60px; border-radius: 100%; margin-bottom: 10px;
 	background-position: center center; background-size: 70%; display: inline-block; image-rendering: pixelated;
+	position: relative; left: 0; top: 0;
 }
 .left h1 a.nolink { font-family: Tinos; display: inline-block; padding: 1px }
 .left h1 a.editable-edit { float: none }

+ 1 - 0
css/all.css

@@ -195,6 +195,7 @@ a:hover { color: #3498db }
 .left .avatar {
 	background-color: #F0F0F0; width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100% ; margin-bottom: 10px;
 	background-position: center center; background-size: 70%; display: inline-block; image-rendering: pixelated;
+	position: relative; left: 0; top: 0;
 }
 .left h1 a.nolink { font-family: Tinos; display: inline-block; padding: 1px }
 .left h1 a.editable-edit { float: none }

BIN
img/avatar.png


+ 7 - 1
index.html

@@ -45,7 +45,13 @@
 
 <!-- left -->
 <div class="left" data-object="Site">
- <a href="?Home" class="nolink"><div class="avatar"> </div></a>
+ <a href="?Home" class="nolink">
+  <div class="avatar">
+    <img class="avatar" src="./img/avatar.png" style="position: absolute">
+    <img class="avatar" src="./img/avatar.jpg" alt="./img/avatar.png" style="position: absolute">
+    <img class="avatar" src="./img/avatar.gif" alt="./img/avatar.png" style="position: absolute">
+  </div>
+ </a>
  <h1><a href="?Home" class="nolink" data-editable="title" data-editable-mode="simple"></a></h1>
  <h2 data-editable="description"></h2>
  <a href="#Follow" class="feed-follow"><span class='text-follow'>Follow in Newsfeed</span><span class='text-following'>Following</span><div class="icon-feed"></div></a>