shqawe
ربي أشرح لي صدري
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
غبنا عنكم كثيرا ً وذلك رغما ً عنا بسبب ما يمر به العالم بنكبة وباء كورونا حمانا الله واياكم منه انتم ومن تحبون وهو ما سبب لخبطة في حياة الكل لذا احببنا ان نقدم لكم هذا الدرس الذي لاطالما رأيت الكثير يسألون عنه وعن كيفية عمله لذا وجب علينا ان نقدم المعلومة لعلها تجيب عن تساؤل الجميع ان شاء الله ولا نطلب منكم سواء الدعاء لنا ولوالدينا الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
الدرس هو عبارة عن كيفية عمل زر عند الضغط عليه يتم اخفاء الشريط الجانبي او اظهاره حسب ما تريد مع حفظ اختيارك هذا عند العودة مرة أخرى للمنتدى مثل ماهو موجود في استايل زين العربية الموجود على الرابط التالي :
استايل عام على زين العربية 2020 الإصدار الأول للجيل الثاني من XenForo
استايل علم على زين العربية 2020 الإصدار الأول للجيل الثاني من XenForo
xenarabia.com
بسم الله نبدأ الدرس:
التعديل سوف يكون على قالب
PAGE_CONTAINER نفتح القالب ومن ثم نبحث عن:
HTML:
<div class="p-body-mainونضيف فوقة هالكود:
كود:
<div class="hide_sidebar">
<xf:if is="$sidebar">
<span id="collapse-side" class="sidebar-btn {{ !is_toggled('xensidebarCollapse') ? ' is-active' : '' }}"
data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie"
data-target=".p-body-main--withSidebar" data-storage-key="xensidebarCollapse">
</span>
</xf:if>
</div>ونبحث عن هذا الكود
كود:
<div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}">ونستبدله بهذا الكود:
كود:
<div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}{{ !is_toggled('xensidebarCollapse') ? ' xy_default' : '' }}">ثم نقوم باضافة هذه الاكواد في قالب
extra.less مع امكانية تغييرها حسب ما تريد
CSS:
.sidebar-btn{
background:#fff;
padding: 1px 7px;
font-size: 16pt;
color:#4bcbdf;
border: 1px solid #d4d4d4;
border-radius: 3px;
line-height: 28px;
&:hover{
background: #4bcbdf;
color: #fff;
}// End hover sidebar-btn
&:before{
.m-faBase('Pro');
.m-faContent(@fa-var-arrow-square-left);
}// End before sidebar-btn
&.is-active:before{
.m-faBase('Pro');
.m-faContent(@fa-var-arrow-square-right);
color:#ce3451;
}// End is-active:before
} // End sidebar-btn tag
.p-body-main.p-body-main--withSidebar.is-active .p-body-content, .p-body-main.p-body-main--withSideNav.is-active .p-body-content {
width: 100%;
max-width: 100%;
padding-right: 0;
}
.p-body-main.p-body-main--withSidebar.is-active .p-body-sidebar, .p-body-main.p-body-main--withSideNav.is-active .p-body-sidebar, .p-body-main.p-body-main--withSidebar.is-active .p-body-sideNav, .p-body-main.p-body-main--withSideNav.is-active .p-body-sideNav {
width: 0;
height: 0;
opacity: 0;
overflow: hidden;
display: none;
}والى هنا ينتهي درسنا واتمنى التجربة واي سؤال حاضرين للغالين
ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لا يخطأ
تقبلوا احترامي وتقديري
اخوكم
شقاوي
