بسم الله الرحمن الرحيم
اقدم لكم تقنية جديدة في احلى منتدى حصريا على دليل الاشهار العربي وهي وضع غلاف للصفحة الشخصية الخاصة بك كما مواقع التواصل الاجتماعي
وهي تقنيه مهمة واضافة جميلة للمنتديات تمكن الاعضاء من اختيار الصورة التي يريدونها وجعلها خلفية من خلال اضافة رابط الصورة في خانة
وسأشرح لكم الان كيفية تركيب الاكواد وانشاء الخانات
مثال على الشرح :
شرح التركيب :
توجه نحو لوحة الادارة - عناصر اضافية - اكاود javascript واضف الكود التالي
مكان الكود كل الصفحات
phpbb 3 :
الكود:
// كود غلاف البيانات الشخصية حصرية على دليل الاشهار العربي
if (window.location.pathname.indexOf('/u') == 0) {
$(document).ready(function () {
// Link Imagen de Portada
var fbcapa = $('#field_id1 .field_uneditable').text(); // المعرف الخاص بالصورة الشخصية
// Estructura General
$('div#main-content h1.page-title').before('<div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" id="fbfundo"><div style="position: absolute; left: 0; width: 100%; bottom: 0;"><table id="fbperfil"><tr><td rowspan="3" id="fbavatar"></td><td style="font-size: 16px;" id="fbnome"></td></tr><tr><td style="font-size: 1.4em;" id="fbrank"></td></tr><tr><td id="fbgrupo"></td></tr></table></div></div><style>table#fbperfil tbody tr td#fbnome div.h3 {text-transform: none !important;} h1.page-title{font-size:0px!important;height:30px!important;} #main-content p:nth-child(2) #profile-advanced-right .module #profile-advanced-left {width:100%!important;} #fbperfil { margin-bottom: -33px; margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: none solid #fff; -webkit-border-radius: 2px; background-color: transparent; } #fbavatar img { height: 160px; width: 160px; } #fbnome { padding: 28% 0px 0px 10px; } #fbrank, #fbgrupo { padding: 0px 0 0 10px; } #profile-advanced-layout #tabs { bottom: 0; padding-left: 280px; margin-top: 0px !important; }</style>');
// Avatar
$('#profile-advanced-right .module:first .inner img:first').clone().appendTo($('#fbavatar'));
// Nombre
$('div#main-content div.module:first .h3:first').clone().appendTo($('#fbnome'));
// Rango
$('div#main-content div.module:first b').clone().appendTo($('#fbrank'));
// Grupo
$('div#main-content div.module:first div.inner img:last').clone().appendTo($('#fbgrupo'));
// Evitar avatares duplicados para usuarios sin avatar
$(function () {
var fbavatarduplo = [],
imagemdupla;
$("#fbfundo img").filter(function () {
imagemdupla = $(this).attr("src");
if ($.inArray(imagemdupla, fbavatarduplo) < 0) {
fbavatarduplo.push(imagemdupla);
return false;
}
return true;
}).remove();
});
// ايقونة تواجد العضو بالمنتدى
$("table#fbperfil tbody tr td#fbnome div.h3").html(function (_, html) {
return html.replace("(متصل)", "<img alt='Conectado' title='Conectado' src='https://i.imgur.com/QglVEGE.png' />")
});
// يتم فصل الألسنة لتجنب حدوث أخطاء على الغلاف
$(function () {
var tabfbperfil = function () {
$('#tabs li').click(function (e) {
e.preventDefault();
var url = this.firstChild.href;
if (url == '#') return;
$('#profile-advanced-left').load(url + ' #profile-advanced-left', tabfbperfil);
});
};
tabfbperfil();
});
});
}
// Mc Nabulsy \ الكود ليس تصميميphpbb 2 :
الكود:
// كود غلاف البيانات الشخصية حصرية على دليل الاشهار العربي
if (window.location.pathname.indexOf('/u') == 0) {
$(document).ready(function() {
// Link Imagen Portada
var fbcapa = $('#field_id1 .field_uneditable').text(); // المعرف الشخصي بخانة البيانات
// Estructura General
$('table[width="100%"][cellspacing="1"][cellpadding="1"][border="0"]').before('<div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" id="fbfundo"><div style="position: absolute; left: 0; width: 100%; bottom: 0;"><table id="fbperfil"><tr><td rowspan="3" id="fbavatar"></td><td style="font-size: 16px;" id="fbnome"></td></tr><tr><td style="font-size: 1.4em;" id="fbrank"></td></tr></table></div></div><style>table#fbperfil tbody tr td#fbnome div.h3 {text-transform: none !important;} h1.page-title{font-size:0px!important;height:30px!important;} #main-content p:nth-child(2) {display:none!important;} #profile-advanced-right .module {display:none!important;} #profile-advanced-left {width:100%!important;} #fbperfil { margin-bottom: -33px; margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: 4px solid #fff; -webkit-border-radius: 2px; background-color: white; } #fbavatar img { height: 160px; width: 160px; } #fbnome { padding: 28% 0px 0px 10px; } #fbrank, #fbgrupo { padding: 0px 0 0 10px; } #profile-advanced-layout #tabs { bottom: 0; padding-left: 280px; margin-top: 0px !important; }#profile-advanced-layout #tabs { margin-bottom: -13px !important; margin-left: -10px; } #profile-advanced-details { padding-top: 10px !important; }#fbrank span { margin-bottom: 40px !important; }</style>');
// Avatar
$('table.forumline td[class="row1 gensmall"][align="center"] img:first').clone().appendTo($('#fbavatar'));
// Nombre
$('.catLeft:first span[class="genmed module-title"]').clone().appendTo($('#fbnome'));
// Rango
$('td[class="row1 gensmall"][align="center"] img:last').clone().appendTo($('#fbrank'));
// Evitar avatares duplicados para usuarios sin avatar
$(function() {
var fbavatarduplo = [],
imagemdupla;
$("#fbfundo img").filter(function() {
imagemdupla = $(this).attr("src");
if ($.inArray(imagemdupla, fbavatarduplo) < 0) {
fbavatarduplo.push(imagemdupla);
return false;
}
return true;
}).remove();
});
// ايقونات التواجد داخل المنتدى
$('table#fbperfil span[class="genmed module-title"]').html(function(_, html) {
return html.replace("(متصل)", "<img alt='Conectado' title='Conectado' src='https://i.imgur.com/QglVEGE.png' />")
});
// يتم فصل الألسنة لتجنب حدوث أخطاء على الغلاف
$(function() {
var tabfbperfil = function() {
$('td[align="right"][valign="bottom"][width="100%"][nowrap="nowrap"] a').click(function(e) {
e.preventDefault();
var url = this.href;
if (url == '#') return;
$('table[width="100%"][cellspacing="1"][cellpadding="1"][border="0"]').load(url + ' table[width="100%"][cellspacing="1"][cellpadding="1"][border="0"]', tabfbperfil);
});
};
tabfbperfil();
});
});
}
// Mc Nabulsy \ الكود ليس تصميميPunBB :
الكود:
// كود غلاف البيانات الشخصية حصرية على دليل الاشهار العربي
if (window.location.pathname.indexOf('/u') == 0) {
$(document).ready(function() {
// Link Imagen de Portada
var fbcapa = $('#field_id18 .field_uneditable').text(); // المعرف الخاص بالخانة في البيانات
// Estructura General
$('#pun-visit').before('<div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" id="fbfundo"><div style="position: absolute; left: 0; width: 100%; bottom: 0;"><table id="fbperfil"><tr><td rowspan="3" id="fbavatar"></td><td style="font-size: 16px;" id="fbnome"></td></tr><tr><td style="font-size: 1.4em;" id="fbrank"></td></tr></table></div></div><style>table#fbperfil tbody tr td#fbnome div.h3 {text-transform: none !important;} h1.page-title{font-size:0px!important;height:30px!important;} #main-content p:nth-child(2) {display:none!important;} #profile-advanced-right .module {display:none!important;} #profile-advanced-left {width:100%!important;} #fbperfil { margin-bottom: -33px; margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: 4px solid #fff; -webkit-border-radius: 2px; background-color: white; } #fbavatar img { height: 160px; width: 160px; } #fbnome { padding: 28% 0px 0px 10px; } #fbrank, #fbgrupo { padding: 0px 0 0 10px; } #profile-advanced-layout #tabs { bottom: 0; padding-left: 280px; margin-top: 0px !important; }#profile-advanced-layout #tabs { margin-bottom: -13px !important; margin-left: -10px; } #profile-advanced-details { padding-top: 10px !important; }#fbrank span { margin-bottom: 40px !important; }</style>');
// Avatar
$('.module:first .main-content img:first').clone().appendTo($('#fbavatar'));
// Nombre
$('div#main-content div.module:first .h3:first').clone().appendTo($('#fbnome'));
// Rango
$('.module:first .main-content.clearfix.center span').clone().appendTo($('#fbrank'));
// Evitar avatares duplicados para usuarios sin rango
$(function() {
var fbavatarduplo = [],
imagemdupla;
$("#fbfundo img").filter(function() {
imagemdupla = $(this).attr("src");
if ($.inArray(imagemdupla, fbavatarduplo) < 0) {
fbavatarduplo.push(imagemdupla);
return false;
}
return true;
}).remove();
});
// ايقونة التواجد بالمنتدى
$("table#fbperfil tbody tr td#fbnome div.h3").html(function(_, html) {
return html.replace("(متصل)", "<img alt='Conectado' title='Conectado' src='https://i.imgur.com/QglVEGE.png' />")
});
// يتم فصل الألسنة لتجنب حدوث أخطاء على الغلاف
$(function() {
var tabfbperfil = function() {
$('#tabs li').click(function(e) {
e.preventDefault();
var url = this.firstChild.href;
if (url == '#') return;
$('#profile-advanced-left').load(url + ' #profile-advanced-left', tabfbperfil);
});
};
tabfbperfil();
});
});
}
// Mc Nabulsy \ الكود ليس تصميميinvision :
الكود:
// كود غلاف البيانات الشخصية حصرية على دليل الاشهار العربي
if (window.location.pathname.indexOf('/u') == 0) {
$(document).ready(function() {
// Link Imagen Portada
var fbcapa = $('#field_id1 .field_uneditable').text(); // معرف الخانة في البيانات الشخصية
// Estructura General
$('#profile-advanced-layout').before('<div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" id="fbfundo"><div style="position: absolute; left: 0; width: 100%; bottom: 0;"><table id="fbperfil"><tr><td rowspan="3" id="fbavatar"></td><td style="font-size: 16px;" id="fbnome"></td></tr><tr><td style="font-size: 1.4em;" id="fbrank"></td></tr></table></div></div><style>table#fbperfil tbody tr td#fbnome div.h3 {text-transform: none !important;} h1.page-title{font-size:0px!important;height:30px!important;} #main-content p:nth-child(2) {display:none!important;} #profile-advanced-right .module {display:none!important;} #profile-advanced-left {width:100%!important;} #fbperfil { margin-bottom: -33px; margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: 4px solid #fff; -webkit-border-radius: 2px; background-color: white; } #fbavatar img { height: 160px; width: 160px; } #fbnome { padding: 28% 0px 0px 10px; } #fbrank, #fbgrupo { padding: 0px 0 0 10px; } #profile-advanced-layout #tabs { bottom: 0; padding-left: 280px; margin-top: 0px !important; }#profile-advanced-layout #tabs { margin-bottom: -13px !important; margin-left: -10px; } #profile-advanced-details { padding-top: 10px !important; }#fbrank span { margin-bottom: 40px !important; }#profile-advanced-layout { margin-top: 30px; }</style>');
// Avatar
$('#profile-advanced-right .box-content.profile:contains("Rango:") img:first').clone().appendTo($('#fbavatar'));
// Nombre
$('#profile-advanced-right .module:first .maintitle h3').clone().appendTo($('#fbnome'));
// Rango
$('#profile-advanced-right .box-content.profile:contains("Rango:") img:last').clone().appendTo($('#fbrank'));
// Evitar avatares duplicados para usuarios sin avatar
$(function() {
var fbavatarduplo = [],
imagemdupla;
$("#fbfundo img").filter(function() {
imagemdupla = $(this).attr("src");
if ($.inArray(imagemdupla, fbavatarduplo) < 0) {
fbavatarduplo.push(imagemdupla);
return false;
}
return true;
}).remove();
});
// ايقونة التواجد بالمنتدى
$('table#fbperfil h3 em').html(function(_, html) {
return html.replace("(متصل)", "<img alt='Conectado' title='Conectado' src='https://i.imgur.com/QglVEGE.png' />")
});
// يتم فصل الألسنة لتجنب حدوث أخطاء على الغلاف
$(function() {
var tabfbperfil = function() {
$('#profile-advanced-left ul.privmsg li div.tabitem a').click(function(e) {
e.preventDefault();
var url = this.href;
if (url == '#') return;
$('#profile-advanced-left').load(url + ' #profile-advanced-left', tabfbperfil);
});
};
tabfbperfil();
});
});
}
// Mc Nabulsy \ الكود ليس تصميميبعد اضافة الاكواد وحفظها توجه نحو لوحة الادارة - الاعضاء والمجموعات - البيانات الشخصية
واضف خانة جديدة كما في الصورة التالية :
والان توجه نحو لوحة بياناتك الشخصية واضغط على الماوس اليمين واضغط على inspect لتظهر لك اكواد الصفحة
وابحث عن الكود المخصص لهذه الخانة كما في الصورة التالية
تأخذ رقم الـ id وهو المعرف وتقوم بتعديل الاكواد التي وضعتها في الجافا وتغيير الرقم 1 الى الرقم اللي بطلع عندك
الكود:
var fbcapa = $('#field_id1 .field_uneditable').text(); // المعرف الخاص بالصورة الشخصيةوهيك الكود صار جاهز ويمكنك اضافة خلفية بكل سهولة من خلال وضع رابط في خانة صورة الغلاف
الكود غير مجرب على النسخ الاخرى ف اللي يجرب يقلنا اذا زبط معه او لا
بالتوفيق للجميع ان شاء الله
تم الشرح بواسطتي Mc Nabulsy
والسلام ختام
