ستايل جديد شبيه xen foro في الشكل

الله يعطيك العافية عمل جيد كأول ستايل لك
لكن هناك بعض الملاحظات والأخطاء السريعة تحتاج إلى اصلاح

- صورة اللوقو
styles/damasvb/images/4algeria-logo-Green.png
غير موجودة في مجلد صور الاستايل

- عند النقر على رابط المنتديات في الأعلى يذهب إلى رابطhttp://localhost/pb/

- عرض صفحات الاستايل متمددة حيث تظهر مسطرة اسفل الاستايل بحيث يلغي خاصية توافق التصفح بشكل جيد لجميع الشاشات

- الاحصائيات اسفل كل منتدى في الرئيسية كعدد المواضيع والردود وغيرها تحتاج تنسيق الإتجاه لليمين

- يوجد تعارض جافا سكربت مما يسبب عدم ظهور جميع قوائم آخر 5 احصائيات اسفل المنتدى

- عدم ظهور الايقونات السفليه لبلوك مشاركة هذه الصفحة في القائمة الجانبية

- صفحة عرض المواضيع في القسم تحتاج تنسيق أكثر في توحيد عرض الجداول وظهورها بشكل أفضل

- عند النقر على ايقونات الاشعارات يحصل ظهور مكرر لأيقونة الاشعارات + وتمدد شريط (مالجديد - الأعضاء - الرسائل الخاصة ... الخ ) مع القائمة

- لون خلفية وخط ايقونة خيارات المراقبين أعلى الموضوع لا يرى لأنه بنفس لون الخلفية

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

- الخطوط بالخط التوهامي متقاربة ومتلاصقة تقريباً تحتاج تنسيق

- بيانات العضو في الردود تظهر بشكل غير جيد في المنتصف



بعد الإنتهاء يفضل ان تختبر توافق الاستايل مع الجوال و ارفاق شرح التركيب مع الاستايل كمستند نصي


من مشاهدة سريعة جداً هذه اهم الملاحظات التي اراها

موفق

المشاركة الأصلية كتبت بواسطة: Soliman الله يعطيك العافية عمل جيد كأول ستايل لك
لكن هناك بعض الملاحظات والأخطاء السريعة تحتاج إلى اصلاح

- صورة اللوقو
styles/damasvb/images/4algeria-logo-Green.png
غير موجودة في مجلد صور الاستايل

- عند النقر على رابط المنتديات في الأعلى يذهب إلى رابطhttp://localhost/pb/

- عرض صفحات الاستايل متمددة حيث تظهر مسطرة اسفل الاستايل بحيث يلغي خاصية توافق التصفح بشكل جيد لجميع الشاشات

- الاحصائيات اسفل كل منتدى في الرئيسية كعدد المواضيع والردود وغيرها تحتاج تنسيق الإتجاه لليمين

- يوجد تعارض جافا سكربت مما يسبب عدم ظهور جميع قوائم آخر 5 احصائيات اسفل المنتدى

- عدم ظهور الايقونات السفليه لبلوك مشاركة هذه الصفحة في القائمة الجانبية

- صفحة عرض المواضيع في القسم تحتاج تنسيق أكثر في توحيد عرض الجداول وظهورها بشكل أفضل

- عند النقر على ايقونات الاشعارات يحصل ظهور مكرر لأيقونة الاشعارات + وتمدد شريط (مالجديد - الأعضاء - الرسائل الخاصة ... الخ ) مع القائمة

- لون خلفية وخط ايقونة خيارات المراقبين أعلى الموضوع لا يرى لأنه بنفس لون الخلفية

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

- الخطوط بالخط التوهامي متقاربة ومتلاصقة تقريباً تحتاج تنسيق

- بيانات العضو في الردود تظهر بشكل غير جيد في المنتصف



بعد الإنتهاء يفضل ان تختبر توافق الاستايل مع الجوال و ارفاق شرح التركيب مع الاستايل كمستند نصي


من مشاهدة سريعة جداً هذه اهم الملاحظات التي اراها

موفق

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

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

تم اصلاح الروابط

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

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

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

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

بالتوفيق لك

السلام عليكم ممكن مساعدة في تكويد ستايل من الاخوة الخبراء عندي 3 اشهر وانا احاول دون فائدة
اريد تكوين قالب
sections_list
من يستطسع فلا يبخل علينا في المساعدة
وشكرا لكم

ملاحضة
القالب موجود في المرفقات مع قالب المراد التحويل اليه new sections_list

الستايل من هنا

http://apexgoldcoin.eb2a.com

ارفق صورة او موقع الاتسايل عشان اعدل لك القالب بدون النسخ.

المشاركة الأصلية كتبت بواسطة: عبدالاله الهذلي ارفق صورة او موقع الاتسايل عشان اعدل لك القالب بدون النسخ.

تفضل اخي عبد الاله
الموقع من هنا
احاول التعديل على المنتديات الرشيسية
https://www.4algeria.com/forum/
قالب بعد التعديل
في المرفقات
ولكنن به اخطاء ابتداء من forums_sub forums_sub_rep
لم استطع التعديل عليها
الشكل من هنا
بعد التعديل على قالب sections_list
http://apexgoldcoin.eb2a.com/?i=1
وبارك الله فيك اخي عبد الاله

المشاركة الأصلية كتبت بواسطة: rahmani 2016

المشاركة الأصلية كتبت بواسطة: عبدالاله الهذلي ارفق صورة او موقع الاتسايل عشان اعدل لك القالب بدون النسخ.

تفضل اخي عبد الاله
الموقع من هنا
احاول التعديل على المنتديات الرشيسية
https://www.4algeria.com/forum/
قالب بعد التعديل
في المرفقات
ولكنن به اخطاء ابتداء من forums_sub forums_sub_rep
لم استطع التعديل عليها
الشكل من هنا
بعد التعديل على قالب sections_list
http://apexgoldcoin.eb2a.com/?i=1
وبارك الله فيك اخي عبد الاله

تفضل قالب sections_list، وسوي أستبدال له بالكامل ولاتنسى تحط css في ورقة style.css مع مراعاة حذف الكلاسات والأي دي المكرر.

<style>
.category_title>a {
    padding: 6px 10px;
    font-size: 20px;
    color: #2577b1;
    border: 1px solid #dfdfdf;
    background: linear-gradient(0deg, #edf6fd, #f6fafe);
    display: block;
}

.category_title>.CollapseIcon {
    position: absolute;
    left: 4px;
    top: 6px;
    border: unset;
}

.category_title {
    position: relative;
    clear: both;
}


.sub_forums>div {
    display: table-cell !important;
    vertical-align: middle !important;
}

.forum-icon {
    text-align: center !important;
    width: 46px !important;
    padding-right: 10px;
}

.sub_forums {
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #ddd;
    padding: 10px;
}

.forum-numrs {
    width: 20%;
    text-align: left;
}

.forum-stats {
    padding-right: 10px;
    width: 35%;
}

.forum-last-post {
    width: 20%;
    font-size: 11px;
    line-height: unset;
    margin: 0;
    padding: 0 10px 0;
    float: unset;
}



.forum-stats>.title_n>a {
    color: #2577b1 !important;
    font-size: 14px;
}

.forum-stats>div,
.sub_forums a {
    color: #000;
}

.forum-last-post a,
.forum-last-post .last_time_ago,
.forum-last-post i,
.forum-last-post .no_post {
    color: #2577b1 !important;
    font-weight: normal;
}


.describe,
.title_n,
.node-subNodeMenu {
    padding: 0;
}

.sections {
    background: unset;
    border: unset;
    width: unset;
    padding: unset;
    display: unset;
    border-radius: unset;
}

.sbp_forum {
    padding: 0 10px;
}

.forum-numrs>dl {
    display: inline-block !important;
    margin: unset !important;
    text-align: center;
    width: 20%;
}

.forum-numrs>dl>dtt,.forum-numrs>dl>dd {
    display: block !important;
    margin: unset !important;
}

.Info_last_post, .sub_forums>.forum-last-post>.Photo {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.sub_forums>.forum-last-post>.Photo {
    width: 40px;
    height: 40px;
    background-size: 100%;
    border-radius: 100%;
}

.subNodeMenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.subNodeMenu>li {
    padding: 0;
    margin: 0;
    line-height: unset;
    border-bottom: 1px solid #ddd;
    display: block;
}

.subNodeMenu>li>a {
    display: block;
    padding: 10px 25px 10px 0px !important;
    margin: 0;
    text-decoration: none;
}

.subNodeMenu>li>a:hover {
    background-color: #edf6fd9e;
}

@media (max-width:800px) {

    .forum-numrs {
        text-align: right;
        margin-top: 25px;
    }

    .sub_forums,
    .sub_forums>div {
        width: 100%;
        display: inline-block !important;
    }

    .forum-stats {
        width: 80% !important;
    }

    .forum-last-post {
        width: 100% !important;
        padding: 1rem 3rem;
    }

    .sub_forums>.forum-stats>div>ol {
        width: 300px;
        display: none;
    }

    .node-subNodeMenu{
        display: none;
    }

    .forum-stats, .forum-numrs, .forum-last-post {
        padding-right: 50px;
    }

    .forum-icon {
        position: absolute;
        right: 0;
    }
}
</style>

<div class="sections">
{if {$SHOW_SUB_SECTIONS}}
<!-- start_category-in_page_forum -->
<ul class="categorys">
<li class="category forum_sub">
<span>{$lang['forum_sub']} : {$Section_Title}</span>
</li>
{/if}
{Des::foreach}{forums_list}{forum}
{if {$forum['parent']} == 0}
{if {$forum['sort']} != 1}
</ul></div>
<!-- end_categorys_one_by_one -->
{/if}
<!-- start_categorys_one_by_one -->
<script type="text/javascript">
$(document).ready(function()
{
var img = "collapseimage_{$forum['id']}";
var imgChange = document.getElementById(img);
if($.cookie("pbboard_collapse_forumid_{$forum['id']}") == "{$forum['id']}") {
$("#collapseimg_forumbit_{$forum['id']}").css('display', 'none');
imgChange.className = "collapsed";
};
});
</script>


<div class="category_title">
<a class="CollapseIcon" href="#collapseforum_{$forum['id']}" onclick="return collapse_toggle('{$forum['id']}')" id="collapseforum_{$forum['id']}">
<span id="collapseimage_{$forum['id']}" class="expanded"></span>
</a>
<a href="index.php?page=forum&amp;show=1&amp;id={$forum['id']}">
<span>{$forum['title']}</span></a>
</div>


<div id="collapseimg_forumbit_{$forum['id']}">
<ul class="categorys">
{elseif {$forum['parent']} != 0}
<li class="sub_forums">
<div class="forum-icon">
{if {$forum['use_section_picture']} and {$forum['sectionpicture_type']}== 1}
<span class="section_picture" title="{$lang['section_picture']}"><img src="{$forum['section_picture']}" alt="{$lang['section_picture']}" /></span>
{else}
<span class="{$forum['forum_icon']}" title="{$forum['forum_icon_alt']}"></span>
{/if}
</div>
<div class="forum-stats">
<div class="title_n"><a href="index.php?page=forum&amp;show=1&amp;id={$forum['id']}">
{$forum['title']}</a></div>
{if {$forum['use_section_picture']} and {$forum['sectionpicture_type']} == 2}
<div class="section_picture_dn_describe">
<span class="section_picture" title="{$forum['forum_icon_alt']}"><img src="{$forum['section_picture']}" alt="{$forum['forum_icon_alt']}" /></span>
</div>
{/if}
{if {$_CONF['info_row']['no_describe']} and {$forum['section_describe']} != ''}
<div class="describe">
{$forum['section_describe']}
</div>
{/if}

{if {$_CONF['info_row']['no_moderators']} and {$forum['moderators_list']}}
<div class="home-moderators-lain">
{$lang['moderators_list']} {$forum['moderators_list']}
</div>
{/if}


<!-- start_forum_sub -->
{if {$_CONF['info_row']['no_moderators']} and {$forum['moderators_list']}}
<div class="home-moderators-lain">
    {$lang['moderators_list']} {$forum['moderators_list']}
</div>
{/if}
{if {$forum['is_sub']}}
{if {$_CONF['info_row']['no_sub']}}
<div class="node-subNodeMenu">
    <a class="menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false"
        aria-haspopup="true">المنتديات الفرعية</a>
    <div class="menu" data-menu="menu" aria-hidden="true">
        <div class="menu-content">
            <h4 class="menu-header">المنتديات الفرعية</h4>
            <ol class="subNodeMenu">
                {$forum['sub']}
            </ol>
        </div>
    </div>
</div>
{/if}
{/if}
<!-- end_forum_sub  -->



{if {$forum['num_subjects_awaiting_approval']} >0 and {$forum['IsModeratorCheck']}}
<div class="awaiting_approval pkr-b">{$lang['subjects_review']}: <b>{$forum['num_subjects_awaiting_approval']}</b></div>
{/if}
{if {$forum['num_replys_awaiting_approval']} >0 and {$forum['IsModeratorCheck']}}
<div class="awaiting_approval pkr-b">{$lang['replys_review_num']}: <b>{$forum['num_replys_awaiting_approval']}</b>
{if {$align} == 'right'}
<a class="appssroveposts" href="index.php?page=search&amp;option=6&amp;review_reply=1&section={$forum['id']}&amp;sort_order=DESC" title="{$lang['approveposts']}"><i class="fa fa-arrow-circle-left pkr-c" title="{$lang['approveposts']}"></i> </a>
 {else}
<a class="appssroveposts" href="index.php?page=search&amp;option=6&amp;review_reply=1&section={$forum['id']}&amp;sort_order=DESC" title="{$lang['approveposts']}"><i class="fa fa-arrow-circle-right pkr-c" title="{$lang['approveposts']}"></i> </a>
{/if}
</div>
{/if}
</div>

<div class="forum-numrs">
<dl class="subject_num subject_num_icon" title="{$lang['subject_num']}">
<dtt>{$lang['subject_num']}</dtt>
<dd>{$forum['subject_num']}</dd>
</dl>
<dl class="reply_num reply_num_icon" title="{$lang['reply_num']}">
<dtt>{$lang['reply_num']}</dtt>
<dd>{$forum['reply_num']}</dd>
</dl>

{if {$forum['forum_online']}}
<dl class="forum_online online_num_icon" title="{$lang['Whos_Online']}">
<dtt>{$lang['viewer']})</dtt>
<dd>{$forum['forum_online']}</dd>
</dl>
{/if}

</div>

<div class="forum-last-post">
{if {$forum['linksection']}}
<div class="no_post">{$lang['linkvisitor']} {$forum['linkvisitor']}</div>
{elseif {$forum['hide_subject']} and {$forum['ModeratorCheck']}}
<div class="no_post">{$lang['speciality']}</div>
{elseif {$forum['section_password']} and {$forum['ModeratorCheck']}}
<div class="no_post">{$lang['speciality']}</div>
{elseif {$forum['last_subject']} != ''}

{if {$_CONF['info_row']['allow_avatar']}}
<div class="Photo"  title="{$lang['Picture']} {$forum['username']} {$lang['Personal']}" style="background-image: url({$forum['writer_photo']});">

</div>
{/if}


<div class="Info_last_post">
<div class="Info_last_Reply">

 <a href="index.php?page=topic&amp;show=1&amp;id={$forum['last_subjectid']}" title="{$forum['last_subject_title']}">{$forum['last_subject']}</a></div>
<div class="NewsUser"> <span class="last_writer">{$forum['last_writer']}</span><span class="yy"> , </span> 

<span class="last_time_ago">{$forum['last_time_ago']}</span>

<a href="index.php?page=topic&amp;show=1&amp;id={$forum['last_subjectid']}&amp;count={$forum['last_berpage_nm']}#{$forum['last_reply']}" title="{$lang['Go_to_last_post']}">
{if {$align} == 'right'}
<i class="Iconchevron fa fa-arrow-circle-left pkr-c" title="{$lang['Go_to_last_post']}"></i>
 {else}
<i class="Iconchevron fa fa-arrow-circle-right pkr-c" title="{$lang['Go_to_last_post']}"></i>
{/if}
</a></div>
</div>
{else}
<div class="no_post">{$lang['no_post']}</div>
{/if}
</div>
</li>
{/if}
{/Des::foreach}
</ul>
{if !{$SHOW_SUB_SECTIONS}}
</div>
{/if}
<!-- End_All-categorys -->
</div>

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


مثال

http://apexgoldcoin.eb2a.com/?i=1

<!-- END_TABLE_SECTIONS -->