حصري على تقنيات صفحة تعديل بيانات شخصية ببرمجة جديدة مميزة

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

كما نعد اعضائنا الكرام في مركز تقنياتلدائم 

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

لوحة الادارة » مظهر المنتدي » التومبلايتات و القوالب » بيانات الشخصية » نختار هذا القالب profile_add_body
ونضغط على تعديل


نحدف كل القالب ونستبدله بالقالب التالي : 



الكود:
<div class="bablil" align="center">
<h1>
<span style="color: #5f5f5f">البيانات</span>
الشخصية
</h1>
<h2>مع نظام ادارة البيانات الجديد يسهل عليكم تعديل و تسجيل بياناتكم الشخصية</h2>
<p>
يتيح لكم نظام ادارة البيانات الشخصية من تعديل او تسجيل وحفظ بياناتكم في اي لحظة بسهولة التامة كما انه نتيح لك عدة روابط تهمك على المنتدى
</p>
<a class="yassine" href="profile?mode=editprofile">
<div class="icon">
<img src="http://i21.servimg.com/u/f21/18/04/55/46/128.png" alt="">
</div>
<span>معاينة البيانات الشخصية</span>
</a>
<a class="yassine" href="profile?mode=editprofile&page_profil=avatars">
<div class="icon">
<img src="http://i21.servimg.com/u/f21/18/04/55/46/224.png" alt="">
</div>
<span>تغيير الصورة الشخصية</span>
</a>
<a class="yassine" href="profile?mode=editprofile&page_profil=preferences">
<div class="icon">
<img src="http://i21.servimg.com/u/f21/18/04/55/46/320.png" alt="">
</div>
<span>تعديل التفضيلات الخاصة</span>
</a>
<a class="yassine" href="profile?mode=editprofile&page_profil=friendsfoes">
<div class="icon">
<img src="http://i21.servimg.com/u/f21/18/04/55/46/416.png" alt="">
</div>
<span>خيارات الأصدقاء و المنبوذين</span>
</a>
<a class="yassine" href="profile?mode=editprofile&page_profil=attachments">
<div class="icon">
<img src="http://i21.servimg.com/u/f21/18/04/55/46/516.png" alt="">
</div>
<span>المرفقات الشخصية</span>
</a>
<a class="yassine" href="profile?mode=editprofile&page_profil=notifications">
<div class="icon">
<img src="http://i21.servimg.com/u/f21/18/04/55/46/615.png" alt="">
</div>
<span>معاينة الإشعارات الخاصة</span>
</a>
<a class="yassine" href="profile?mode=editprofile&page_profil=signature">
<div class="icon">
<img src="http://i21.servimg.com/u/f21/18/04/55/46/712.png" alt="">
</div>
<span>إدارة التوقيع الشخصي</span>
</a>
  <a class="yassine" href="/contact">
<div class="icon">
<img src="http://i21.servimg.com/u/f21/18/04/55/46/812.png" alt="">
</div>
<span>اتصال بإدارة المنتدى</span>
</a>
</div>
  <br>



تم نتوجه الى 
لوحة الادارة » مظهر المنتدي » الوان » ورقة تصميم css
ونضيف الكود التالي 



الكود:
.bablil {
    float: center;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    padding-bottom: 30px;
    width: 100%;
}
.bablil h1 {
    color: hsl(337, 100%, 57%);
    font-family: GESSTwoMed;
    font-size: 21px;
    font-weight: normal;
    text-align: center;
}
.bablil h2 {
    color: hsl(0, 0%, 61%);
    font-family: GESSTwoMed;
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
    text-align: center;
}
.bablil p {
    color: hsl(0, 0%, 38%);
    font-family: GESSTwoMed;
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 20px;
    text-align: center;
}

.yassine {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: hsl(0, 0%, 100%);
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: hsl(0, 0%, 85%);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color: hsl(0, 0%, 85%);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: hsl(0, 0%, 85%);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: hsl(0, 0%, 85%);
    border-top-style: solid;
    border-top-width: 1px;
    cursor: pointer;
    float: right;
    height: 170px;
    margin-left: 6px;
    margin-top: 20px;
    transition-delay: 0s;
    transition-duration: 0.5s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.63, 0.08, 0.35, 0.92);
    width: 228px;
}
.yassine:hover {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: hsl(338, 100%, 86%);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color: hsl(338, 100%, 86%);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: hsl(338, 100%, 86%);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: hsl(338, 100%, 86%);
    border-top-style: solid;
    border-top-width: 1px;
}
.yassine:hover > .icon {
    background-image: url("http://i21.servimg.com/u/f21/18/04/55/46/127.png");
    transform: rotate(360deg);
}
.yassine:hover > span {
    color: hsl(337, 100%, 57%);
    margin-top: -10px;
}
.yassine .icon {
    background-image: url("http://i21.servimg.com/u/f21/18/04/55/46/223.png");
    float: center;
    height: 86px;
    margin-bottom: 18px;
    margin-left: 70px;
    margin-right: 70px;
    margin-top: 27px;
    transition-delay: 0s;
    transition-duration: 0.5s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.63, 0.08, 0.35, 0.92);
    width: 86px;
}
.yassine span {
    color: hsl(0, 0%, 28%);
    float: center;
    font-family: GESSTwoMed;
    font-size: 15px;
    font-weight: normal;
    text-align: center;
    transition-delay: 0s;
    transition-duration: 0.5s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.63, 0.08, 0.35, 0.92);
    width: 100%;
}
  افضل مساهمة2
طرحت فأبدعت يعطيك الف عافية
جهود مبارك جزاك الله خير
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير


m13
  افضل مساهمة3
بارك الله فيك ع مجهودك
تقبل مروري


  افضل مساهمة4
شششكرآ على الكود #بلآك
  


  افضل مساهمة5
دُمتَ بِهذآ الع ـطآء أإلمستَمـرٍ

يُسع ـدني أإلـرٍد على مـوٍأإضيعكًـ

وٍأإألتلـذذ بِمـآ قرٍأإتْ وٍشآهـدتْ

تـقبلـوٍ خ ـآلص احترامي

لآرٍوٍآح ـكُم أإلجمـيله
  افضل مساهمة6
الف شكر على الموضوع
  افضل مساهمة7
#الشكر_لله_اخي_الكريم


  افضل مساهمة8
شششكرآ على الكود #بلآك
  
  افضل مساهمة9
  افضل مساهمة10
هيتم تعديل قريبا نعتذر عن الامر


m13
  افضل مساهمة11
دائما في الانتظار
  افضل مساهمة12
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي
  افضل مساهمة13
سلمت اناملك الذهبيه
دائما بأنتظار جديدك الشيق
 لك خالص احترامي وتقديري
لاتستطيع الرد على المواضيع في هذا المنتدى