[Tutorial] Inbox List Elegant Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
+4
SarkZKalie
skouliki
Ape
Daemon
8 posters

    [Tutorial] Inbox List Elegant

    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] Inbox List Elegant Empty [Tutorial] Inbox List Elegant

    Post by Daemon March 23rd 2018, 11:57 pm

    Beautiful Inbox List

    [Tutorial] Inbox List Elegant Sem_ty10

    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.
    Wink


    Last edited by Daemon on June 9th 2018, 5:40 pm; edited 4 times in total

    SarkZKalie likes this post

    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19168
    Reputation : 1995
    Language : fluent in dork / mumbojumbo & English haha

    [Tutorial] Inbox List Elegant Empty Re: [Tutorial] Inbox List Elegant

    Post by Ape March 24th 2018, 12:58 am

    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 ?



    [Tutorial] Inbox List Elegant Left1212[Tutorial] Inbox List Elegant Center11[Tutorial] Inbox List Elegant Right112
    [Tutorial] Inbox List Elegant Ape_b110
    [Tutorial] Inbox List Elegant Ape1010
    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] Inbox List Elegant Empty Re: [Tutorial] Inbox List Elegant

    Post by Daemon March 24th 2018, 2:51 am

    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.

    Very Happy
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15192
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    [Tutorial] Inbox List Elegant Empty Re: [Tutorial] Inbox List Elegant

    Post by skouliki March 24th 2018, 8:33 am

    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
    [Tutorial] Inbox List Elegant Scree223


    tested the code in invision and worked fine Very good

    SarkZKalie
    SarkZKalie
    Support Moderator
    Support Moderator


    Male Posts : 1421
    Reputation : 220
    Language : English

    [Tutorial] Inbox List Elegant Empty Re: [Tutorial] Inbox List Elegant

    Post by SarkZKalie March 24th 2018, 12:48 pm

    Brilliant!



    [Tutorial] Inbox List Elegant Sarkzk10
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19168
    Reputation : 1995
    Language : fluent in dork / mumbojumbo & English haha

    [Tutorial] Inbox List Elegant Empty Re: [Tutorial] Inbox List Elegant

    Post by Ape March 24th 2018, 9:11 pm

    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
    [Tutorial] Inbox List Elegant 1x111



    [Tutorial] Inbox List Elegant Left1212[Tutorial] Inbox List Elegant Center11[Tutorial] Inbox List Elegant Right112
    [Tutorial] Inbox List Elegant Ape_b110
    [Tutorial] Inbox List Elegant Ape1010
    tikky
    tikky
    Forumember


    Posts : 898
    Reputation : 157
    Language : 🇵🇹

    [Tutorial] Inbox List Elegant Empty Re: [Tutorial] Inbox List Elegant

    Post by tikky March 24th 2018, 9:52 pm

    @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;' +
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19168
    Reputation : 1995
    Language : fluent in dork / mumbojumbo & English haha

    [Tutorial] Inbox List Elegant Empty Re: [Tutorial] Inbox List Elegant

    Post by Ape March 24th 2018, 11:24 pm

    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 Wink great work Smile



    [Tutorial] Inbox List Elegant Left1212[Tutorial] Inbox List Elegant Center11[Tutorial] Inbox List Elegant Right112
    [Tutorial] Inbox List Elegant Ape_b110
    [Tutorial] Inbox List Elegant Ape1010
    YoshiGM
    YoshiGM
    Active Poster


    Male Posts : 1502
    Reputation : 144
    Language : Spanish & English
    Location : Mexico

    [Tutorial] Inbox List Elegant Empty Re: [Tutorial] Inbox List Elegant

    Post by YoshiGM March 26th 2018, 5:24 pm

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


    Male Posts : 6921
    Reputation : 795
    Language : Greek, English

    [Tutorial] Inbox List Elegant Empty Re: [Tutorial] Inbox List Elegant

    Post by TheCrow April 2nd 2018, 9:21 pm

    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! Smile
    Keep going! :rose:



    [Tutorial] Inbox List Elegant Thecro10
    Forum of the Forums

    Forumotion Rules | Tips & Tricks |
    FAQ | Did you forget your password?



    *** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
    No support via PM!
    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] Inbox List Elegant Empty Re: [Tutorial] Inbox List Elegant

    Post by Daemon April 2nd 2018, 11:03 pm

    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! Smile
    Keep going! :rose:

    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! ^^
    avatar
    Hardcore Gamer
    Forumember


    Male Posts : 524
    Reputation : 4
    Language : English

    [Tutorial] Inbox List Elegant Empty Re: [Tutorial] Inbox List Elegant

    Post by Hardcore Gamer April 3rd 2018, 12:36 pm

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