Capa de Post

• Descrição:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Olá,
Gostaria da ajuda de algum de vocês, para ver se é possível criar uma espécie de capa de post, que será alterada pelo campo do perfil pelo usuário, assim irá aparecer na área circulada de vermelho na imagem.

• Informações:

Código:


/**
 * @CP_AddOn Addons for the Forumotion control panel
 * @copyright Copyright (C) 2014 JScript
 * @license http://www.gnu.org/licenses/gpl.html GPL version 2 or higher
 * @engine 1.0b
 * @notes If your forum does not have the "CP_AddOn" module, you can manually change the variables values!

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<mod>
 <header>
 <id>BestSkinsProfile</id>
 <title>BestSkins Profile Exclusive</title>
 <version>2.12092014</version>
 <description>Exclusive Profile for Users of BestSkins</description>
 <author>DeeW.</author>
 <author-notes>Second Version, no bugs!!</author-notes>
 <license>General Public License v2</license>
 <mod-version>1.0.0.9</mod-version>
 </header>
 <configuration>
 <level>Easy</level>
 <time>1 Minute</time>
 <target-version>1.0b</target-version>
 <action type="input">
 <text>ID do campo da capa:</text>
 <variable>sCover</variable>
 </action>
 <action type="input">
 <text>ID do campo da reputação:</text>
 <variable>sReputation</variable>
 </action>
 <action type="input">
 <text>ID do campo dos pontos/moedas:</text>
 <variable>sPoints</variable>
 </action>
 </configuration>
</mod>
*/
// User Variables
var sCover = $('#field_id2 .field_uneditable').text();
var sAvatar = $('.center > img').attr('src');
var sReputation = $('#field_id-14 .field_uneditable').text();
var sPoints = $('#field_id-13 .field_uneditable').text();
// User Variables

console.log('title: BestSkins Profile');
console.log('author: DeeW.');
console.log('version: v2.0');
console.log('version: punBB');
console.log('platform: Forumotion');
console.log('http://bestskins.net');
console.log('If remove my credits of code, your forum will be excluded by forumotion');
if (window.location.pathname.indexOf('/u') === 0) {
  $(document).ready(function(){
      $('#profile-advanced-right').hide();
      $('#profile-advanced-layout').prepend('<div class="profile-cover">'+
        '<div class="profile-avatar"><img src="'+sAvatar+'" /></div>'+
            '<div class="boxInfo">'+
              '<div class="sPoints">'+
                  '<span>'+sPoints+'</span>'+
                  '<span>Moedas</span>'+
              '</div>'+
              '<div class="sReputation">'+
                  '<span>'+sReputation+'</span>'+
                  '<span>Reputação</span>'+
              '</div>'+
            '</div>'+ 
        '</div>');
      $('.profile-cover').attr('style','background-image:url('+sCover+')');
      $('.user').attr('style','background-image:url('+sCover+')');
      $(function() {
                var ajaxTAB = function() {
                    $('#tabs li').click(function(e) {
                        e.preventDefault();
                        var url = this.firstChild.href;
                        if (url == '#') return;
                        $('#profile-advanced-left').load(url + ' #profile-advanced-left', ajaxTAB);
                    });
                };
                ajaxTAB();
        });
      $('head').after(
        '<style type="text/css">'+
        '.profile-cover {'+
        'background: #FFF;'+
        'height: 250px;'+
        'margin: 0 auto;'+
        'box-shadow: inset 0 -25px 50px rgba(0, 0, 0, 0.55);'+
        'border-bottom: 3px solid #333;'+
        '}'+
        '#profile-advanced-layout #new-message {'+
        'margin-top: 0!important;'+
        'position: relative!important;'+
        'margin: 0 auto;'+
        'text-align: center;'+
        '}'+
        '#tabs ul li a {'+
        'background-color: rgba(0, 0, 0, 0.5);'+
        'border: 1px solid rgba(0, 0, 0, 0.5);'+
        'float: left;'+
        'font-size: 13px;'+
        'font-weight: 400;'+
        'line-height: 2em;'+
        'padding: 4px 10px;'+
        'text-decoration: none;'+
        'border-bottom: 0 none;'+
        'color: #FFF;'+
        'text-transform: uppercase;'+
        '}'+
        '#tabs ul li.activetab a {'+
        'background-color: rgba(51, 51, 51, 0.79)!important;'+
        'border-color: #000!important;'+
        'color: #FFF;'+
        'text-decoration: none!important;'+
        'font-weight: bold!important;'+
        '}'+
        '#tabs ul li.activetab a:hover {'+
        'background-color: #4C4C4C;'+
        '}'+
        '#tabs ul li a:hover {'+
        'background-color: rgba(244, 244, 244, 0.5);'+
        '}'+
        '.profile-avatar {'+
        'background: #FFF;'+
        'float: left;'+
        'padding: 5px;'+
        'box-shadow: 0 0 15px #333;'+
        'border-radius: 3px;'+
        'margin: 10px;'+
        '}'+
        '.profile-avatar img {'+
        'max-width: 150px;'+
        'max-height: 150px;'+
        '}'+
        '.boxInfo {'+
        'padding: 15px;'+
        'margin-top: 100px;'+
        'float: right;'+
        'width: 15%;'+
        '}'+
        '.sPoints,.sReputation {'+
        'display: block;'+
        'float: none;'+
        'font-weight: normal;'+
        'margin: 0px 0px 8px;'+
        'padding: 10px 10px;'+
        'text-align: center;'+
        'border-radius: 5px;'+
        'color: #FFF;'+
        'background: none repeat scroll 0px 0px #27AACA;'+
        '}'+
        '.sReputation {'+
        'background: #6F8F52;'+
        '}'+
        '.sReputation > span,.sPoints > span {'+
        'display: block;'+
        '}'+
        '#profile-advanced-left{'+
        'margin-right: 0!important'+
        '}'+
        '</style>');
  }); 
};


DeeW. escreveu:É só utilizar meu código com uma pequena modificação:

Código:


/**
 * @CP_AddOn Addons for the Forumotion control panel
 * @copyright Copyright (C) 2014 JScript
 * @license http://www.gnu.org/licenses/gpl.html GPL version 2 or higher
 * @engine 1.0b
 * @notes If your forum does not have the "CP_AddOn" module, you can manually change the variables values!

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<mod>
 <header>
 <id>BestSkinsProfile</id>
 <title>BestSkins Profile Exclusive</title>
 <version>2.12092014</version>
 <description>Exclusive Profile for Users of BestSkins</description>
 <author>DeeW.</author>
 <author-notes>Second Version, no bugs!!</author-notes>
 <license>General Public License v2</license>
 <mod-version>1.0.0.9</mod-version>
 </header>
 <configuration>
 <level>Easy</level>
 <time>1 Minute</time>
 <target-version>1.0b</target-version>
 <action type="input">
 <text>ID do campo da capa:</text>
 <variable>sCover</variable>
 </action>
 <action type="input">
 <text>ID do campo da reputação:</text>
 <variable>sReputation</variable>
 </action>
 <action type="input">
 <text>ID do campo dos pontos/moedas:</text>
 <variable>sPoints</variable>
 </action>
 </configuration>
</mod>
*/
// User Variables
var sCover = $('#field_id2 .field_uneditable').text();
var sAvatar = $('.center > img').attr('src');
var sReputation = $('#field_id-14 .field_uneditable').text();
var sPoints = $('#field_id-13 .field_uneditable').text();
// User Variables

console.log('title: BestSkins Profile');
console.log('author: DeeW.');
console.log('version: v2.0');
console.log('version: punBB');
console.log('platform: Forumotion');
console.log('http://bestskins.net');
console.log('If remove my credits of code, your forum will be excluded by forumotion');
if (window.location.pathname.indexOf('/u') === 0) {
   $(document).ready(function(){
      $('#profile-advanced-right').hide();
      $('#profile-advanced-layout').prepend('<div class="profile-cover">'+
         '<div class="profile-avatar"><img src="'+sAvatar+'" /></div>'+
            '<div class="boxInfo">'+
               '<div class="sPoints">'+
                  '<span>'+sPoints+'</span>'+
                  '<span>Moedas</span>'+
               '</div>'+
               '<div class="sReputation">'+
                  '<span>'+sReputation+'</span>'+
                  '<span>Reputação</span>'+
               '</div>'+
            '</div>'+  
         '</div>');
      $('.profile-cover').attr('style','background-image:url('+sCover+')');
      $('.user').attr('style','background-image:url('+sCover+')');
      $(function() {
                var ajaxTAB = function() {
                    $('#tabs li').click(function(e) {
                        e.preventDefault();
                        var url = this.firstChild.href;
                        if (url == '#') return;
                        $('#profile-advanced-left').load(url + ' #profile-advanced-left', ajaxTAB);
                    });
                };
                ajaxTAB();
        });
      $('head').after(
         '<style type="text/css">'+
         '.profile-cover {'+
         'background: #FFF;'+
         'height: 250px;'+
         'margin: 0 auto;'+
         'box-shadow: inset 0 -25px 50px rgba(0, 0, 0, 0.55);'+
         'border-bottom: 3px solid #333;'+
         '}'+
         '#profile-advanced-layout #new-message {'+
         'margin-top: 0!important;'+
         'position: relative!important;'+
         'margin: 0 auto;'+
         'text-align: center;'+
         '}'+
         '#tabs ul li a {'+
         'background-color: rgba(0, 0, 0, 0.5);'+
         'border: 1px solid rgba(0, 0, 0, 0.5);'+
         'float: left;'+
         'font-size: 13px;'+
         'font-weight: 400;'+
         'line-height: 2em;'+
         'padding: 4px 10px;'+
         'text-decoration: none;'+
         'border-bottom: 0 none;'+
         'color: #FFF;'+
         'text-transform: uppercase;'+
         '}'+
         '#tabs ul li.activetab a {'+
         'background-color: rgba(51, 51, 51, 0.79)!important;'+
         'border-color: #000!important;'+
         'color: #FFF;'+
         'text-decoration: none!important;'+
         'font-weight: bold!important;'+
         '}'+
         '#tabs ul li.activetab a:hover {'+
         'background-color: #4C4C4C;'+
         '}'+
         '#tabs ul li a:hover {'+
         'background-color: rgba(244, 244, 244, 0.5);'+
         '}'+
         '.profile-avatar {'+
         'background: #FFF;'+
         'float: left;'+
         'padding: 5px;'+
         'box-shadow: 0 0 15px #333;'+
         'border-radius: 3px;'+
         'margin: 10px;'+
         '}'+
         '.profile-avatar img {'+
         'max-width: 150px;'+
         'max-height: 150px;'+
         '}'+
         '.boxInfo {'+
         'padding: 15px;'+
         'margin-top: 100px;'+
         'float: right;'+
         'width: 15%;'+
         '}'+
         '.sPoints,.sReputation {'+
         'display: block;'+
         'float: none;'+
         'font-weight: normal;'+
         'margin: 0px 0px 8px;'+
         'padding: 10px 10px;'+
         'text-align: center;'+
         'border-radius: 5px;'+
         'color: #FFF;'+
         'background: none repeat scroll 0px 0px #27AACA;'+
         '}'+
         '.sReputation {'+
         'background: #6F8F52;'+
         '}'+
         '.sReputation > span,.sPoints > span {'+
         'display: block;'+
         '}'+
         '#profile-advanced-left{'+
         'margin-right: 0!important'+
         '}'+
         '</style>');
   });  
};


Código:

$(function() {

    $('.pun .post .user').each(function() {
        $(this).html($(this).html().replace(/<span class="label/g, '<dd><div class="post_field"><span class="label'));
    });

    $('.post_field:contains("Capa de Post:")').each(function() {

        var cover = $(this).text().split(': ')[1];
       
        $(this).parents('.user').css({
            'background-image': 'url(' + cover + ')'
        });
   
    });

});