Current date/time is April 27th 2024, 5:29 am

Search found 2 matches for notif_list

Notifications on Nav Bar?

@APE you are wrong, I've done this notification system some time ago.Forumotion Notification system use a PHP Syntax on the #notif_list ID. Based on this, you can extract from Forumotion PHP Base, the whole code, only with this small ID. To make our job easier, you have the link input already done with whole JS. You will see it in a minute, but let's start working.

First of all, you need to activate your toolbar so go into Administration Panel -> Module -> Toolbar -> Configuration -> Activate the toolbar : YES

Now, I tested this into phpBB3, it work with all versions, if you have the phpBB3 it will be easier.

Now, into step two, we need to go into Administration Panel -> Display -> Templates -> General -> Overal_header and search for this small code

Code:
<li>{GENERATED_NAV_BAR}</li>


Exactly after it, just add this small code

Code:
<a id="fa_notifications" class="rightHeaderLink unread">Notifications<span id="notif_unread"></span></a>
<ul id="notif_list">
<li></li>
</ul>


That's all! See? Very easy, now you want to hide the toolbar so we come with some extra CSS work.
Go into Administration Panel -> Display -> Colors -> CSS and add this code

Code:
#fa_toolbar{ display:none; }

#notif_list {
    position: absolute!important;
    background-color: #E0E0E0;
    display: block;
    right: 100px;
    padding: 15px 20px 0 20px;
    border-radius: 5px;
    border: 1px solid #969696;
    box-shadow: 0 0 0 1px #EAEAEA inset, 0 7px 5px -5px #DEDEDE;
}

ul.navlinks{
  border:none;
}

#notif_list hr{
  display:none;
}


This will style your new notifications system a bit, to make it look better.

If you use PunBB, when you search, instead the old code, look for
Code:
<li>{GENERATED_NAV_BAR}</li>

On Invision, go and search
Code:
<li class="clearfix">{GENERATED_NAV_BAR}</li>

On phpBB2, go and search for
Code:
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>

It wasn't tested into phpBB2, from my experience on punBB and Invision even without verifying the code I'm sure it will work. I'm not so used on tables and I don't know how they affect the code.

Good luck,
levy
by levy
on August 2nd 2015, 3:10 am
 
Search in: Garbage
Topic: Notifications on Nav Bar?
Replies: 4
Views: 1309

Personalize the entire toolbar with CSS

Personalize the entire toolbar with CSS


The following tutorial will help you know the different CSS selectors used on the toolbar of your Forumotion forum. This will allow you to personalize your toolbar's appearance, so it fits with the rest of the forum.

All codes are added in :
Administration Panel > Display > Colors > CSS stylesheet



Topics tagged under notif_list on The forum of the forums 09615110 Toolbar selectors

#fa_toolbarEntire toolbar
#fa_search / #fa_textareaTopics tagged under notif_list on The forum of the forums Captur19
#fa_magnifierTopics tagged under notif_list on The forum of the forums Captur43
#fa_shareTopics tagged under notif_list on The forum of the forums Captur20
#fa_share_textTopics tagged under notif_list on The forum of the forums Captur21
#fa_fbTopics tagged under notif_list on The forum of the forums Captur22
#fa_twitterTopics tagged under notif_list on The forum of the forums Captur23
#fa_gpTopics tagged under notif_list on The forum of the forums Captur24
#fa_mailTopics tagged under notif_list on The forum of the forums Captur25
#fa_rssTopics tagged under notif_list on The forum of the forums Captur26
#fa_rightTopics tagged under notif_list on The forum of the forums Captur27
#fa_welcomeTopics tagged under notif_list on The forum of the forums Captur28
#fa_notificationsTopics tagged under notif_list on The forum of the forums Captur30
#notif_unreadTopics tagged under notif_list on The forum of the forums Captur29
#fa_hideTopics tagged under notif_list on The forum of the forums Captur31
#fa_showTopics tagged under notif_list on The forum of the forums Captur32
#fa_menulistTopics tagged under notif_list on The forum of the forums Captur33
#fa_usermenuTopics tagged under notif_list on The forum of the forums Captur41
#fa_ranktitleTopics tagged under notif_list on The forum of the forums Captur42
#notif_listTopics tagged under notif_list on The forum of the forums Captur34
li.see_allTopics tagged under notif_list on The forum of the forums Captur35
li.unreadTopics tagged under notif_list on The forum of the forums Captur36
#notif_list li .contentTextTopics tagged under notif_list on The forum of the forums Captur39
#notif_list li a.deleteTopics tagged under notif_list on The forum of the forums Captur40
div.fa_notificationTopics tagged under notif_list on The forum of the forums Captur37
div.fa_notification .contentTopics tagged under notif_list on The forum of the forums Captur38




Topics tagged under notif_list on The forum of the forums 09615110 Trick : removal of elements

Remove the search bar :
Code:
#fa_search { display:none !important }


Remove the share buttons :
Code:
#fa_share { display:none !important }


Remove the link "Welcome Guest" :
Code:
#fa_welcome { display:none !important }


Remove the button "Hide toolbar" :
Code:
#fa_hide { display:none !important }




Topics tagged under notif_list on The forum of the forums 09615110 Self service

Copy / paste any of the following codes to install the toolbar of your choice on your forum :
Administration Panel > Display > Colors > CSS stylesheet
The colors were chosen at random and can be changed easily !

Self service 1
Topics tagged under notif_list on The forum of the forums Captur44
Code:
div#fa_toolbar {
  background-color: #24384c;  /* Background color */
  border-radius: 0 0 50px 50px;  /* Rounds borders of the toolbar */
  box-shadow: 0 0 5px #000000;  /* Displays a shadow */
  margin: auto;  /* Center the toolbar */
  width: 98%;  /* Width of the toolbar */
}
 
div#fa_toolbar div, div#fa_toolbar span {
  margin: 0 15px;  /* Reposition the toolbar contents */
}


Self service 2
Topics tagged under notif_list on The forum of the forums Captur45
Code:
div#fa_toolbar {
    background-color: #657488;  /* Background color */
    border: 2px solid white;  /* Add a white border */
    border-radius: 50px;  /* Rounds borders of the toolbar */
    margin: auto;  /* Center the toolbar */
    top: 10px;  /* Space above the toolbar */
    width: 98%;  /* Width of the toolbar */
}
 
a#fa_hide {
    display: none!important;  /* Remove the hide button */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Reposition the toolbar contents */
}


Self service 3
Topics tagged under notif_list on The forum of the forums Captur46
Code:
#fa_toolbar {
    background-color: transparent !important;  /* Make the main toolbar bg transparent */
}
#fa_right {
    background-color: #000000;  /* Background color */
    border-radius: 0 0 40px 40px;  /* Border roundness */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
    position: relative;  /* Position of the toolbar */
    right: 20px;  /* Décale la toolbar de la droite */
}
 
#fa_left {
    background-color: #000000;  /* Background color */
    border-radius: 0 0 0 40px;  /* Border roundness */
    position: relative;  /* Position of the toolbar */
    left: 20px;  /* Spacing to the left of the toolbar */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_search {
    background-color: #000000;  /* Background color */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_share {
    background-color: #000000;  /* Background color */
    border-radius: 0 0 40px;  /* Border roundness */
    position: relative;  /* Position of the toolbar */
    left: -20px;  /* Spacing to the left of the toolbar */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /*Left padding */
    padding-right: 10px;  /* Right padding */
}


Self service 4
Topics tagged under notif_list on The forum of the forums Captur47
Code:
#fa_toolbar {
    background-color: transparent !important;  /* Make the main toolbar bg transparent */
}
 
#fa_right {
    background-color: #b3b3b3;  /* Background color */
    border-radius: 0 0 0 40px;  /* Border roundness */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_left {
    background-color: #b3b3b3;  /* Background color */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_search {
    background-color: #b3b3b3;  /* Background color */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
    position: relative;  /* Position of the toolbar */
    left: -20px;  /* Spacing to the left of the toolbar */
}
 
#fa_share {
    background-color: #b3b3b3;  /* Background color */
    border-radius: 0 0 40px;  /* Border roundness */
    left: -40px;  /* Spacing to the left of the toolbar */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
    position: relative;  /* Position of the toolbar */
}



Self service 5
Thanks to _Twisted_Mods_
Topics tagged under notif_list on The forum of the forums Captur99
Code:
    #fa_share:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-3px!important;
    }
    #fa_share:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-29px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-3px !important;
    }
    #fa_share{
      margin-left:450px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute!important;
      border-radius: 0px 0px 2px 2px!important;
    }

    #fa_search:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px!important;
    }
    #fa_left:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_search{
      margin-left:151px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute!important;
    }
    #fa_left{
      margin-left:40px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute !important;
    }
    #fa_toolbar{
      background-color:transparent!important;
    }
    #fa_right:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px!important;
    }
    #fa_right:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_right{
      margin-left:780px!important;
      background-color: rgba(0,0,0, 0.5) !important;
      position:absolute !important;
      border-radius: 0px 0px 2px 2px!important;
    }
#fa_toolbar_hidden:after{
  border-radius: 0px 0px 5px 5px!important;
  content:""!important;
  position:absolute!important;
  border-top: 35px solid  rgba(0,0,0, 0.5)!important;
  border-right: 30px solid transparent!important;
  display:inline-block!important;
  margin-top:-5px!important;
}
    #fa_toolbar_hidden:before{
      border-radius: 0px 0px 5px 5px!important;
      content:"";left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_toolbar_hidden{
      margin-right:30px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      border-radius: 0px 0px 2px 2px!important;
    }

    #fa_menulist{
      float:right!important;
      margin-left: -210px !important;
      background-color: rgba(0,0,0, 0.5)!important;
      position: absolute !important;
      border-radius: 0px 0px 2px 2px!important;
      border:none;
    }
    #fa_toolbar #fa_right #notif_list li.see_all {
      color:white !important;
      background-color: rgba(0,0,0, 0.5)!important;
    }
    #fa_menulist:after{
      content:""!important;
      position:absolute!important;
      top:-2px!important;
      border-bottom: 270px solid  rgba(0,0,0, 0.5) !important;
      right:-20px!important;
      border-right: 20px solid transparent!important;
      display:inline-block!important;
      margin-top:-0px!important;
    }
    #fa_menulist:before{
      content:""!important;
      left:-20px !important;
      position:absolute!important;
      border-top: 270px solid  rgba(0,0,0, 0.5)!important;
      border-left: 20px solid transparent!important;
      display:inline-block!important;
      margin-top:6!important!;
    }
    #fa_welcome,#fa_toolbar #fa_right #notif_list,#fa_notifications,
#fa_toolbar #fa_menulist li a,#fa_menulist #fa_ranktitle,#fa_menulist td{
  background-color:transparent !important;
  color:white !important;
}
#notif_list li { background:#CCC !important }


Want to propose another toolbar for self service? Do not hesitate to send it to us by PM !  Topics tagged under notif_list on The forum of the forums 1852325475




This tutorial was written by Matriochka and Tech of the French Support,
Translated to English by Ange Tuteur.
by Ange Tuteur
on November 28th 2014, 6:08 am
 
Search in: Tips & Tricks
Topic: Personalize the entire toolbar with CSS
Replies: 0
Views: 11272

Back to top

Jump to: