[Tutorial] Inbox List Elegant

Go down

[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
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

View user profile

Back to top Go down

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

This is how i would like it
Spoiler:
[Tutorial] Inbox List Elegant 1x110
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 Keep_s10
[Tutorial] Inbox List Elegant Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 16608
Reputation : 1790
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

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

This is how i would like it
Spoiler:
[Tutorial] Inbox List Elegant 1x110
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
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

View user profile

Back to top Go down

[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
skouliki
skouliki
Manager
Manager

Female Posts : 10998
Reputation : 1386
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

[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
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1261
Reputation : 204
Language : English

View user profile https://rotavn.forumotion.com/

Back to top Go down

[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 Keep_s10
[Tutorial] Inbox List Elegant Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 16608
Reputation : 1790
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

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

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

Posts : 478
Reputation : 122
Language : 🇵🇹

View user profile https://www.forumotion.com/create-forum/modernbb

Back to top Go down

[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 Keep_s10
[Tutorial] Inbox List Elegant Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 16608
Reputation : 1790
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

[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
YoshiGM
YoshiGM
Active Poster

Male Posts : 1089
Reputation : 131
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

Back to top Go down

[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:
TheCrow
TheCrow
Manager
Manager

Male Posts : 6675
Reputation : 778
Language : Greek, English

View user profile https://forumote.forumotion.com

Back to top Go down

[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! ^^
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

View user profile

Back to top Go down

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

Male Posts : 524
Reputation : 4
Language : English

View user profile

Back to top Go down

Back to top


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