شبكة و منتديات هدايا دعوية الإسلامية
أهلآ و سهلآ بك زائرنا الكريم
نتمنى لك تصفح ممتع ومفيد بين أرجاء الشبكة
ندعوك بالتسجيل معنا لتقديم الهدايا لك مجانآ لخدمة منتداك أو موقعك

انضم إلى المنتدى ، فالأمر سريع وسهل

شبكة و منتديات هدايا دعوية الإسلامية
أهلآ و سهلآ بك زائرنا الكريم
نتمنى لك تصفح ممتع ومفيد بين أرجاء الشبكة
ندعوك بالتسجيل معنا لتقديم الهدايا لك مجانآ لخدمة منتداك أو موقعك
شبكة و منتديات هدايا دعوية الإسلامية
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.
شبكة و منتديات هدايا دعوية الإسلامية

مختص بالتصميم ومجالات تصميم الصور وغيرها


تومبيلات تنسيق البيآنآت الشخصيه ..| ^^

+2
إدارة هدايا دعوية
][ .. هَيّاآءْ مُحَمّدْ
6 مشترك
شبكة و منتديات هدايا دعوية الإسلامية :: قــسم البرمجة والأكواد و والجافا :: معرض الأكواد | HTML + CSS + JAVA + TOMPELAT !~ :: | أكواد التومبلايت Template |
اذهب الى الأسفل
][ .. هَيّاآءْ مُحَمّدْ
][ .. هَيّاآءْ مُحَمّدْ

..:: مصمم للشركة ::..


..:: مصمم للشركة ::..
♣ إعْـلآناتْ الشَركَةْ » : = جديد = اشتر الآن من عدد مساهماتك
انثى

♣ مشَارَڪاتْي » : 35
♣ مُڪإني \ دَولتِـيَ» : السعوديه
♣ العـمْرّ» : 21
هوايتي : التصميم
|| ♣ سُمعَتِـيْ » : 16
+

تومبيلات تنسيق البيآنآت الشخصيه ..| ^^ Empty تومبيلات تنسيق البيآنآت الشخصيه ..| ^^

السبت مايو 25, 2013 3:36 pm
تقييم المساهمة: 100% (1)




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

عودهّ مجددهّ معَ احلىَ طلهَ لمنتداناَ الرائعَ .. احببت انَ يكونَ هذا الموضوعّ

في هذآ القسمّ لكونيّ أستخدمّ منتدىّ بالتومبيلاتّ

وقدَ وجدتَ اكوآد آبداعيهَ خورافيه ^.^

خلالَ بحثيَ في آحدَ المنتديآتَ فأحببتَ ان تشآرك سويهَ في الافاده والاستفآدهَ

لاأطيل عليكمَ أترككمَ مع الموضوعَ ..^^


كودَ رآع واحترآفي لتنسيق البيآنات الشخصيه كا الفيّ بيّ تماماّ

أولا : لوحة الادارة → مظهر المنتدي → التومبلايتات و القوالب → إدار عامة
نختار هذا القالب viewtopic_body ونضغط عليه تعديل


الكود:
{postrow.displayed.PROFILE_IMG}

ثم نّحددّ الأكوادَ التي بجانبهَ هكذآ

الكود:
<table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td valign="middle">
                        {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
                    </td>
                </tr>
            </table>

بعدّ التحديد عليهّ كما في الأعلى نقومّ بحذف الكودَ

ثانيناّ : نبحث عن هذا الكود

الكود:
<!-- BEGIN displayed -->

نحددّ الكود الذيّ تحته كمَا هنا

الكود:
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
        <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                {postrow.displayed.POSTER_RPG}
            </span><br />
            <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
        </td>

نقوم باستبدالّ المحدد عليهَ بهذا الكودَ

الكود:
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <tr class="post">

            <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">

         

             

             

    <div class="tw">

    <div align="center">

    <a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong>

    <br />

    {postrow.displayed.POSTER_AVATAR}</div>

    <br /><br />

 

 

    <div class="tw">

    {postrow.displayed.POSTER_RANK}</div>

    <br />

                    {postrow.displayed.RANK_IMAGE}

 

    <div class="twrank"><span style="color:#1E6ECF;">  معلومات
    اضافية </span><br style="color: #1E6ECF;"></div>

                    <!-- BEGIN profile_field -->

        <div class="tw">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}</div>

 
 

                    <!-- END profile_field -->

                    {postrow.displayed.POSTER_RPG}

                </span><br />

                <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />

        <table border="0" cellspacing="0" cellpadding="0">

            <tr>

            <td valign="middle">

              {postrow.displayed.PROFILE_IMG}

              {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field -->

              {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->

              {postrow.displayed.ONLINE_IMG}

            </td>

            </tr>

          </table>

ثم نسجل التومبلايت وننشرها

ثالثا: اخرَ خطوهَ نذهب الي
لوحة الادارة / مظهر المنتدي/ الوان/ ورقة تصميم css
ونضع اي شكل من الاشكال التالية

ملحوظة : نختآر كود واحد فقط من الاتي

الشكل الاول

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الكود:

    .twrank{
    background: none repeat scroll 0 0 #F9F9F9;
        border-bottom-left-radius: 8px;
        border-color: #ff0024;
        border-left: 1px solid #ff0024;
        border-right: 6px solid #ff0024;
        border-style: solid;
        border-top-right-radius: 8px;
        border-width: 1px 6px 1px 1px;
        color: #2E5961;
        font: 11px Tahoma;
        margin: 5px 0;
        padding: 3px 5px;
        text-align: right;
    }
    /*Copyright a7medvirus*/
    .tw{
    background: none repeat scroll 0 0 #F9F9F9;
        border-bottom-left-radius: 8px;
        border-color: #29A5FF;
        border-left: 1px solid #29A5FF;
        border-right: 6px solid #29A5FF;
        border-style: solid;
        border-top-right-radius: 8px;
        border-width: 1px 6px 1px 1px;
        color: #2E5961;
        font: 11px Tahoma;
        margin: 5px 0;
        padding: 3px 5px;
        text-align: right;
    }

الشكل الثاني

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


الكود:

  .twrank{
    background: none repeat scroll 0 0 #FFFFFF;
        border: 1px dotted #ff0000;
        margin-top: 5px;
        padding: 3px;
    }
    /*Copyright a7medvirus*/
    .tw{
    background: none repeat scroll 0 0 #FFFFFF;
        border: 1px dotted #999999;
        margin-top: 5px;
        padding: 3px;
    }

الشكل الثالث

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الكود:

 .twrank{
      background-color: #F6F6F6;
        border-bottom: 2px dotted #CCCCCC;
        border-radius: 5px 5px 5px 5px;
        border-right: 3px solid #ff0000;
        border-width: 0 3px 2px 0;
        font-family: "tahoma";
        font-size: 11px;
        letter-spacing: 0;
        margin: 1px 1px 3px;
        padding: 2px;
        vertical-align: middle;
    }
    /*Copyright a7medvirus*/
    .tw{
      background-color: #F6F6F6;
        border-bottom: 2px dotted #CCCCCC;
        border-radius: 5px 5px 5px 5px;
        border-right: 3px solid #1CA6BA;
        border-width: 0 3px 2px 0;
        font-family: "tahoma";
        font-size: 11px;
        letter-spacing: 0;
        margin: 1px 1px 3px;
        padding: 2px;
        vertical-align: middle;
    }

الشكل الرابع

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الكود:


    .twrank{
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #ff0000;
        color: #242424;
        margin-top: 2px;
        padding: 3px 3px 3px 10px;
        text-align: right;
    }
    /*Copyright a7medvirus*/
    .tw{
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #DEDEDE;
        color: #242424;
        margin-top: 2px;
        padding: 3px 3px 3px 10px;
        text-align: right;
    }

الشكل الخامس

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الكود:

  .twrank{
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    border : 1px dashed #ff0404;
    border-width : 1px
    border-color : #fc0c0c;
    padding : 2px 2px;
    background-repeat : repeat;
    background-color : #f0feff;
    background-image : url();
    background-position : top;
    overflow : visible;
    vertical-align : middle;
    }
    /*Copyright a7medvirus*/
    .tw{
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    border : 1px dashed #ff00b4;
    border-width : 1px
    border-color : #0d2477;
    padding : 2px 2px;
    background-repeat : repeat;
    background-color : #ffffff;
    background-image : url();
    background-position : top;
    overflow : visible;
    vertical-align : middle;
    }

الشكل السادس

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الكود:

 
    .twrank{
 
        border:2px solid #ff0000;
        background:  url(http://i45.servimg.com/u/f45/15/95/28/21/bg2210.jpg) ;border:2px solid #ff0000;
        -moz-border-radius-topright: 15px;
        -webkit-border-radius-topright: 15px;
        -moz-border-radius-bottomleft: 15px;
        -webkit-border-radius-bottomleft: 15px;
        border-radius-topright: 15px;
        border-radius-bottomleft: 15px;
 
    }
    /*Copyright a7medvirus*/
    .tw{
 
        border:2px solid #636363;
        background:  url(http://download.mrkzy.com/e/0311_md_13018304831.png
    ) ;border:2px solid #636363;
        -moz-border-radius-topright: 15px;
        -webkit-border-radius-topright: 15px;
        -moz-border-radius-bottomleft: 15px;
        -webkit-border-radius-bottomleft: 15px;
        border-radius-topright: 15px;
        border-radius-bottomleft: 15px;
        margin-top: 8px;
 
    }

فيّ الختام اتمنى يعجبكمَ الموضوعّ وينالّ رضاكمَ

منقولَ بتصرفّ

من ابداعات الاخ a7medvirus

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

avatar
إدارة هدايا دعوية

..:: مؤسس المنتدى ::..


..:: مؤسس المنتدى ::..
♣ إعْـلآناتْ الشَركَةْ » : = جديد = اشتر الآن من عدد مساهماتك
انثى

♣ مشَارَڪاتْي » : 1411
♣ مُڪإني \ دَولتِـيَ» : السعودية
♣ العـمْرّ» : 30
هوايتي : التصميم والنت
|| ♣ سُمعَتِـيْ » : 71
https://www.facebook.com/pages/%D8%B4%D8%B1%D9%83%D8%A9-%D9%87%D8%AF%D8%A7%D9%8A%D8%A7-%D8%AF%D8%B9%D9%88%D9%8A%D8%A9-%D8%A5%D8%B3%D9%84%D8%A7%D9%85%D9%8A%D8%A9/176070519128303?ref=hlhttps://hadaya.ahlamontada.com
+

تومبيلات تنسيق البيآنآت الشخصيه ..| ^^ Empty رد: تومبيلات تنسيق البيآنآت الشخصيه ..| ^^

السبت مايو 25, 2013 4:09 pm
ماشاء الله تبارك الرحمن ... أكواد رائعة جدآ ..

وتنسيق روعة ....

أعجبني الشكل 3 و 4 و 5 ....

ربي يعطيك العافية .... وموضوع جدآ مفيد ورائع .....

دمتي بخير يامبدعه تومبيلات تنسيق البيآنآت الشخصيه ..| ^^ 4062720805
كتالوج ديزاين
كتالوج ديزاين

..:: مصمم للشركة ::..


..:: مصمم للشركة ::..
♣ إعْـلآناتْ الشَركَةْ » : = جديد = اشتر الآن من عدد مساهماتك
ذكر

♣ مشَارَڪاتْي » : 40
♣ مُڪإني \ دَولتِـيَ» : السعودية
♣ العـمْرّ» : 21
هوايتي : تصميم و برمجة مواقع الانترنت ، الدعاية و الاعلان
|| ♣ سُمعَتِـيْ » : 14
+

تومبيلات تنسيق البيآنآت الشخصيه ..| ^^ Empty رد: تومبيلات تنسيق البيآنآت الشخصيه ..| ^^

السبت مايو 25, 2013 4:11 pm
مآشاء الله تبآركَ الله
+
من زمان اور عليهم ... تتسسلم يدينك

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
okkman
okkman

..:: مراقب عــام ::..


..:: مراقب عــام ::..
♣ إعْـلآناتْ الشَركَةْ » : = جديد = اشتر الآن من عدد مساهماتك
ذكر

♣ مشَارَڪاتْي » : 920
♣ مُڪإني \ دَولتِـيَ» : السعودية
هوايتي : التصميم
|| ♣ سُمعَتِـيْ » : 170
+

تومبيلات تنسيق البيآنآت الشخصيه ..| ^^ Empty رد: تومبيلات تنسيق البيآنآت الشخصيه ..| ^^

الأحد مايو 26, 2013 6:37 am
ما شاء الله رووووووووووووووووعه

يسلمووو هالايديات


تومبيلات تنسيق البيآنآت الشخصيه ..| ^^ 2001738608
الغريــب
الغريــب

..:: أخ جـديـد ::..


..:: أخ جـديـد ::..
♣ إعْـلآناتْ الشَركَةْ » : = جديد = اشتر الآن من عدد مساهماتك
ذكر

♣ مشَارَڪاتْي » : 30
♣ مُڪإني \ دَولتِـيَ» : المملكة العربية السعودية
|| ♣ سُمعَتِـيْ » : 4
+

تومبيلات تنسيق البيآنآت الشخصيه ..| ^^ Empty رد: تومبيلات تنسيق البيآنآت الشخصيه ..| ^^

الأحد مايو 26, 2013 2:00 pm
تسلم تسلم

جزاك الله خير :)
معجب هدايا
معجب هدايا

..:: أخ عـزيـز ::..


..:: أخ عـزيـز ::..
♣ إعْـلآناتْ الشَركَةْ » : = جديد = اشتر الآن من عدد مساهماتك
ذكر

♣ مشَارَڪاتْي » : 50
♣ مُڪإني \ دَولتِـيَ» : في قلب المسلمين
|| ♣ سُمعَتِـيْ » : 0
+

تومبيلات تنسيق البيآنآت الشخصيه ..| ^^ Empty رد: تومبيلات تنسيق البيآنآت الشخصيه ..| ^^

الأحد مايو 26, 2013 8:31 pm
ماشاء الله جميلة
روووووووووووووعة

يسلموووو

تومبيلات تنسيق البيآنآت الشخصيه ..| ^^ 4062720805
الرجوع الى أعلى الصفحة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى