Detalhes da questão

Endereço do fórum: http://roleplayarkbr.forumeiros.com
Versão do fórum: phpBB2

Descrição

Olá, bom dia.

Como faço para inserir este código no rodapé do forum? (Não necessariamente no rodapé, mas em widget não consigo coloca-lo no final do forum, só nas laterais...)

Código:

<script type="text/javascript">
  $(function() {
  var produtos = {
 
    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
   
    'Doação': {
        icone: 'https://pt.seaicons.com/wp-content/uploads/2016/04/coins-icon.png',
        preco: '5',
        descricao: 'Você pode doar R$5,00 ou mais para ajudar a manter o servidor. Receberá uma Tag no forum de Colaborador, e seu nome ficará em destaque.'
    },
 
    'Tek Armor of Mastercraft': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/2/21/Tek_Chestpiece.png',
        preco: '12',
        descricao: 'Tek Armor é uma armadura Fabrica pelos Hotulhems. Uma armadura que oferece a melhor proteção física e proteção moderada contra o frio. Quando usada com o conjunto Tek completo, ele proporcionará a melhor proteção contra o calor e o frio, devido ao bônus definido.'
    },
 
    'Lymantria': {
        icone: 'http://www.dododex.com/media/creature/lymantria.png',
        preco: '20',
        descricao: 'Uma das grande invenções do Dr. Julm. Em combate a Lymantria lança uma névoa verde de esporos, que retarda seu inimigo, e drena a resistência em 90%. Enquanto seu oponente esta distraído, ela tem a chance de escapar.'
    },

    'Flame Arrow (3 unidades)': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/thumb/d/dc/Flame_Arrow_%28Scorched_Earth%29.png/128px-Flame_Arrow_%28Scorched_Earth%29.png',
        preco: '3',
        descricao: 'Oferece danos na flecha regulares no impacto, causando danos de queimaduras por cerca de 8 segundos, causando aproximadamente 22 pontos por segundo em Humanos. Muito eficaz contra grandes criaturas e carnívoros. Oferece danos reduzidos aos herbívoros.'
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
 
 
  };
 
 
  var content = $('.content .itens');
      $.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
          '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
          '  <td>' +
          '  <ul>' +
          '  <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' Reais</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var $total = 0;
  function addToCart(item) {
    var getItem = $(item).parents('.item').find('.nome').text();
    var getPrice = parseInt($(item).parents('.item').find('.preco').attr('data-myprice'));
    $total += getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt($(item).attr('data-myprice'));
    $total -= getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    $(item).remove();
  }
  function resetItems() {
    $('.cart').empty();
    $total = 0;
    $('.total').empty();
  }
  function buyItems() {
    if(!$('.cart').is(':empty')) {
      var texto = '';
      var total = 0;
      $('.item-cart').each(function() {
        var item = $(this).text();
        var preco = parseInt($(this).attr('data-myprice'));
        texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
        //add line break at the end
        + ':[/b] ' + preco + " reais\n";
        total += preco;
      });
      texto += '\n\n[b]Valor total:[/b] ' + total + ' reais';
      $.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Dentro de 24h a Administração estará lhe enviando por mensagem privada no fórum ou pelo seu email de cadastro, o link para efetuar o pagamento.");
        resetItems();
      });
    } else {
      alert("O carrinho está vazio");
    }
  }
</script><style type="text/css">
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
                   <span style="color: white;font-size: 28px;font-weight: bold;">Ofertas do laboratório do Dr. Julm</span>
</div>
<table class="content">
                       <tbody class="itens"></tbody>
</table>
<div id="cart">
                                 
   <div class="cart">
                                 
   </div>
                   <span class="total"></span>
</div>
<div class="daemon">
                   <input onclick="buyItems()" value="Concluir compra" type="button" />  <input onclick="resetItems()" value="Esvaziar carrinho" type="button" />
</div>

Olá,

Isso pode ser feito com códigos CSS ou Javascript. Tentarei te trazer uma solução.

o/

Com CSS? mas ai é extremamente difícil né ? kkkkk

Olá novamente,
Creio que isso solucionará seu problema.

Aceda à:

Painel de Controle Módulos HTML & Javascript Gestão dos Códigos Javascript

E crie um novo código Javascript.
Título: À seu critério.
Investimento: No índice.
Código:

Código:

$(function(){
    var nomedoforum = ''; // {NOME COMPLETO DO WIGET}
    $('.module:contains("' + nomedoforum + '")').css('width', '80%').detach().appendTo('.forabg');

Obs: Onde tem escrito {NOME COMPLETO DO WIDGET}, o senhor deverá apagar e colocar como solicitado na frase, o nome por completo do widget em que o código está salvo.

Resulta?
o/

---

CSS? kkk. Isso é difícil, né?

É não!
Apenas é complicado de entender pois CSS não tem uma certa lógica, rs.

Nesta região

Código:

nomedoforum

preencho com o correspondente ?

Olá,

Nesta região preencho com o correspondente?

Não.
Isto faz parte do próprio código Javascript. Não é alterável. Explicando a funcionalidade, esta parte do código "instrui" o código em si que a funcionalidade é aplicada com base no que está programado no widget que você colocar em {NOME COMPLETO DO WIDGET}. Um pouco complexo, não?

Peço que siga apenas o que eu deixei na observação.

Até mais!
o/

Bastante complexo  

Beem... não surtiu efeito

Certo,
Peço que me informe o código presente no Widget que você registrou no código Javascript que te passei e que me informe também o nome.

o/

O código do widget é o mesmo código html que uso '-' Acho que rolou algo errado kkkk

O que eu fiz: Peguei o codigo HTML e botei no widget.
O que eu fiz parte2: Peguei o código que voce me passou, e inseri no Painel de Controle  Módulos  HTML & Javascript  Gestão dos Códigos Javascript com o nome do widget inserido: 

Código:

$(function(){
    var nomedoforum = ''; // {Laboratorio do Dr. Julm}
    $('.module:contains("' + nomedoforum + '")').css('width', '80%').detach().appendTo('.forabg');

Olá!

Vamos tentar deixar as coisas mais simples

Crie um novo widget, de forma tradicional, mas desta forma: http://prntscr.com/ii0vrc
Respeitando isso, no campo do código (chamado "Fonte do widget *"), coloque o seguinte código:

Código:

<div id="lojaHancki">
   <script type="text/javascript">
  jQuery(function() {
  var produtos = {
 
    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
 
    'Doação': {
        icone: 'https://pt.seaicons.com/wp-content/uploads/2016/04/coins-icon.png',
        preco: '5',
        descricao: 'Você pode doar RjQuery5,00 ou mais para ajudar a manter o servidor. Receberá uma Tag no forum de Colaborador, e seu nome ficará em destaque.'
    },
 
    'Tek Armor of Mastercraft': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/2/21/Tek_Chestpiece.png',
        preco: '12',
        descricao: 'Tek Armor é uma armadura Fabrica pelos Hotulhems. Uma armadura que oferece a melhor proteção física e proteção moderada contra o frio. Quando usada com o conjunto Tek completo, ele proporcionará a melhor proteção contra o calor e o frio, devido ao bônus definido.'
    },
 
    'Lymantria': {
        icone: 'http://www.dododex.com/media/creature/lymantria.png',
        preco: '20',
        descricao: 'Uma das grande invenções do Dr. Julm. Em combate a Lymantria lança uma névoa verde de esporos, que retarda seu inimigo, e drena a resistência em 90%. Enquanto seu oponente esta distraído, ela tem a chance de escapar.'
    },
 
    'Flame Arrow (3 unidades)': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/thumb/d/dc/Flame_Arrow_%28Scorched_Earth%29.png/128px-Flame_Arrow_%28Scorched_Earth%29.png',
        preco: '3',
        descricao: 'Oferece danos na flecha regulares no impacto, causando danos de queimaduras por cerca de 8 segundos, causando aproximadamente 22 pontos por segundo em Humanos. Muito eficaz contra grandes criaturas e carnívoros. Oferece danos reduzidos aos herbívoros.'
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
 
 
  };
 
 
  var content = jQuery('.content .itens');
      jQuery.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
          '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
          '  <td>' +
          '  <ul>' +
          '  <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' Reais</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var jQuerytotal = 0;
  function addToCart(item) {
    var getItem = jQuery(item).parents('.item').find('.nome').text();
    var getPrice = parseInt(jQuery(item).parents('.item').find('.preco').attr('data-myprice'));
    jQuerytotal += getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt(jQuery(item).attr('data-myprice'));
    jQuerytotal -= getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery(item).remove();
  }
  function resetItems() {
    jQuery('.cart').empty();
    jQuerytotal = 0;
    jQuery('.total').empty();
  }
  function buyItems() {
    if(!jQuery('.cart').is(':empty')) {
      var texto = '';
      var total = 0;
      jQuery('.item-cart').each(function() {
        var item = jQuery(this).text();
        var preco = parseInt(jQuery(this).attr('data-myprice'));
        texto += '<strong>' + item.charAt(0).toUpperCase() + item.slice(1)
        //add line break at the end
        + ':</strong> ' + preco + " reais\n";
        total += preco;
      });
      texto += '\n\n<strong>Valor total:</strong> ' + total + ' reais';
      jQuery.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Dentro de 24h a Administração estará lhe enviando por mensagem privada no fórum ou pelo seu email de cadastro, o link para efetuar o pagamento.");
        resetItems();
      });
    } else {
      alert("O carrinho está vazio");
    }
  }
</script><style type="text/css">
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
   <div class="daemon">
                          <span style="color: white;font-size: 28px;font-weight: bold;">Ofertas do laboratório do Dr. Julm</span>
   </div>
   
   <table class="content">
                              <tbody class="itens"> </tbody>
   </table>
   
   <div id="cart">
                                             
      <div class="cart">
                                                
      </div>
                          <span class="total"></span>
   </div>
   
   <div class="daemon">
                          <input type="button" value="Concluir compra" onclick="buyItems()" />  <input type="button" value="Esvaziar carrinho" onclick="resetItems()" />
   </div>
</div><script>
jQuery(document).ready(function() {
    jQuery('#lojaHancki').prependTo('#page-footer');
});
</script>

Após isso, clicar em salvar.

O que o código faz é basicamente criar um widget exatamente com o código da loja fornecido e depois do código ter sido executado pelo navegador, outro trecho do código vai movê-lo para cima do rodapé no fundo da página. De lembrar que ele vai aparecer onde os widgets também aparecem.
De qualquer das formas, caso queira que ele apareça apenas no início do fórum, é só dizer que adiciono uma exceção.

E caso não queira ter widgets no fórum, podemos fazer exatamente o que eu lhe disse, mas podemos simplesmente esconder a coluna dos widgets com recurso a CSS.

Hancki

Muito show Hancki !!!
Só um porém, ta aparecendo o conteúdo dobrado :/ 

2 coisas na verdade estão rolando... o rodapé constando os usuarios online esta dividido do widget, como organizo isso?

Para resolver a questão de aparecer dobrado, substitua todo o código por este:

Código:

<div id="lojaHancki">
   <script type="text/javascript">
  jQuery(function() {
  var produtos = {
 
    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
 
    'Doação': {
        icone: 'https://pt.seaicons.com/wp-content/uploads/2016/04/coins-icon.png',
        preco: '5',
        descricao: 'Você pode doar RjQuery5,00 ou mais para ajudar a manter o servidor. Receberá uma Tag no forum de Colaborador, e seu nome ficará em destaque.'
    },
 
    'Tek Armor of Mastercraft': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/2/21/Tek_Chestpiece.png',
        preco: '12',
        descricao: 'Tek Armor é uma armadura Fabrica pelos Hotulhems. Uma armadura que oferece a melhor proteção física e proteção moderada contra o frio. Quando usada com o conjunto Tek completo, ele proporcionará a melhor proteção contra o calor e o frio, devido ao bônus definido.'
    },
 
    'Lymantria': {
        icone: 'http://www.dododex.com/media/creature/lymantria.png',
        preco: '20',
        descricao: 'Uma das grande invenções do Dr. Julm. Em combate a Lymantria lança uma névoa verde de esporos, que retarda seu inimigo, e drena a resistência em 90%. Enquanto seu oponente esta distraído, ela tem a chance de escapar.'
    },
 
    'Flame Arrow (3 unidades)': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/thumb/d/dc/Flame_Arrow_%28Scorched_Earth%29.png/128px-Flame_Arrow_%28Scorched_Earth%29.png',
        preco: '3',
        descricao: 'Oferece danos na flecha regulares no impacto, causando danos de queimaduras por cerca de 8 segundos, causando aproximadamente 22 pontos por segundo em Humanos. Muito eficaz contra grandes criaturas e carnívoros. Oferece danos reduzidos aos herbívoros.'
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
 
 
  };
 
 
  var content = jQuery('.content .itens');
      jQuery.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
          '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
          '  <td>' +
          '  <ul>' +
          '  <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' Reais</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var jQuerytotal = 0;
  function addToCart(item) {
    var getItem = jQuery(item).parents('.item').find('.nome').text();
    var getPrice = parseInt(jQuery(item).parents('.item').find('.preco').attr('data-myprice'));
    jQuerytotal += getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt(jQuery(item).attr('data-myprice'));
    jQuerytotal -= getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery(item).remove();
  }
  function resetItems() {
    jQuery('.cart').empty();
    jQuerytotal = 0;
    jQuery('.total').empty();
  }
  function buyItems() {
    if(!jQuery('.cart').is(':empty')) {
      var texto = '';
      var total = 0;
      jQuery('.item-cart').each(function() {
        var item = jQuery(this).text();
        var preco = parseInt(jQuery(this).attr('data-myprice'));
        texto += '<strong>' + item.charAt(0).toUpperCase() + item.slice(1)
        //add line break at the end
        + ':</strong> ' + preco + " reais\n";
        total += preco;
      });
      texto += '\n\n<strong>Valor total:</strong> ' + total + ' reais';
      jQuery.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Dentro de 24h a Administração estará lhe enviando por mensagem privada no fórum ou pelo seu email de cadastro, o link para efetuar o pagamento.");
        resetItems();
      });
    } else {
      alert("O carrinho está vazio");
    }
  }
</script><style type="text/css">
#lojaHancki > table > tbody > tr.item:nth-child(1),#lojaHancki > table > tbody > tr.item:nth-child(2), #lojaHancki > table > tbody > tr.item:nth-child(3), #lojaHancki > table > tbody > tr.item:nth-child(4) { display:none !important;}
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
   <div class="daemon">
                          <span style="color: white;font-size: 28px;font-weight: bold;">Ofertas do laboratório do Dr. Julm</span>
   </div>
   
   <table class="content">
                              <tbody class="itens"> </tbody>
   </table>
   
   <div id="cart">
                                             
      <div class="cart">
                                                
      </div>
                          <span class="total"></span>
   </div>
   
   <div class="daemon">
                          <input type="button" value="Concluir compra" onclick="buyItems()" />  <input type="button" value="Esvaziar carrinho" onclick="resetItems()" />
   </div>
</div><script>
jQuery(document).ready(function() {
    jQuery('#lojaHancki').prependTo('#page-footer');
});
</script>

A segunda parte é que não entendi. Deseja que a loja fique noutro sítio ou apenas quer dar espaço entre o quadro dos usuários online e a loja?

Hancki

Perfeito, não esta dobrado mais XD

Agora... a questão é que, ele ficou após o rodapé, o que torna muito fora de cena, entende? confira al a imagem que consta os Usuário registrados... Tantos usuarios Registrados... Os nossos membros postaram um total de 15 mensagens

Já percebi! Agora vai ficar melhor!
Use este código:

Código:

<div id="lojaHancki">
  <script type="text/javascript">
  jQuery(function() {
  var produtos = {
 
    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
 
    'Doação': {
        icone: 'https://pt.seaicons.com/wp-content/uploads/2016/04/coins-icon.png',
        preco: '5',
        descricao: 'Você pode doar RjQuery5,00 ou mais para ajudar a manter o servidor. Receberá uma Tag no forum de Colaborador, e seu nome ficará em destaque.'
    },
 
    'Tek Armor of Mastercraft': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/2/21/Tek_Chestpiece.png',
        preco: '12',
        descricao: 'Tek Armor é uma armadura Fabrica pelos Hotulhems. Uma armadura que oferece a melhor proteção física e proteção moderada contra o frio. Quando usada com o conjunto Tek completo, ele proporcionará a melhor proteção contra o calor e o frio, devido ao bônus definido.'
    },
 
    'Lymantria': {
        icone: 'http://www.dododex.com/media/creature/lymantria.png',
        preco: '20',
        descricao: 'Uma das grande invenções do Dr. Julm. Em combate a Lymantria lança uma névoa verde de esporos, que retarda seu inimigo, e drena a resistência em 90%. Enquanto seu oponente esta distraído, ela tem a chance de escapar.'
    },
 
    'Flame Arrow (3 unidades)': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/thumb/d/dc/Flame_Arrow_%28Scorched_Earth%29.png/128px-Flame_Arrow_%28Scorched_Earth%29.png',
        preco: '3',
        descricao: 'Oferece danos na flecha regulares no impacto, causando danos de queimaduras por cerca de 8 segundos, causando aproximadamente 22 pontos por segundo em Humanos. Muito eficaz contra grandes criaturas e carnívoros. Oferece danos reduzidos aos herbívoros.'
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
 
 
  };
 
 
  var content = jQuery('.content .itens');
      jQuery.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
          '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
          '  <td>' +
          '  <ul>' +
          '  <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' Reais</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var jQuerytotal = 0;
  function addToCart(item) {
    var getItem = jQuery(item).parents('.item').find('.nome').text();
    var getPrice = parseInt(jQuery(item).parents('.item').find('.preco').attr('data-myprice'));
    jQuerytotal += getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt(jQuery(item).attr('data-myprice'));
    jQuerytotal -= getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery(item).remove();
  }
  function resetItems() {
    jQuery('.cart').empty();
    jQuerytotal = 0;
    jQuery('.total').empty();
  }
  function buyItems() {
    if(!jQuery('.cart').is(':empty')) {
      var texto = '';
      var total = 0;
      jQuery('.item-cart').each(function() {
        var item = jQuery(this).text();
        var preco = parseInt(jQuery(this).attr('data-myprice'));
        texto += '<strong>' + item.charAt(0).toUpperCase() + item.slice(1)
        //add line break at the end
        + ':</strong> ' + preco + " reais\n";
        total += preco;
      });
      texto += '\n\n<strong>Valor total:</strong> ' + total + ' reais';
      jQuery.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Dentro de 24h a Administração estará lhe enviando por mensagem privada no fórum ou pelo seu email de cadastro, o link para efetuar o pagamento.");
        resetItems();
      });
    } else {
      alert("O carrinho está vazio");
    }
  }
</script><style type="text/css">
#lojaHancki > table > tbody > tr.item:nth-child(1),#lojaHancki > table > tbody > tr.item:nth-child(2), #lojaHancki > table > tbody > tr.item:nth-child(3), #lojaHancki > table > tbody > tr.item:nth-child(4) { display:none !important;}
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
  <div class="daemon">
                          <span style="color: white;font-size: 28px;font-weight: bold;">Ofertas do laboratório do Dr. Julm</span>
  </div>
 
  <table class="content">
                              <tbody class="itens"> </tbody>
  </table>
 
  <div id="cart">
                                           
      <div class="cart">
                                               
      </div>
                          <span class="total"></span>
  </div>
 
  <div class="daemon">
                          <input type="button" value="Concluir compra" onclick="buyItems()" />  <input type="button" value="Esvaziar carrinho" onclick="resetItems()" />
  </div>
</div><script>
jQuery(document).ready(function() {
    jQuery('#lojaHancki').appendTo('#content-container #content-main');
});
</script>

Hancki

Sem palavras... ficou nota 1000 !

Super resolvido, brigadão amigo !