المنتدي مغلق للتصفح حاليا وسوف يتم افتتاح الموقع بشكل جديد وطريقة اخرى بعد شهرين

إعلانات الموقع
ضع إعلانك هنا ضع إعلانك هنا ضع إعلانك هنا
ضع إعلانك هنا ضع إعلانك هنا ضع إعلانك هنا

.:: لـــوحة الشرف ::.

قريباً

قريباً

قريباً

قريباً


اهداءات منتديات سحايب الاحساء


العودة   منتديات سحايب الاحساء الثقافية >  منتديات التقنية و التكنولوجية  > سحـايب تطوير المواقع والمنتديات ..~
سحـايب تطوير المواقع والمنتديات ..~ كل مايخص بشروحات الـ vb والهاكات والستايلات



 
 
أدوات الموضوع انواع عرض الموضوع
قديم 07-20-2016, 02:36 AM   #1
افتراضي حقول الملف الشخصي بشكل جديد ومميز...


حقول الملف الشخصي بشكل جديد

السلام عليكم ورحمة الله وبركاته

أخواني الأجلاء، جلبت لكم اليوم درس تغيير شكل حقول الملف الشخصي بشكل جديد وعصري

باستخدام تقنية « Tooltip » ،

المميز في هذه الطريقة هو اختصارها للكثير من المساحة والبساطة في العرض وسهولة التعديل

في الشكل والألوان بحيث لا تضطر كل مرة للدخول على قالب البوست بت، بل فقط بالتعديل على

متغيرات CSS.

بسم الله نبدأ على بركة الله:

أولا: اذهب الى قالب Postbit أو Postbitlegacy حسب ما يناسبك وضع هذا الكود في مكان

حقول الملف الشخصي:


رمز PHP:




<span class="wrapper">

<
i class="fa fa-info-circle fa-lg"></i>

<
div class="tooltip">

<
ul class="ver-menu">



<if
condition="$post['joindate']">


<
li><a href="#"><span style="margin-left: 3px;"><i class="fa fa-star fa-lg"></i></span>الانتساب : $post[joindate]</if> </a></li>


<
li><a href="#"><span style="margin-left: 3px;"><i class="fa fa-star fa-lg"></i></span>رقم العضوية : $post[userid]</a></li>


<if
condition="$post[field2]">


<
li><a href="#"><span style="margin-left: 3px;"><i class="fa fa-star fa-lg"></i></span>الإقامة : $post[field2]</if></a></li>


<if
condition="$post[field3]">


<
li><a href="#"><span style="margin-left: 3px;"><i class="fa fa-star fa-lg"></i></span>$vbphrase[age]: $post[field3]</if></a></li>


<
li><a href="#"><span style="margin-left: 3px;"><i class="fa fa-star fa-lg"></i></span>مشاركات : $post[posts]</a></li>



<
li><a href="#"><span style="margin-left: 3px;"><i class="fa fa-star fa-lg"></i></span>عدد النقاط : $post[reputation]</a></li>


</
ul>

</
div>

</
span>


ثانيا: اذهب الى اعدادات الاستايل الإضافية والصق هذا الكود هناك:


رمز Code:
.wrapper { text-transform: uppercase; background: ececec; color: #555; cursor: help; font-family: "Gill Sans", Impact, sans-serif; font-size: 11px; margin-left:3px; padding: px; position: relative; bottom: 3px; text-align: center; width: 24px; -webkit-transform: translateZ(0); /* webkit flicker fix */ -webkit-font-smoothing: antialiased; /* webkit text rendering fix */ } .wrapper .tooltip { background: #1496bb; bottom: 100%; color: #fff; display: block; left: -68px; margin-bottom: 15px; opacity: 0; padding: 5px; pointer-events: none; position: absolute; width: 160px; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -ms-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -moz-border-radius: 10px 0px 0px 0px; -webkit-border-radius: 10px 0px 0px; -o-border-radius: 10px 0px 0px; -ms-border-radius: 10px 0px 0px; border-radius: 5px; } /* This bridges the gap so you can mouse into the tooltip without it disappearing */ .wrapper .tooltip:before { bottom: -30px; content: " "; display: block; height: 20px; left: 0; position: absolute; width: 100%; } /* CSS Triangles - see Trevor's post */ .wrapper .tooltip:after { border-left: solid transparent 10px; border-right: solid transparent 10px; border-top: solid #1496bb 10px; bottom: -10px; content: " "; height: 0; left: 50%; margin-left: -13px; position: absolute; width: 0; } .wrapper:hover .tooltip { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } /* IE can just show/hide with no transition */ .lte8 .wrapper .tooltip { display: none; } .lte8 .wrapper:hover .tooltip { display: block; }

الان كل ما عليك فعله هو تمرير الماوس فوق الايقونة كما هو موضح في الصورة

وهذه صورة مثال على النتيجة النهائية:


حقول الملف الشخصي بشكل جديد

** ملاحظة: لكي تظهر الأيقونة يجب ان تكون مكتبة Font awesome متوفرة في المنتدى

وإلا سيكون عليك تعديل السطر التالي من:

رمز Code:
<i class="fa fa-info-circle fa-lg"></i>

مثلا إلى:

رمز Code:
بياناتي

مع تعديل اعدادات css حسب ذوقك

أتمنى أن يكون الدرس قد نال إعجابكم
،


حقول الملف الشخصي بشكل جديد

pr,g hglgt hgaowd fa;g []d] ,lld.>>> hgHgt hgsdsd fa;g []d] dr,l ,lld.>>>



 
التوقيع :

اشلـون بيَّ لو قرب مني الأجـــل

و أخـذ سمعي الموت والساني انثجـل

ظلَّت اعيوني تدير اعلى الأهـــل

تشوفهـا اتهل الدمـع لمصـابــي

اشلـون بي النفـس لو مني خمــد

قديم 07-20-2016, 11:54 PM   #2
افتراضي رد: حقول الملف الشخصي بشكل جديد ومميز...


مافهمت له اشياء الصيانه صعبة اقل غلطة تعفس دنيا
لكن شرح جميل وحلو ابدعتي
تشكري غلاتي العلوية على طرح الابداعي
يعطيك العافية



 
التوقيع :

آن عطآگہ آللهہ وليفٍ مآ يخُون ˺ آحفظهہ يآ طيب آلصيت آحفظهہ ˻

قديم 07-21-2016, 03:04 AM   #3
افتراضي رد: حقول الملف الشخصي بشكل جديد ومميز...



شُكرَاً أقطِفُهَآ مِن قَلبْ ألجَمَآل
لِتُلِيق بِ حَجمَ جَمَآلِ طَرحِك
طَوقُ يَآسَمِينْ لِروحِك



 
التوقيع :


قديم 07-21-2016, 07:42 AM   #4
افتراضي رد: حقول الملف الشخصي بشكل جديد ومميز...




اللَّهُمَّ صَلِّ عَلَى مُحَمَّدٍ وآلِ مُحَمَّدٍ
مادري والله يمن مو صحيح الشرح
اشكركم ع حضوركم الباذخ
اسعدني تواجدكم ونثر حروفكم العطرة
مودتي التي لا تفنى




 
التوقيع :

اشلـون بيَّ لو قرب مني الأجـــل

و أخـذ سمعي الموت والساني انثجـل

ظلَّت اعيوني تدير اعلى الأهـــل

تشوفهـا اتهل الدمـع لمصـابــي

اشلـون بي النفـس لو مني خمــد

قديم 07-21-2016, 09:15 PM   #5

افتراضي رد: حقول الملف الشخصي بشكل جديد ومميز...


شاكرهه لك علئ الطرح .. يعطيك العافيه



 
التوقيع :


قديم 07-21-2016, 09:45 PM   #6
افتراضي رد: حقول الملف الشخصي بشكل جديد ومميز...




اللَّهُمَّ صَلِّ عَلَى مُحَمَّدٍ وآلِ مُحَمَّدٍ
اشكركم ع حضوركم الباذخ
اسعدني تواجدكم ونثر حروفكم العطرة
مودتي التي لا تفنى




 
التوقيع :

اشلـون بيَّ لو قرب مني الأجـــل

و أخـذ سمعي الموت والساني انثجـل

ظلَّت اعيوني تدير اعلى الأهـــل

تشوفهـا اتهل الدمـع لمصـابــي

اشلـون بي النفـس لو مني خمــد

قديم 07-31-2016, 07:20 AM   #7
افتراضي رد: حقول الملف الشخصي بشكل جديد ومميز...


انتقاء رائع
يعطيك العافيه
لا حرمنا هذا التواجد



 
التوقيع :


قديم 08-03-2016, 06:11 PM   #8
افتراضي رد: حقول الملف الشخصي بشكل جديد ومميز...




اللَّهُمَّ صَلِّ عَلَى مُحَمَّدٍ وآلِ مُحَمَّدٍ
اشكركم ع حضوركم الباذخ
اسعدني تواجدكم ونثر حروفكم العطرة
مودتي التي لا تفنى




 
التوقيع :

اشلـون بيَّ لو قرب مني الأجـــل

و أخـذ سمعي الموت والساني انثجـل

ظلَّت اعيوني تدير اعلى الأهـــل

تشوفهـا اتهل الدمـع لمصـابــي

اشلـون بي النفـس لو مني خمــد

قديم 08-04-2016, 03:14 AM   #9
افتراضي رد: حقول الملف الشخصي بشكل جديد ومميز...


دائما متميز في الانتقاء
سلمت على روعه طرحك
نترقب المزيد من جديدك الرائع
دمت ودام لنا روعه مواضيعك

لكـ خالص احترامي



 
التوقيع :


قديم 08-04-2016, 03:53 AM   #10
افتراضي رد: حقول الملف الشخصي بشكل جديد ومميز...


العلويه
يسلمووو الايادي على هيك طرح
ربي يعطيك الف الف عااااااااااافيه
لا حرمنا الله منك ولا من جهودك
منتظرين جديدك القادم بكل ود وشوق
تحيتي وودي لك ولسمــــــوك الكريم



 
التوقيع :


 

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
الألف, السيسي, بشكل, جديد, يقوم, ومميز...


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه للموضوع: حقول الملف الشخصي بشكل جديد ومميز...
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
طريقة ترجمة بعض الكلمات في الملف الشخصي.. بالصوره حورالفردوس سحـايب تطوير المواقع والمنتديات ..~ 3 01-09-2015 02:54 AM
الملف الشخصي طريقي زينبي سحـايب تطوير المواقع والمنتديات ..~ 8 02-06-2014 05:17 AM
تحميل هاك الحلم v 2.6 للتحكم الكامل بالمواضيع + الملف الشخصي حورالفردوس سحـايب تطوير المواقع والمنتديات ..~ 6 04-28-2013 01:43 AM
اضافة حقل بيانات موقعي في الملف الشخصي للعضو حورالفردوس سحـايب تطوير المواقع والمنتديات ..~ 6 01-26-2013 06:28 PM
الملف الشخصي لأعضاء آخرحب ملك الليل سحـايب العـــام ..~ 8 03-26-2011 12:48 AM


الساعة الآن 08:06 AM


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.