Loading...

How to add Notifications to Templates v1

How to add Notifications to Templates v1
how-to-add-notifications-to-templates-v1
There are 4 things you need to do:



1) In the template file, before , add:

{literal}
  <script>
    
    var __pw=0;
    var _sideprofilebar;
    function sideprofilebar({
    _sideprofilebar=setInterval(function({
      __pw=($('contentWrapper').cumulativeOffset().left-parseInt($('aSide').getStyle('width')))-5;
      if(__pw>0{
        $('aSide').style.top=$('content').cumulativeOffset().top+"px";
        $('aSide').style.left=__pw+"px";
        $('aSide').style.visibility="visible";
      else {
        $('aSide').style.visibility="hidden";        
      }
      
       }500);
    }
    </script>
{/literal}



PS 1) With some templates, you may need to replace $('contentWrapper') and $('content') with $('col_1') so:

{literal}
 <script>
    
    var __pw=0;
    var _sideprofilebar;
    function sideprofilebar({
    _sideprofilebar=setInterval(function({
      __pw=($('col_1').cumulativeOffset().left-parseInt($('aSide').getStyle('width')))-5;
      if(__pw>0{
        $('aSide').style.top=$('col_1').cumulativeOffset().top+"px";
        $('aSide').style.left=__pw+"px";
        $('aSide').style.visibility="visible";
      else {
        $('aSide').style.visibility="hidden";        
      }
      
       }500);
    }
    </script>

{/literal}


2) Change or as:

<body class="{$isLogged}" onload="sideprofilebar()">






3) In the template file, between contentWrapper and content, add:

<div id="aSide">
                {if $access_isGroupMember eq true}
                        <href="{intrapi}viewer_profile{/intrapi}"><img
                            src="{intrapi}viewer_avatar_link{/intrapi}"
                            alt="{intrapi}viewer_full_name{/intrapi}"
                            width="40" height="40">a>
                {/if}
                
                {include file="../notifications.tpl"}
                
            div






4) At the end of the CSS file, add:

#aSide {
  width40px;
  floatleft;
  margin-top20px;
  background:#fff;
  border-radius:1em;
  position:absolute;
  top:119px;
  visibility:hidden;
}
#aSide img {
  floatleft;
  margin-right10px;
  border-radius:1em;
}
#aSide h1 {
  displayblock;
  font-weightbold;
  padding-top5px;
}
#aSide h1 a:hover,
#aSide a:hover {
  text-decorationunderline;
}
#userProfileBlock {
  margin-bottom15px;
  line-height1.25em;
  overflowhidden;
}


ul#basicMenu {
  color#F7F7F7;
  font-size11px;
  line-height1.2em;
  list-stylenone outside none;
  margin0;
  padding0;
  positionabsolute;
  right25px;
  top72px;
}
ul#basicMenu li {
  floatleft;
  positionrelative;
}
ul#basicMenu li {
  color#808080;
  displayblock;
  font-weightnormal;
  padding8px;
  text-decorationnone;
}
ul#basicMenu li a:hover {
  text-decorationunderline;
  color#006567;
}
ul#accountMenu {
  displaynone;
  background#ffffff;
  color#808080;
  line-height1.667em;
  list-stylenone;
  margin0;
  padding5px;
  positionabsolute;
  right-1px;
  border1px solid #550067;
  border-topnone;
  text-alignleft;
  top33px;
  width185px;
  z-index9999;
}
ul#headerNotificationsIcons ul.notificationMenu {
  background#ffffff;
  color#808080;
  border1px solid #550067 !important;
  top!important;
  left59px !important;
  z-index:9999;
  position:absolute;
  list-style:none;
  width:320px;
    padding5px;
  margin:0;
  line-height1.667em;
}
ul#headerNotificationsIcons ul.notificationMenu h3,
ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li {
  border-bottom1px solid #ebebeb;
}
ul#headerNotificationsIcons ul.notificationMenu h3 {  
  displayblock;
margin-bottom5px;
padding5px 10px;
font-weightbold;
}
ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li.hoverable:hover {
  background-color#550067;
  color#ffffff;
}
ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li.hoverable:hover {
  color#ffffff;
}
ul#headerNotificationsIcons ul.notificationMenu li.bottom {
  border-top1px solid #ebebeb;
  background-color#ffffff;
  color#550067;
}
ul#headerNotificationsIcons ul.notificationMenu li.bottom {
  background-imagenone;
  width98%;
}
ul#headerNotificationsIcons ul.notificationMenu li.bottom:hover {
  color#F7F7F7;
}
ul#headerNotificationsIcons .notificationItemContainer button {
  color#550067;
  text-decorationnone;
}
ul#headerNotificationsIcons .notificationItemContainer button:hover {
  text-decorationunderline;
}
#basicItemAccount:hover ul#accountMenu {
  displayblock;
}
#basicItemAccount:hover {
  background#ffffff !important;
}
#basicItemAccount:hover {
  color#808080;
}
ul#accountMenu {
  color#808080 !important;
  displayblock;
  padding5px;
  text-decorationnone;
}
ul#accountMenu a:hover {
  background#f2f2f2;
}
ul#accountMenu .userAvatar {
  border-bottom1px solid #eee;
  margin-bottom6px;
  margin-top5px;
  padding-bottom10px;
}
ul#accountMenu .userAvatar {
  displayinline;
  margin-left10px;
}
ul#accountMenu .userAvatar {
  displayinline;
  padding0;
  color#550067;
  font-weightbold;
}
ul#accountMenu .userAvatar a:hover {
  backgroundnone;
}
  

ul#headerNotificationsIcons {
  list-stylenone outside none;
  margin70px 0;
  padding0;
}
ul#headerNotificationsIcons li {
  positionrelative;
  floatleft;
  border-left1px solid transparent;
  border-right1px solid transparent;
}
ul#headerNotificationsIcons li.new {
  background-color#f2f2f2;
}
ul#headerNotificationsIcons li.selected a:hover {
  background-colortransparent;
}
ul#headerNotificationsIcons li.bottom a:hover {
  background-color#620076;
}
ul#headerNotificationsIcons li {
  displayblock;
  padding10px 5px;
  background-imageurl("http://www.raclesports.com/templates/tpl_std/xing/images/icn-sprite.png");
  background-repeatno-repeat;
  width25px;
  height25px;
  text-decorationnone;
}
ul#headerNotificationsIcons li a:hover {
  opacity0.6;
}
ul#headerNotificationsIcons li .userCount {
  backgroundnone repeat scroll #CDD419;
  border-radius2px !important;
  box-shadow2px rgba(0000.4);
  color#333333;
  font-size10px;
  font-weightbold;
  line-height1em;
  padding3px;
  positionabsolute;
  right-5px;
  top-2px;
}
a#headerFriendRequestItem {
  background-position-11857px;
}
a#headerMessagesItem {
  background-position-12082px;
}
a#headerNotificationsItem {
  background-position-11902px;
}
a#headerHomeItem {
  backgroundurl("/templates/tpl_std/xing/images/black/home.png"no-repeat scroll center centertransparent;
}
a#headerSettingsItem {
  background-position2px -12113px;
  border-top1px solid #fff;
}
#groups_notifications_button {
  displaynone;
  /* groups_bar daki notifications butonu kapatıldı */

}

ul#headerNotificationsIcons ul.notificationMenu {
    list-stylenone;
    margin0;
    padding0;
    positionabsolute;
    left-1px;
    border-topnone;
    text-alignleft;
    top30px;
    width320px;
    z-index9999;
}

ul#headerNotificationsIcons ul.notificationMenu h3 {
  displayblock;
  margin-bottom5px;
  padding5px 10px;
  font-weightbold;
}

ul#headerNotificationsIcons ul.notificationMenu h3 div.notificationAction {
  floatright;
  font-weightnormal;
}

ul#headerNotificationsIcons ul.notificationMenu h3 div.notificationAction {
  padding0;
  height0;
}

ul#headerNotificationsIcons ul.notificationMenu h3 div.notificationAction a:hover {
  text-decorationunderline;
  backgroundnone;
}

ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li.notificationNoContent {
  margin5px 0;
  padding10px;
  line-height20px;
  bordernone;
  widthauto;
}

ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li {
  displayblock;
  clearboth;
  padding-top5px;
  padding-bottom5px;
  width100%;
  overflowhidden;
}

ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li.clickable {
  cursorpointer;
}

ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li.last {
  /*margin: 0;
  padding: 0;*/
  bordernone;
}

ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li div {
  padding10px;
}
ul#headerNotificationsIcons .notificationItemContainer button {
  backgroundnone;
    bordernone;
    text-shadownone;
    box-shadownone;
    border-radius0;
    padding0;
    margin6px 15px -2px;
    font-weightnormal;
}

ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li img {
  floatleft;
  margin-right10px;
  width50px;
  height50px;
  vertical-aligntop;
}

ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li img.outgoingMessage {
  bordernone;
    floatnone;
    height9px;
    margin0;
    padding0;
    vertical-alignmiddle;
    width8px;
}

ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li h3 {
  margin0;
  padding0;
  bordernone;
}

ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li h3.inline {
  displayinline;
}

ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li p.no_margin {
    margin-top0;
}

ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li p.small {
  font-size9px;
}

ul#headerNotificationsIcons ul.notificationMenu div.notificationContent li {
  displayinline;
  font-weightbold;
  padding0;
}

ul#headerNotificationsIcons ul.notificationMenu li.bottom {
  displayblock;
  width100%;
  padding0;
  text-aligncenter;
  font-weightbold;
  line-height30px;
}

ul#headerNotificationsIcons li .userCount {
  z-index1;
    font-size11px;
    font-family"lucida grande",tahoma,verdana,arial,sans-serif;
}