[Tutorial] Inbox List Elegant

Beautiful Inbox List



Create a new JavaScript code with the following content (The placement "All pages"):

Code:

/*
 *  Application: Inbox List Elegant
 *  Date: 22/04/2018
 *  Version: 1.322042018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
*/
jQuery(document).ready(function() {
if(_userdata.session_logged_in < 1) return;
 
var lang = {
    newMessage: "New Message",
    inbox: "Inbox",
    goToMessages: "Go To Messages"
};
 
var images = {
    loading: "http://i.imgur.com/DYwSiJf.gif",
    photo: "http://i.imgur.com/n4qY3fc.png"
};
 
var config = {
    qtdMP: 5, // Set here the number of messages that will be displayed
    inboxList: jQuery("<div>",{
        id: "daemon-inbox"
    }).html(
    '<div class="inbox-header">' +
    '    <a href="/privmsg?mode=post" class="inbox-compose" target="_self">' + lang.newMessage + '</a>' +
    '    <h4 class="inbox-sectionhead">' + lang.inbox + '</h4>' +
    '</div>' +
    '<ol class="inbox-inner">' +
    '    <img src="' + images.loading + '" style="margin: 5px auto;display: block;" />' +
    '</ol>' +
    '<div class="inbox-footer">' +
    '    <a href="/privmsg?folder=inbox">' + lang.goToMessages + '</a>' +
    '</div>'
    ),
    myCSS: '<style type="text/css">' +
        '#daemon-inbox {' +
        '  font-size: 13px;' +
        '  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;' +
        '  line-height: 18px;' +
        '  margin-top: 15px;' +
        '  display: none;' +
        '  width: 450px;' +
        '  background: #fff;' +
        '  box-shadow: 0px 15px 110px rgba(0,0,0,0.2);' +
        '  border-radius: 3px;' +
        '  z-index: 200;' +
        '  position: absolute;' +
        '}' +
        '#daemon-inbox a {' +
        '  color: #255b79;' +
        '  text-decoration: none;' +
        '}' +
        '#daemon-inbox a:hover {' +
        '  color: #cd3816;' +
        '}' +
        '#daemon-inbox:before {' +
        '  border-style: solid;' +
        '  border-width: 15px;' +
        '  border-color: transparent transparent #fff;' +
        '  bottom: 100%;' +
        '  pointer-events: none;' +
        '  left: 15px;' +
        '  content: "";' +
        '  display: block;' +
        '  height: 0;' +
        '  position: absolute;' +
        '  width: 0;' +
        '  z-index: 3;' +
        '}' +
        '.inbox-header {' +
        '  background: #fff url(http://i.imgur.com/sl0Efuz.png) repeat-x 0 0;' +
        '  border-bottom: 1px solid #e0e0e0;' +
        '  box-shadow: 0px 1px 6px rgba(0,0,0,0.07);' +
        '  border-radius: 3px 3px 0px 0px;' +
        '  padding: 10px;' +
        '  line-height: 24px;' +
        '}' +
        '.inbox-header .inbox-compose {' +
        '  font-size: 12px;' +
        '  line-height: 28px;' +
        '  padding: 0 15px;' +
        '  float: right;' +
        '  background: #262e33;' +
        '  color: #ffffff !important;' +
        '  font-weight: 500;' +
        '  text-align: center;' +
        '  text-decoration: none;' +
        '  text-shadow: none;' +
        '  white-space: nowrap;' +
        '  display: inline-block;' +
        '  vertical-align: middle;' +
        '  border-radius: 3px;' +
        '  border: 1px solid rgba(0,0,0,0.1);' +
        '  -webkit-transition: 0.1s all linear;' +
        '  -moz-transition: 0.1s all linear;' +
        '  -ms-transition: 0.1s all linear;' +
        '  -o-transition: 0.1s all linear;' +
        '  transition: 0.1s all linear;' +
        '  -webkit-user-select: none;' +
        '  -moz-user-select: none;' +
        '  -ms-user-select: none;' +
        '  -o-user-select: none;' +
        '  user-select: none;' +
        '  -webkit-font-smoothing: antialiased;' +
        '}' +
        '.inbox-header .inbox-compose:hover {' +
        '  background-image: url(http://i.imgur.com/eaB5FHK.png);' +
        '  background-repeat: repeat;' +
        '}' +
        '.inbox-compose {' +
        '  font-size: 18px;' +
        '  color: #333333;' +
        '  line-height: 24px;' +
        '  font-weight: 400;' +
        '  display: inline-block;' +
        '  margin: 0;' +
        '}' +
        '.inbox-inner {' +
        '  width: 100%;' +
        '  display: table;' +
        '  table-layout: auto;' +
        '  position: relative;' +
        '  border-collapse: separate;' +
        '  border-spacing: 0;' +
        '  list-style: none;' +
        '  padding: 0;' +
        '  margin: 0;' +
        '}' +
        '.inbox-li {' +
        '  width: 100%;' +
        '  position: relative;' +
        '  padding: 5px 3px;' +
        '  border-width: 0 0 1px 0;' +
        '  border-style: solid;' +
        '  border-color: #f5f5f5;' +
        '  box-sizing: border-box;' +
        '}' +
        '.inbox-li:last-child {border-bottom: 0;}' +
        '.inbox-li strong {font-weight: normal !important;}' +
        '.inbox-item, .inbox-user {' +
        '  display: table-cell;' +
        '  padding: 8px 10px;' +
        '}' +
        '.inbox-item {color: #9c9c9c;}' +
        '.inbox-item .topictitle {display: inherit;}' +
        '.inbox-footer {' +
        '  background: #fff url(http://i.imgur.com/sl0Efuz.png) repeat-x 0 0;' +
        '  text-align: center;' +
        '  padding: 10px;' +
        '  line-height: 24px;' +
        '  border-top: 1px solid #e0e0e0;' +
        '  box-shadow: 0px -1px 6px rgba(0,0,0,0.07);' +
        '  border-radius: 0px 0px 3px 3px;' +
        '}' +
        '.inbox-photo {' +
        '  background: #fff;' +
        '  border: 1px solid #fff;' +
        '  box-shadow: 0px 0px 0px 1px #e2e2e2;' +
        '  padding: 0.5px;' +
        '  vertical-align: middle;' +
        '  line-height: 1px;' +
        '  position: relative;' +
        '  border-radius: 150px;' +
        '  width: 34px;' +
        '  height: 34px;' +
        '}' +
        '</style>'
};
 
// Inserting CSS before page body
jQuery(config.myCSS).insertBefore("body");
// Inserting element inboxList append to page body
jQuery(config.inboxList).appendTo("body");
 
jQuery(document).on("click", "a.mainmenu[href='/privmsg?folder=inbox']", function(inbox) {
  if(config.inboxList.css("display") != "none") {
      config.inboxList.fadeOut("slow");
  } else {
      config.inboxList.css({
          "left": jQuery(this).offset().left,
          "top": jQuery(this).offset().top + jQuery(this).outerHeight()
      }).show();
      if(!config.inboxList.find(".inbox-photo").length) {
          config.inboxList.find(".inbox-inner").load("/privmsg?folder=inbox&change_version=punbb .tdtopics:lt(" + config.qtdMP + ")", function() {
              jQuery(this).html(
                  jQuery(this).html()
                  .replace(/\<\/td\>/g, "</div></li>")
                  .replace(/\<td class="tcl tdtopics"\>/g, "<li class='inbox-li clearfix'><div class='inbox-user'><img class='inbox-photo' alt='photo' src='" + images.photo + "' /></div><div class='inbox-item'>")
              ).find("span.status").remove();
              config.inboxList.find(".inbox-li").each(function() {
                  jQuery(this).find("a").each(function() {
                      var href = jQuery(this).attr("href").split(/(&change|\?change)/g)[0];
                      jQuery(this).attr("href", href);
                  });
                  var user = jQuery(this).find("a[href^='/u']").attr("href");
                  var elPhoto = jQuery(this).find(".inbox-photo");
                  var userImage = sessionStorage.getItem(user);
                  if(userImage) {
                      elPhoto.attr("src", userImage);
                  } else {
                      jQuery.get(user + "?change_version=punbb", function(data) {
                          var getImage = jQuery("#profile-advanced-right .main-content img:first", data).attr("src");
                          elPhoto.attr("src", getImage);
                          sessionStorage.setItem(user,getImage);
                      });
                  }
              });
          });
      }
  }
  return false;
});
});

The instructions are inside the code.

Great stuff, I have my PM box to the right hand side not the left so when you click on your new PM in the navbar it moves to the right and messes up my forum is there away to move it so the box open to the left not the right

This is how it is now

Spoiler:

This is how i would like it

Spoiler:

also is there away to make it more darker to fit in with my forum ?

APE wrote:Great stuff, I have my PM box to the right hand side not the left so when you click on your new PM in the navbar it moves to the right and messes up my forum is there away to move it so the box open to the left not the right

This is how it is now

Spoiler:

This is how i would like it

Spoiler:

also is there away to make it more darker to fit in with my forum ?

Change this:

Code:

"left": jQuery(this).offset().left

For this:

Code:

"right": jQuery(this).offset().left

Find this:

Code:

'  #bs_full_inbox:before {' +
'  border-style: solid;' +
'  border-width: 15px;' +
'  border-color: transparent transparent #fff;' +
'  bottom: 100%;' +
'  pointer-events: none;' +
'  left: 15px;' +
'  content: "";' +
'  display: block;' +
'  height: 0;' +
'  position: absolute;' +
'  width: 0;' +
'  z-index: 3;' +
'  }' +

And replace left by right.

hello

this is very nice
if we have the navbar on the left side and, not at the top can this work? i tried and i get no result



tested the code in invision and worked fine

Brilliant!

That is not what I meant lol

if you see here now its on the left hand side of the forum and my navbar is on the right hand side
I wanted the bubble to be moved over.

This is what it is doing now but the PM is on the right in the red ring

@Ape


You can edit the CSS, for example

Code:

/*
 *  Application: Inbox List Elegant
 *  Date: 19/08/2014
 *  Version: 1.219082014
 *  Copyright (c) 2014 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
*/
jQuery(document).ready(function() {
if(_userdata.session_logged_in < 1) return;
 
// Set here below the number of messages that will be displayed
var qtdMP = 5;
 
jQuery("head").append(
'<style type="text/css">' +
'  #bs_full_inbox {' +
'  font-size: 13px;' +
'  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;' +
'  line-height: 18px;' +
'  margin-top: 15px;' +
'  display: none;' +
'  width: 450px;' +
'  background: #fff;' +
'  box-shadow: 0px 15px 110px rgba(0,0,0,0.2);' +
'  border-radius: 3px;' +
'  z-index: 200;' +
'  position: absolute;' +
'  margin-left: -200px!important;' +
'  }' +
'  #bs_full_inbox a {' +
'  color: #255b79;' +
'  text-decoration: none;' +
'  }' +
'  #bs_full_inbox a:hover {' +
'  color: #cd3816;' +
'  }' +
'  #bs_full_inbox:before {' +
'  border-style: solid;' +
'  border-width: 15px;' +
'  border-color: transparent transparent #fff;' +
'  bottom: 100%;' +
'  pointer-events: none;' +
'  right: 15px;' +
'  content: "";' +
'  display: block;' +
'  height: 0;' +
'  position: absolute;' +
'  width: 0;' +
'  z-index: 3;' +
'  }' +
'  .bs_inbox_header {' +
'  background: #fff url(http://i.imgur.com/sl0Efuz.png) repeat-x 0 0;' +
'  border-bottom: 1px solid #e0e0e0;' +
'  box-shadow: 0px 1px 6px rgba(0,0,0,0.07);' +
'  border-radius: 3px 3px 0px 0px;' +
'  padding: 10px;' +
'  line-height: 24px;' +
'  }' +
'  .bs_inbox_header .compose {' +
'  font-size: 12px;' +
'  line-height: 28px;' +
'  padding: 0 15px;' +
'  float: right;' +
'  background: #262e33;' +
'  color: #ffffff !important;' +
'  font-weight: 500;' +
'  text-align: center;' +
'  text-decoration: none;' +
'  text-shadow: none;' +
'  white-space: nowrap;' +
'  display: inline-block;' +
'  vertical-align: middle;' +
'  border-radius: 3px;' +
'  border: 1px solid rgba(0,0,0,0.1);' +
'  -webkit-transition: 0.1s all linear;' +
'  -moz-transition: 0.1s all linear;' +
'  -ms-transition: 0.1s all linear;' +
'  -o-transition: 0.1s all linear;' +
'  transition: 0.1s all linear;' +
'  -webkit-user-select: none;' +
'  -moz-user-select: none;' +
'  -ms-user-select: none;' +
'  -o-user-select: none;' +
'  user-select: none;' +
'  -webkit-font-smoothing: antialiased;' +
'  }' +
'  .bs_inbox_header .compose:hover {' +
'  background-image: url(http://i.imgur.com/eaB5FHK.png);' +
'  background-repeat: repeat;' +
'  }' +
'  .bs_inbox_sectionHead {' +
'  font-size: 18px;' +
'  color: #333333;' +
'  line-height: 24px;' +
'  font-weight: 400;' +
'  display: inline-block;' +
'  margin: 0;' +
'  }' +
'  .bs_inbox_inner {' +
'  width: 100%;' +
'  display: table;' +
'  table-layout: auto;' +
'  position: relative;' +
'  border-collapse: separate;' +
'  border-spacing: 0;' +
'  list-style: none;' +
'  padding: 0;' +
'  margin: 0;' +
'  }' +
'  .bs_inbox_li {' +
'  width: 100%;' +
'  position: relative;' +
'  padding: 5px 3px;' +
'  border-width: 0 0 1px 0;' +
'  border-style: solid;' +
'  border-color: #f5f5f5;' +
'  box-sizing: border-box;' +
'  }' +
'  .bs_inbox_li:last-child {border-bottom: 0;}' +
'  .bs_inbox_li strong {font-weight: normal !important;}' +
'  .bs_inbox_item, .bs_user_p {' +
'  display: table-cell;' +
'  padding: 8px 10px;' +
'  }' +
'  .bs_inbox_item {color: #9c9c9c;}' +
'  .bs_inbox_item .topictitle {display: inherit;}' +
'  .bs_inbox_footer {' +
'  background: #fff url(http://i.imgur.com/sl0Efuz.png) repeat-x 0 0;' +
'  text-align: center;' +
'  padding: 10px;' +
'  line-height: 24px;' +
'  border-top: 1px solid #e0e0e0;' +
'  box-shadow: 0px -1px 6px rgba(0,0,0,0.07);' +
'  border-radius: 0px 0px 3px 3px;' +
'  }' +
'  .bs_inbox_photo {' +
'  background: #fff;' +
'  border: 1px solid #fff;' +
'  box-shadow: 0px 0px 0px 1px #e2e2e2;' +
'  padding: 0.5px;' +
'  vertical-align: middle;' +
'  line-height: 1px;' +
'  position: relative;' +
'  border-radius: 150px;' +
'  width: 34px;' +
'  height: 34px;' +
'  }' +
'</style>'
);
 
var inboxList = jQuery("<div>",{
    id: "bs_full_inbox"
}).html(
'<div class="bs_inbox_header">' +
'    <a href="/privmsg?mode=post" class="compose" target="_self">New Message</a>' +
'    <h4 class="bs_inbox_sectionHead">Inbox</h4>' +
'</div>' +
'<ol class="bs_inbox_inner">' +
'    <img src="http://i.imgur.com/DYwSiJf.gif" style="margin: 5px auto;display: block;" />' +
'</ol>' +
'<div class="bs_inbox_footer">' +
'    <a href="/privmsg?folder=inbox">Go To Messages</a>' +
'</div>'
);
 
jQuery("body").append(inboxList);
jQuery("a.mainmenu[href='/privmsg?folder=inbox']").click(function(inbox) {
  if(inboxList.css("display") != "none") {
      inboxList.fadeOut("slow");
  } else {
      inboxList.css({
          "left": jQuery(this).offset().left,
          "top": jQuery(this).offset().top + jQuery(this).outerHeight()
      }).show();
      if(!inboxList.find(".bs_inbox_photo").length) {
          inboxList.find(".bs_inbox_inner").load("/privmsg?folder=inbox&change_version=punbb .tdtopics:lt(" + qtdMP + ")", function() {
              jQuery(this).html(
                  jQuery(this).html()
                  .replace(/\<\/td\>/g, "</span></div></li>")
                  .replace(/\<td class="tcl tdtopics"\>/g, "<li class='bs_inbox_li clearfix'><div class='bs_user_p left'><img class='bs_inbox_photo' alt='photo' src='http://i.imgur.com/n4qY3fc.png' /></div><div class='bs_inbox_item'>")
              ).find("span.status").remove();
              inboxList.find(".bs_inbox_li").each(function() {
                  jQuery(this).find("a").each(function() {
                      var href = jQuery(this).attr("href").split(/(&change|\?change)/g)[0];
                      jQuery(this).attr("href", href);
                  });
                  var user = jQuery(this).find("a[href^='/u']").attr("href");
                  var elPhoto = jQuery(this).find(".bs_inbox_photo");
                  var userImage = sessionStorage.getItem(user);
                  if(userImage) {
                      elPhoto.attr("src", userImage);
                  } else {
                      jQuery.get(user + "?change_version=punbb", function(data) {
                          var getImage = jQuery("#profile-advanced-right .main-content img:first", data).attr("src");
                          elPhoto.attr("src", getImage);
                          sessionStorage.setItem(user,getImage);
                      });
                  }
              });
          });
      }
  }
  return false;
});
});


find bs_full_inbox and change to

Code: '  margin-left: -Xpx!important;' +

pedxz wrote:@Ape


You can edit the CSS, for example

Code:

/*
 *  Application: Inbox List Elegant
 *  Date: 19/08/2014
 *  Version: 1.219082014
 *  Copyright (c) 2014 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
*/
jQuery(document).ready(function() {
if(_userdata.session_logged_in < 1) return;
 
// Set here below the number of messages that will be displayed
var qtdMP = 5;
 
jQuery("head").append(
'<style type="text/css">' +
'  #bs_full_inbox {' +
'  font-size: 13px;' +
'  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;' +
'  line-height: 18px;' +
'  margin-top: 15px;' +
'  display: none;' +
'  width: 450px;' +
'  background: #fff;' +
'  box-shadow: 0px 15px 110px rgba(0,0,0,0.2);' +
'  border-radius: 3px;' +
'  z-index: 200;' +
'  position: absolute;' +
'  margin-left: -200px!important;' +
'  }' +
'  #bs_full_inbox a {' +
'  color: #255b79;' +
'  text-decoration: none;' +
'  }' +
'  #bs_full_inbox a:hover {' +
'  color: #cd3816;' +
'  }' +
'  #bs_full_inbox:before {' +
'  border-style: solid;' +
'  border-width: 15px;' +
'  border-color: transparent transparent #fff;' +
'  bottom: 100%;' +
'  pointer-events: none;' +
'  right: 15px;' +
'  content: "";' +
'  display: block;' +
'  height: 0;' +
'  position: absolute;' +
'  width: 0;' +
'  z-index: 3;' +
'  }' +
'  .bs_inbox_header {' +
'  background: #fff url(http://i.imgur.com/sl0Efuz.png) repeat-x 0 0;' +
'  border-bottom: 1px solid #e0e0e0;' +
'  box-shadow: 0px 1px 6px rgba(0,0,0,0.07);' +
'  border-radius: 3px 3px 0px 0px;' +
'  padding: 10px;' +
'  line-height: 24px;' +
'  }' +
'  .bs_inbox_header .compose {' +
'  font-size: 12px;' +
'  line-height: 28px;' +
'  padding: 0 15px;' +
'  float: right;' +
'  background: #262e33;' +
'  color: #ffffff !important;' +
'  font-weight: 500;' +
'  text-align: center;' +
'  text-decoration: none;' +
'  text-shadow: none;' +
'  white-space: nowrap;' +
'  display: inline-block;' +
'  vertical-align: middle;' +
'  border-radius: 3px;' +
'  border: 1px solid rgba(0,0,0,0.1);' +
'  -webkit-transition: 0.1s all linear;' +
'  -moz-transition: 0.1s all linear;' +
'  -ms-transition: 0.1s all linear;' +
'  -o-transition: 0.1s all linear;' +
'  transition: 0.1s all linear;' +
'  -webkit-user-select: none;' +
'  -moz-user-select: none;' +
'  -ms-user-select: none;' +
'  -o-user-select: none;' +
'  user-select: none;' +
'  -webkit-font-smoothing: antialiased;' +
'  }' +
'  .bs_inbox_header .compose:hover {' +
'  background-image: url(http://i.imgur.com/eaB5FHK.png);' +
'  background-repeat: repeat;' +
'  }' +
'  .bs_inbox_sectionHead {' +
'  font-size: 18px;' +
'  color: #333333;' +
'  line-height: 24px;' +
'  font-weight: 400;' +
'  display: inline-block;' +
'  margin: 0;' +
'  }' +
'  .bs_inbox_inner {' +
'  width: 100%;' +
'  display: table;' +
'  table-layout: auto;' +
'  position: relative;' +
'  border-collapse: separate;' +
'  border-spacing: 0;' +
'  list-style: none;' +
'  padding: 0;' +
'  margin: 0;' +
'  }' +
'  .bs_inbox_li {' +
'  width: 100%;' +
'  position: relative;' +
'  padding: 5px 3px;' +
'  border-width: 0 0 1px 0;' +
'  border-style: solid;' +
'  border-color: #f5f5f5;' +
'  box-sizing: border-box;' +
'  }' +
'  .bs_inbox_li:last-child {border-bottom: 0;}' +
'  .bs_inbox_li strong {font-weight: normal !important;}' +
'  .bs_inbox_item, .bs_user_p {' +
'  display: table-cell;' +
'  padding: 8px 10px;' +
'  }' +
'  .bs_inbox_item {color: #9c9c9c;}' +
'  .bs_inbox_item .topictitle {display: inherit;}' +
'  .bs_inbox_footer {' +
'  background: #fff url(http://i.imgur.com/sl0Efuz.png) repeat-x 0 0;' +
'  text-align: center;' +
'  padding: 10px;' +
'  line-height: 24px;' +
'  border-top: 1px solid #e0e0e0;' +
'  box-shadow: 0px -1px 6px rgba(0,0,0,0.07);' +
'  border-radius: 0px 0px 3px 3px;' +
'  }' +
'  .bs_inbox_photo {' +
'  background: #fff;' +
'  border: 1px solid #fff;' +
'  box-shadow: 0px 0px 0px 1px #e2e2e2;' +
'  padding: 0.5px;' +
'  vertical-align: middle;' +
'  line-height: 1px;' +
'  position: relative;' +
'  border-radius: 150px;' +
'  width: 34px;' +
'  height: 34px;' +
'  }' +
'</style>'
);
 
var inboxList = jQuery("<div>",{
    id: "bs_full_inbox"
}).html(
'<div class="bs_inbox_header">' +
'    <a href="/privmsg?mode=post" class="compose" target="_self">New Message</a>' +
'    <h4 class="bs_inbox_sectionHead">Inbox</h4>' +
'</div>' +
'<ol class="bs_inbox_inner">' +
'    <img src="http://i.imgur.com/DYwSiJf.gif" style="margin: 5px auto;display: block;" />' +
'</ol>' +
'<div class="bs_inbox_footer">' +
'    <a href="/privmsg?folder=inbox">Go To Messages</a>' +
'</div>'
);
 
jQuery("body").append(inboxList);
jQuery("a.mainmenu[href='/privmsg?folder=inbox']").click(function(inbox) {
  if(inboxList.css("display") != "none") {
      inboxList.fadeOut("slow");
  } else {
      inboxList.css({
          "left": jQuery(this).offset().left,
          "top": jQuery(this).offset().top + jQuery(this).outerHeight()
      }).show();
      if(!inboxList.find(".bs_inbox_photo").length) {
          inboxList.find(".bs_inbox_inner").load("/privmsg?folder=inbox&change_version=punbb .tdtopics:lt(" + qtdMP + ")", function() {
              jQuery(this).html(
                  jQuery(this).html()
                  .replace(/\<\/td\>/g, "</span></div></li>")
                  .replace(/\<td class="tcl tdtopics"\>/g, "<li class='bs_inbox_li clearfix'><div class='bs_user_p left'><img class='bs_inbox_photo' alt='photo' src='http://i.imgur.com/n4qY3fc.png' /></div><div class='bs_inbox_item'>")
              ).find("span.status").remove();
              inboxList.find(".bs_inbox_li").each(function() {
                  jQuery(this).find("a").each(function() {
                      var href = jQuery(this).attr("href").split(/(&change|\?change)/g)[0];
                      jQuery(this).attr("href", href);
                  });
                  var user = jQuery(this).find("a[href^='/u']").attr("href");
                  var elPhoto = jQuery(this).find(".bs_inbox_photo");
                  var userImage = sessionStorage.getItem(user);
                  if(userImage) {
                      elPhoto.attr("src", userImage);
                  } else {
                      jQuery.get(user + "?change_version=punbb", function(data) {
                          var getImage = jQuery("#profile-advanced-right .main-content img:first", data).attr("src");
                          elPhoto.attr("src", getImage);
                          sessionStorage.setItem(user,getImage);
                      });
                  }
              });
          });
      }
  }
  return false;
});
});


find bs_full_inbox and change to

Code: '  margin-left: -Xpx!important;' +

Thank you @pedxz that worked great work

Wow, good work! I'm going to install it in my forum
Thanks

Great work @Daemon,

Quick question. Can this be added to a custom navbar too?

Overall great work and thank you for providing us with these codes!
Keep going!

Luffy wrote:Great work @Daemon,

Quick question. Can this be added to a custom navbar too?

Overall great work and thank you for providing us with these codes!
Keep going!

Yes, this can be added in a custom menu! Just change the link in the following code snippet:

Code:

a.mainmenu[href='/privmsg?folder=inbox']

My regards! ^^

Great work, I like the idea. I've noticed that the code is somewhat laggy/slow and delayed on my end with ModernBB.