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

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

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

باستخدام تقنية « 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 حسب ذوقك

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