Hey there, I'm currently working on Devaon's templates. Don't mind the incoherent stuff. Thanks !
Welcome to Devaon

Back to thread listFacebook-style Sidebar #1
Jeg
Sat Apr 23, 2022 4:10 pm

A Facebook-like Sidebar for phpbb2 only. (for now at least)

Facebook-style Sidebar #1 MVpYGrk Facebook-style Sidebar #1 4EXGlOy Facebook-style Sidebar #1 Vpv4rET Facebook-style Sidebar #1 F5YVbAk Facebook-style Sidebar #1 FJrXNgd

Might contain bugs or missing features depending on your forum. Don't hesitate contacting me to report any issue you might encounter.

In the overall_header template, find:

Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}" data-title="{PAGE_TITLE}">


Add right after:

Code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.6.96/css/materialdesignicons.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
  
<sidebar>
  <a class="s_logo" href="/"><span class="mdi mdi-post-outline"></span></a>
  <a href="/search" class="s_search s_tooltip" data-hover="Search"><span class="mdi mdi-magnify"></span></a>
  
  <!-- BEGIN switch_user_logged_in -->
  <a class="s_notifications s_tooltip" data-hover="Notifications"><span class="mdi mdi-bell"></span></a>
  <a href="/privmsg?folder=inbox" class="s_priv s_tooltip" data-hover="Private Messages"><span class="mdi mdi-message-text"></span></a>
  <a href="/profile?mode=editprofile" class="s_user s_tooltip" data-hover="Edit Profile"><span class="mdi mdi-account"></span></a>
  <!-- END switch_user_logged_in -->
  
  <!-- BEGIN switch_user_logged_out -->
  <a href="/login" class="s_login s_tooltip" data-hover="Log in"><span class="mdi mdi-login"></span></a>
  <a href="/register" class="s_register s_tooltip" data-hover="Create an account"><span class="mdi mdi-account-plus"></span></a>
  <!-- END switch_user_logged_out -->
  
  
  <div class="s_avatar"></div>
  
  
  <div class="s_pl">
    <!-- BEGIN switch_user_logged_in -->
    <a href="" class="s_viewprofile">
      <div class="s_avatar"></div>
      <div class="s_username"></div><br />
      <div class="s_username_sub">View your profile</div>
    </a>
    
    <hr class="s_pl_sep" />
    
    <div class="s_settings">
      <a href="/profile?mode=editprofile&page_profil=preferences" class="s_preferences"><span class="mdi mdi-cog"></span> Settings & Preferences</a>
      <a href="/profile?mode=editprofile&page_profil=avatars" class="s_changeavatar"><span class="mdi mdi-account-box"></span> Change Avatar</a>
      <a href="/profile?mode=editprofile&page_profil=friendsfoes" class="s_friends"><span class="mdi mdi-account-multiple-check"></span> Friends & Foes</a>
      <a href="/search?search_id=favouritesearch" class="s_favs"><span class="mdi mdi-heart"></span> Favourites</a>
      <a href="/login?logout=1" class="s_logout"><span class="mdi mdi-logout"></span> Log out</a>
    </div>
    <!-- END switch_user_logged_in -->
        
    <!-- BEGIN switch_user_logged_out -->
        <div class="s_logorreg">You are not logged-in.<br /><a href="/login">Log in</a> or <a href="/register">register</a> to fully access the forum.</div>
    <!-- END switch_user_logged_out -->
  </div>
</sidebar>
  
<script type="text/javascript">
$('.s_avatar').html(_userdata['avatar']);
$('.s_username').html(_userdata['username']);
  
var $uid = _userdata['user_id'];
$('a.s_viewprofile').attr('href', '/u' + $uid);
</script>


In the overall_footer_end template, find:

Code:
</body>


Add right before:

Code:
<script type="text/javascript">
$(function() {
$(function() {
$(function() {
    
$('a.s_notifications').on('click', function() {

    $('ul#notif_list').fadeToggle(150);
    $('ul#notif_list').addClass('s_notiflist');

  if (!$('.s_notif_avatar').length) {
  
$('ul#notif_list > li').each(function() {
    var $href = $(this).find('a[href^="/u"]').attr('href');

    $(this).find('.contentText').before('<div class="s_notif_avatar"></div>');
    $(this).find('.s_notif_avatar').load($href + ' .row1 span.gen img[loading="lazy"]');
});
    
  }
  
});

$(function() {
    setTimeout(function() {

var $ncount = $('a#fa_notifications span#notif_unread').text();
$ncount = $ncount.replace(/\(|\)/g, '');

$('.s_notifications span').append('<span class="ncount"></span>');
$('.s_notifications span span').text($ncount);
  
  
var trdata = $('a.mainmenu[href="/privmsg?folder=inbox"]').text().replace(/[^0-9]/gi, '');
  $('.s_priv span').append('<span class="pcount"></span>');
  $('.s_priv span span').text(parseInt(trdata, 10));
  
  if ($('span.pcount').text() == 'NaN') {
    $('span.pcount').hide();
  }
}, 1050);
});

$('.s_avatar').on('click', function() {
    $('.s_pl').fadeToggle(150);
});  

});
});
});
</script>


Finally, add the following CSS to your stylesheet:


Code:
sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 70px;
    background-color: white;
 z-index: 9999;
}

sidebar > a {
    display: block;
}

sidebar > a {
    text-align: center;
    margin: 0 auto 5px auto;
    font-size: 18pt;
    color: #1d1e21 !important;
    transition: all .25s ease-in-out;
    padding: 10px;
    width: 30px;
    border-radius: 10px;
}

a.s_logo {
    margin-top: 15px;
    color: #0d8aef !important;
    font-size: 30pt;
    width: 50px;
}

sidebar a:not(.s_logo):hover {
    background-color: #0000000d;
}

.s_avatar {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    overflow: hidden;
 cursor: pointer;
}

.s_avatar img {
    width: 42px;
    height: auto;
}

ul#notif_list.s_notiflist {
    left: 60px !important;
    position: fixed !important;
    top: 15px;
    height: calc(100% - 30px);
    border: none !important;
    box-shadow: 0 0 20px #30303030;
}

ul#notif_list.s_notiflist::before {
    content: "Notifications";
    color: #111;
    font-size: 13pt;
    font-weight: 600;
    padding: 10px 15px;
    display: block;
    border-bottom: 1px solid #10101015;
    margin-bottom: 10px;
}

ul#notif_list.s_notiflist li.see_all {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

ul#notif_list.s_notiflist a {
    text-align: center;
}

.s_notif_avatar {
    width: 30px;
    height: 30px;
    float: left;
    margin: 0 10px;
    overflow: hidden;
    border-radius: 509%;
}

.s_notif_avatar img {
    width: 100%;
    height: auto;
}

#fa_toolbar #fa_right #notif_list li .contentText {
    width: calc(27em - 40px);
}

.s_notif_avatar:empty {
    background-color: lightgrey;
    text-align: center;
    background-image: linear-gradient(135deg, #10101015, transparent);
}

.s_notif_avatar:empty::before {
    content: "\F0004";
    font-family: 'Material Design Icons';
    font-size: 14pt;
    line-height: 30px;
    opacity: .5;
}

.s_notifications .ncount, .s_priv .pcount {
    background-color: #e41e3f;
    color: #fff;
    font-family: 'Arial', sans-serif;
    font-size: 8pt;
    padding: 2px 6px;
    position: absolute;
    bottom: 4px;
    right: 4px;
    border-radius: 50%;
}

.s_notifications .ncount:empty, .s_priv .pcount:empty {
 display: none;
}

.s_notifications {
    position: relative;
 cursor: pointer;
}


.s_pl {
 display: none;
    left: 60px !important;
    position: fixed !important;
    bottom: 15px;
    height: calc(45% - 30px);
    border: none !important;
    box-shadow: 0 0 20px #30303030;
    background-color: #fff;
    width: 300px;
    box-sizing: border-box;
    padding: 1%;
}

.s_pl .s_avatar {
    all: unset;
    float: left;
    width: 58px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 5%;
}

.s_pl .s_avatar img {
    width: 58px;
    height: auto;
}

.s_username {
    display: inline-block;
    margin-left: 15px;
    color: #050505;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 12pt;
    margin-top: 9px;
}

.s_username_sub {
    display: inline-block;
    margin-left: 15px;
    color: #050505;
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
}

a.s_viewprofile {
    display: block;
    padding: 5px 0 18px 0;
    border-radius: 8px;
}

hr.s_pl_sep {
    border-color: #CED0D4;
}

.s_settings a {
    display: block;
    margin: 10px 0;
    text-decoration: none !important;
    color: #050505;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 11pt;
    padding: 10px 10px;
    border-radius: 8px;
}

.s_settings a span {
    display: inline-block;
    width: 16px;
    margin-right: 5px;
}

.s_tooltip {
 position: relative;
}

.s_tooltip:before {
  content: attr(data-hover);
  position: absolute;
  top:50%;
  transform:translateY(-50%);
  left:100%;
  margin-left:15px;
  width: max-content;
  padding: 5px 10px;
  border-radius: 4px;
  background: #000000d4;
  color: #fff;
  text-align:center;
  display:none;
  font-family: 'Roboto', sans-serif;
  font-size: 9pt;
}

.s_tooltip:hover:before {
  display:block;
}

.s_logorreg {
    position: absolute;
    text-align: center;
    width: 98%;
    left: 2%;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
}

.s_logorreg a {
    text-decoration: none;
    color: #0d8aef;
    font-weight: 500;
}
Jeg
Tue May 03, 2022 5:58 pm
Tuesday, May 3rd 2022
Beware: there is, for now, no difference made for the code between a logged-in user and a guest; which means even guests will see the notifications button, the private messages button and the user box at the bottom (this). This should be updated soon. Updated, see below.
Jeg
Thu May 05, 2022 7:48 pm
Thursday, May 5th 2022
- Guests update: the elements display now change according to the user's current 'role'; guest/registered
- Added the Roboto font in the included external elements
- Added two additional previews to illustrate the guests side of the sidebar
Sponsored content