[Tutorial] Inbox List Elegant

Go down

[Tutorial] Inbox List Elegant

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

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


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

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] Inbox List Elegant

Post by APE on 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 ?



avatar
APE
Administrator
Administrator

Male Posts : 12728
Reputation : 1344
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: [Tutorial] Inbox List Elegant

Post by Daemon on 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
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] Inbox List Elegant

Post by skouliki on 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



tested the code in invision and worked fine Very good
avatar
skouliki
Manager
Manager

Female Posts : 4328
Reputation : 707
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] Inbox List Elegant

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

Brilliant!


avatar
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 851
Reputation : 135
Language : English

http://rotavn.forumotion.com

Back to top Go down

Re: [Tutorial] Inbox List Elegant

Post by APE on 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



avatar
APE
Administrator
Administrator

Male Posts : 12728
Reputation : 1344
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: [Tutorial] Inbox List Elegant

Post by pedxz on 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;' +
avatar
pedxz
Forumember

Male Posts : 134
Reputation : 27
Language : speaker daemonium & português
Location : Portugal

http://ajuda.forumeiros.com/u62843

Back to top Go down

Re: [Tutorial] Inbox List Elegant

Post by APE on 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



avatar
APE
Administrator
Administrator

Male Posts : 12728
Reputation : 1344
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: [Tutorial] Inbox List Elegant

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

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

Male Posts : 746
Reputation : 106
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Re: [Tutorial] Inbox List Elegant

Post by Luffy on 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:
avatar
Luffy
Manager
Manager

Male Posts : 5636
Reputation : 628
Language : Greek, English
Location : Cyprus, Greece

https://help.forumotion.com

Back to top Go down

Re: [Tutorial] Inbox List Elegant

Post by Daemon on 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
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] Inbox List Elegant

Post by Hardcore Gamer on 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

Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum