تسجيل الدخول

المنتدى انشاء ايقونات للقائمة الجانبية و الناف بار

الموضوع في 'ركن شروحات استخدام xenForo' بواسطة Turkialawlqy, بتاريخ ‏22-09-2012.

  1. Turkialawlqy

    Turkialawlqy xDeveloper

    إنضم إلينا في:
    ‏01-02-2012
    المشاركات:
    1,839
    الإعجابات المتلقاة:
    1,334
    الجنس:
    ذكر
    الإقامة:
    شبوة
    بسم الله الرحمن الرحيم

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

    اليوم اقدم لكم شرح وضع ايقونات للبلوكات في القائمة الجانبية وشريط الناف بار

    مثال

    1.png

    2.png

    نبدأ على بركة الله ,,
    الان سنقوم بتعديل قوالب القائمة الجانبية
    اذهب الى لوحة التحكم ثم الى اللغات والاستايلات
    ثم الى القوالب
    ابحث عن القوالب التالية :
    • sidebar.css = قالب css للقائمة الجانبية
    ضع في بدايتة
    كود HTML:
     .header_icon { position: relative; vertical-align: top; } 
    • sidebar_online_users = طاقم الإدارة المتصلون حالياً + الأعضاء المتصلون حالياً
    ابحث عن
    كود HTML:
     <h3>{xen:phrase staff_online_now}</h3> 
    استبدله بـ
    كود HTML:
     <h3><img src="XxXx" class="header_icon"> {xen:phrase staff_online_now}</h3> مع مراعاة استبدال XxXx بالايقونه التي تريد ظهورها لـ { طاقم الإدارة المتصلون حالياً } 
    ابحث عن
    كود HTML:
     <h3><a href="{xen:link online}" title="{xen:phrase see_all_online_users}">{xen:phrase members_online_now}</a></h3> 
    استبدلة بـ
    كود HTML:
     <h3><img src="XxXx" class="header_icon"> <a href="{xen:link online}" title="{xen:phrase see_all_online_users}">{xen:phrase members_online_now}</a></h3> 
    مع مراعاة استبدال XxXx بالايقونه التي تريد ظهورها لـ { الأعضاء المتصلون حالياً }

    الان انتهينا من البلوكين الاولين { طاقم الإدارة المتصلون حالياً + الأعضاء المتصلون حالياً }
    ثم نبحث عن
    • forum_list = قالب عرض المنتدى
    ابحث عن
    كود HTML:
    
    
    
    <h3>{xen:phrase forum_statistics}</h3> 
    استبدله بـ
    كود HTML:
     <h3><img src="XxXx" class="header_icon"> {xen:phrase forum_statistics}</h3> 
    مع مراعاة استبدال XxXx بالايقونه التي تريد ظهورها لـ { إحصائيات المنتدى }

    انتهينا الان من قالب الاحصائية


    الان ناتي الى الناف بار

    نبحث عن
    • navigation = قالب الناف بار
    ابحث عن
    كود HTML:
     <a href="{$tabs.forums.href}" class="navLink">{$tabs.forums.title}</a> 
    استبدله بـ
    كود HTML:
     <a href="{$tabs.forums.href}" class="navLink"><img src="XxXx" class="header_icon"> {$tabs.forums.title}</a> 
    مع مراعاة استبدال XxXx بالايقونه التي تريد ظهورها لـ { المنتدى }

    ابحث عن
    كود HTML:
     <a href="{$tabs.members.href}" class="navLink">{$tabs.members.title}</a> 
    استبدله بـ
    كود HTML:
     <a href="{$tabs.members.href}" class="navLink"><img src="XxXx" class="header_icon"> {$tabs.members.title}</a> 
    مع مراعاة استبدال XxXx بالايقونه التي تريد ظهورها لـ { الاعضاء }

    ابحث عن
    كود HTML:
     <a href="{$tabs.help.href}" class="navLink" rel="help">{$tabs.help.title}</a> 
    استبدله بـ
    كود HTML:
     <a href="{$tabs.help.href}" class="navLink" rel="help"><img src="XxXx" class="header_icon"> {$tabs.help.title}</a> 
    مع مراعاة استبدال XxXx بالايقونه التي تريد ظهورها لـ { التعليمات }


    أعتذر عن عدم تنسيق الموضوع لضيق الوقت لدي

    مودتي :)
    hkahx hdr,khj ggrhzlm hg[hkfdm , hgkht fhv
     
  2. أيوب بوخزه

    أيوب بوخزه :: عضو جديد ::

    إنضم إلينا في:
    ‏25-02-2012
    المشاركات:
    48
    الإعجابات المتلقاة:
    2
    الجنس:
    ذكر
    الإقامة:
    الجزائر
    ما تركت لي شيء أخي الغالي​
    والله شرح موفق​
    هيك ولا بلآش​
    تسلم يا رب;)

     
  3. أيوب بوخزه

    أيوب بوخزه :: عضو جديد ::

    إنضم إلينا في:
    ‏25-02-2012
    المشاركات:
    48
    الإعجابات المتلقاة:
    2
    الجنس:
    ذكر
    الإقامة:
    الجزائر
    أريد كود مكتبة الفيديو والدردشـــة والرئيسية​
    هدا في قالب الناف بار​
    أما في القطع الجانبية​
    1- مشاركة هده الصفحة​
    2- ألوان المجموعات​
    3- المتواجدون بالمنتدى​
    هدا ما تبقى لي​
    أنتظر ردكم​
    ;)

     
  4. Turkialawlqy

    Turkialawlqy xDeveloper

    إنضم إلينا في:
    ‏01-02-2012
    المشاركات:
    1,839
    الإعجابات المتلقاة:
    1,334
    الجنس:
    ذكر
    الإقامة:
    شبوة
    ^^
    اهلاً بك أخي ايوب

    لم افهم قصدك أخي العزيز ياليت توضح اكثر { هل تحتاج اضافات مكتبة الفيديو والدردشة }
    ام انك تريد ان تعمل لها ايقونات

    ان كان الامر كذلك بامكانك استعراض سورس الصفحة الرئيسية والبحث عن الكلاسات في القوالب

    يحتاج الامر الى طوله بال في البداية وتجربة

    وعدم الخوف من القيام بالتجربة

    مثلا كنت في بداية تجاربي مع الزين فورو وقوالبها اعمل على التعديلات
    اضع مثلاً 11 || واقوم بالحفظ دون الخروج من القالب
    واذهب للرئيسية وعمل تحديث للصفحة واشاهد اين وضعت التعديل ان كان مناسب قمت بوضع الكود الذي اريد وان كان غير مناسب ابحث عن مكان اخر للتعديل وهكذا الى ان صار الامر سهل للغاية

    فقط تحتاج الى معرفة باكواد html و css وراح تبدع في هذا المجال

    معليش كلامي كثير لكن لكي توصل الفكره
    وفقك الله ,,
     
  5. أيوب بوخزه

    أيوب بوخزه :: عضو جديد ::

    إنضم إلينا في:
    ‏25-02-2012
    المشاركات:
    48
    الإعجابات المتلقاة:
    2
    الجنس:
    ذكر
    الإقامة:
    الجزائر
    شكرا أخي الكريم على الإفادة
    أردن أن أضع أيقونات للدردشة ومكتبة الفيدية مثل البقية
    وددت لو وجدت مثل الشرح السابق لك أخي الكريم
    أجد الكود وأستبدله
    كما في شرحك
    :)

     
  6. bousaid

    bousaid :: إداري ::
    rankrankrankrank

    إنضم إلينا في:
    ‏05-02-2012
    المشاركات:
    482
    الإعجابات المتلقاة:
    364
    الجنس:
    ذكر
    الإقامة:
    الجزائر - أدرار
    الدردشة و المكتبة عبارة عن هاكات و لا أظن أن هناك إمكانية إضافة الرمز إلا بتعديلات خاصة بالهاك
     
    أعجب بهذه المشاركة أيوب بوخزه
  7. طير المحبه

    طير المحبه :: عضو جديد ::

    إنضم إلينا في:
    ‏01-03-2015
    المشاركات:
    36
    الإعجابات المتلقاة:
    9
    الجنس:
    ذكر
    الإقامة:
    الجزائر

    يبدو أنك نسيت شيء .. كود الايقونه الرئيسية



    تفضلوا

    ابحث عن
    كود:
    <li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink">{xen:phrase home}</a></li>
    استبدله بـ
    كود:
    <li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink"><img src="XxXx" class="header_icon">{xen:phrase home}</a></li>
    مع مراعاة استبدال XxXx بالايقونه التي تريد ظهورها لـ { الرئيسية }
     
    أعجب بهذه المشاركة zoom2000
جاري تحميل الصفحة...