"vier": Several design changes. New option for coloured network items.

view/theme/vier/config.php

@@ -39,7 +39,8 @@ function theme_admin_post(&$a){
 function vier_form(&$a, $style){
 	$styles = array(
 		"shadow"=>"Shadow",
-		"flat"=>"Flat"
+		"flat"=>"Flat",
+		"netcolour"=>"Coloured Networks"
 	);
 	$t = get_markup_template("theme_settings.tpl" );
 	$o .= replace_macros($t, array(

view/theme/vier/css/font2.css

@@ -30,7 +30,7 @@
 }
 
 .icon.s10 {
-  font-size: 1em;
+  font-size: 0.7em;
 }
 .icon.s16 {
   font-size: 1.2em;

view/theme/vier/netcolour.css

@@ -0,0 +1,34 @@
+.tread-wrapper {
+   background-color: #fafafa;
+}
+.twit {
+  /* background-color: #FFFAFA; */
+  background-color: #fafeff;
+}
+.pump {
+  /* background-color: #FAFFFA; */
+  background-color: #fcfffa;
+}
+.face {
+  /* background-color: #FAFAFF; */
+  background-color: #fafcff;
+}
+.feed {
+  /* background-color: #FFFFFA; */
+  background-color: #fffdfa;
+}
+.dspr {
+  background-color: #FFFAFF;
+}
+.dfrn {
+  background-color: #FAFAFA;
+}
+.stat {
+  /* background-color: #FAFFFF; */
+  background-color: #fffafd;
+}
+.mail {
+  /* background-color: #FFFFF9; */
+  background-color: #fffafa;
+}
+

view/theme/vier/style.css

@@ -125,7 +125,8 @@ img {
   background-repeat: no-repeat;
   width: 18px;
   height: 18px;
-  display: block;
+  /* display: block; */
+  display: inline-block;
   overflow: hidden;
   padding: 1px;
   color: #999;
@@ -1121,13 +1122,13 @@ border-bottom: 1px solid #D2D2D2;
   padding: 5px;
   margin-bottom: 10px;
   box-shadow: 1px 1px 6px -3px rgba(0, 0, 0, 0.7);
-  background-color: #FAFaFa;
+  background-color: #FFFFFF;
  /* width: 755px; */
 }
 .wall-item-decor {
   position: absolute;
   left: 755px;
-  left: calc(100% - 7px);
+  left: calc(100% - 16px);
 /*  top: -10px; */
   width: 16px;
 }
@@ -1157,15 +1158,19 @@ border-bottom: 1px solid #D2D2D2;
 .wall-item-bottom {
   /* font-size: 14px; */
 }
-.wall-item-container .wall-item-bottom {
+/* .wall-item-container .wall-item-bottom { */
-  opacity: 0;
+.wall-item-container .wall-item-links,
+.wall-item-container .wall-item-actions {
+  opacity: 0.2;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }
-.wall-item-container:hover .wall-item-bottom {
+/* .wall-item-container:hover .wall-item-bottom { */
+.wall-item-container:hover .wall-item-links,
+.wall-item-container:hover .wall-item-actions {
   opacity: 1;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -1448,37 +1453,6 @@ border-bottom: 1px solid #D2D2D2;
 	padding-right: 12px; */
 }
 
-.twit {
-  /* background-color: #FFFAFA; */
-  background-color: #fafeff;
-}
-.pump {
-  /* background-color: #FAFFFA; */
-  background-color: #fcfffa;
-}
-.face {
-  /* background-color: #FAFAFF; */
-  background-color: #fafcff;
-}
-.feed {
-  /* background-color: #FFFFFA; */
-  background-color: #fffdfa;
-}
-.dspr {
-  background-color: #FFFAFF;
-}
-.dfrn {
-  background-color: #FAFAFA;
-}
-.stat {
-  /* background-color: #FAFFFF; */
-  background-color: #fffafd;
-}
-.mail {
-  /* background-color: #FFFFF9; */
-  background-color: #fffafa;
-}
-
 #profile-jot-form {
   box-shadow: 1px 1px 6px -3px #666;
   background-color: #fafafa;

view/theme/vier/templates/wall_thread.tpl

@@ -27,8 +27,8 @@
 {{if $item.thread_level!=1}}<div class="children">{{/if}}
 
 <div class="wall-item-decor">
-	<span class="icon s22 star {{$item.isstarred}}" id="starred-{{$item.id}}" title="{{$item.star.starred}}">{{$item.star.starred}}</span>
+	<!-- <span class="icon s22 star {{$item.isstarred}}" id="starred-{{$item.id}}" title="{{$item.star.starred}}">{{$item.star.starred}}</span> -->
-	{{if $item.lock}}<span class="icon s22 lock fakelink" onclick="lockview(event,{{$item.id}});" title="{{$item.lock}}">{{$item.lock}}</span>{{/if}}	
+	<!-- {{if $item.lock}}<span class="icon s22 lock fakelink" onclick="lockview(event,{{$item.id}});" title="{{$item.lock}}">{{$item.lock}}</span>{{/if}} -->
 	<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
 </div>
 
@@ -60,8 +60,8 @@
 			{{if $item.owner_url}}{{$item.via}} <a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a> <!-- {{$item.vwall}} -->{{/if}}
 			<span class="wall-item-ago">
 				{{if $item.plink}}<a title="{{$item.plink.title}}" href="{{$item.plink.href}}" style="color: #999">{{$item.created}}</a>{{else}} {{$item.created}} {{/if}}
-				{{if $item.lock}}<span class="fakelink" style="color: #999" onclick="lockview(event,{{$item.id}});">{{$item.lock}}</span> {{/if}}
 			</span>
+			{{if $item.lock}}<span class="icon s10 lock fakelink" onclick="lockview(event,{{$item.id}});" title="{{$item.lock}}">{{$item.lock}}</span>{{/if}}
 			<span class="wall-item-network" title="{{$item.app}}">
 				{{$item.network_name}}
 			</span>
@@ -92,7 +92,7 @@
 	</div>	
 	<div class="wall-item-bottom">
 		<div class="wall-item-links">
-			{{if $item.plink}}<a title="{{$item.plink.title}}" href="{{$item.plink.href}}"><i class="icon-link icon-large"></i></a>{{/if}}
+			{{if $item.plink}}<a title="{{$item.plink.title}}" href="{{$item.plink.orig}}"><i class="icon-link icon-large"></i></a>{{/if}}
 		</div>
 		<div class="wall-item-actions">
 			<div class="wall-item-actions-social">
@@ -100,8 +100,9 @@
 				<span id="comment-{{$item.id}}" class="fakelink togglecomment" onclick="openClose('item-comments-{{$item.id}}');"><i class="icon-comment"></i></span>
 			{{/if}}{{/if}}
 			{{if $item.vote}}
+				{{if $item.vote.like}}
 				<a href="#" id="like-{{$item.id}}" title="{{$item.vote.like.0}}" onclick="dolike({{$item.id}},'like'); return false"><i class="icon-thumbs-up icon-large"></i></a>
-				{{if $item.vote.dislike}}
+				{{/if}}{{if $item.vote.dislike}}
 				<a href="#" id="dislike-{{$item.id}}" title="{{$item.vote.dislike.0}}" onclick="dolike({{$item.id}},'dislike'); return false"><i class="icon-thumbs-down icon-large"></i></a>
 				{{/if}}
 			    {{if $item.vote.share}}

view/theme/vier/theme.php

@@ -18,6 +18,8 @@ $a->theme_info = array();
 $style = get_pconfig(local_user(), 'vier', 'style');
 if ($style == "flat")
 	$a->page['htmlhead'] .= '<link rel="stylesheet" href="view/theme/vier/flat.css" type="text/css" media="screen"/>'."\n";
+else if ($style == "netcolour")
+	$a->page['htmlhead'] .= '<link rel="stylesheet" href="view/theme/vier/netcolour.css" type="text/css" media="screen"/>'."\n";
 
 $a->page['htmlhead'] .= <<< EOT
 <script type="text/javascript" src="$baseurl/view/theme/vier/js/jquery.divgrow-1.3.1.f1.min.js"></script>