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

[ طلب ] طلب فوتر بسيط

ZeinabBahaa

:: الأعضاء ::
2 يناير 2021
32
12
8
السلام عليكم ورحمة الله وبركاته
أخوتي الكرام تحية طيبة
أحتاج فوتر مثل هذا
grgocljl58kg.png

وشكرا مقدما
 
وعليكم السَلام ورحمة الله وبركاته
تفضلي أختي هذه محاولة بسيطة مني
وبإنتظار الأخ الحبيب @shqawe للتعديل حسب ما ينقص
فأنا والcss لسنا متفقان ولن نتفق
هذا كود الhtml

HTML:
    <div class="p-footer-inner">
        <nav class="p-footer-block">
            <ul class="p-footer-blockColumns">
                <li class="p-footer-logoColumn">
                    <div class="p-footer-logoContent">
                        <div class="p-footer-logo">
                            <a href="https://maanaa.net/">
                                <img src="https://i.imgur.com/xhJv7a2.png" alt="منتديات معنا" width="200" height="72">
                            </a>
                        </div>

                        <div class="p-footer-buttons">
                            <a href="https://maanaa.net/login/" class="p-footer-button">تسجيل الدخول</a>
                            <a href="https://maanaa.net/register/" class="p-footer-button">إنشاء حساب</a>
                        </div>

                        <div class="p-footer-social">
                            <a href="#"><span class="p-footer-social-icon"><i class="fab fa-twitter-square"></i></span> تويتر</a>
                            <a href="#"><span class="p-footer-social-icon"><i class="fab fa-facebook-square"></i></span> فيسبوك</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">منتجات</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">المبيعات</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">العُملاء</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">المساعدة</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>

وهذه تخصيصات الcss

CSS:
.p-footer {
    font-size: 13px;
    color: #edf6fd;
    background: #0f3652;
    padding: 20px 0;
    background: linear-gradient(0deg, #0f3652, #185886)
}

.p-footer a {
    color: #bcdef5
}

.p-footer-blockColumns {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between
}

.p-footer-blockColumns>li {
    min-width: 90px;
    margin-right: 50px
}

.p-footer-blockColumns>li:first-child {
    margin-right: 0
}

.p-footer-linkGroup .p-footer-linkGroup-header {
    font-weight: bold;
    margin-bottom: .5em
}

.p-footer-linkGroup ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.p-footer-linkGroup ul li {
    margin-bottom: .5em
}

.p-footer-logoColumn {
    flex: 1
}

.p-footer-logoContent:last-child {
    margin-bottom: 0
}

.p-footer-buttons {
    margin: 10px 0
}

.p-footer-buttons .p-footer-button+.p-footer-button {
    margin-right: 10px
}

.p-footer-button {
    display: inline-block;
    border: 1px solid currentColor;
    border-radius: 5px;
    padding: 6px 10px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.p-footer-button:hover {
    text-decoration: none;
    color: #79bdeb
}

.p-footer-social a {
    display: inline-block;
    margin-right: 20px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.p-footer-social a:first-child {
    margin-right: 0
}

.p-footer-social a:hover {
    text-decoration: none;
    color: #79bdeb
}

.p-footer-social-icon {
    display: inline-block;
    font-size: 1.75em;
    min-width: 1.1em;
    text-align: center;
    vertical-align: -.16em
}

.p-footer-extra {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 12px
}


.p-footer-extra-links {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-right: 10px
}

.p-footer-extra-links>li {
    display: inline-block;
    margin-right: 20px
}

.p-footer-extra-links>li:first-child {
    margin: 0
}

.p-footer-debug {
    margin-top: 20px;
    font-size: 11px;
    text-align: center
}

.p-footer-debug .pairs>dt {
    color: inherit
}

@media (max-width:850px) {
    .p-footer-inner {
        max-width: 600px
    }
    .p-footer-blockColumns {
        flex-wrap: wrap;
        margin-bottom: -20px
    }
    .p-footer-blockColumns>li {
        width: 50%;
        margin-left: 0;
        margin-bottom: 20px
    }
    .p-footer-blockColumns>li.p-footer-logoColumn {
        width: 100%;
        min-width: 100%;
        border-bottom: 1px solid rgba(188, 222, 245, 0.15);
        text-align: center;
        padding-bottom: 20px
    }
    .p-footer-extra {
        flex-wrap: wrap
    }
    .p-footer-extra>* {
        width: 100%
    }

    .p-footer-extra-links {
        order: 1;
        padding-left: 0;
        text-align: center
    }
}

@media (max-width:300px) {
    .p-footer-blockColumns>li {
        width: 100%;
        text-align: center
    }
}

تحياتي
 
جزاك الله خير أحمد
ينقص فقط ضبط خلفية الفوتر وحجمه مع الستايل اللذي استخدمه هنا
 
ما قصر معك اخونا احمد اختي زينب وحقيقة زرت موقك ولم اجدك قد استخدمتي الكود الذي وضعه اخونا احمد

يعني ممكن تركيب الكود الي وضعه اخونا احمد وبعدها ممكن اعداد الالوان حسب حاجتك مع ان خلفية الفوتير اللي وضعها اخونا احمد ليست بعيده من اﻻستايل الافتراضي الخاص بموقعك
 
ما قصر معك اخونا احمد اختي زينب وحقيقة زرت موقك ولم اجدك قد استخدمتي الكود الذي وضعه اخونا احمد

يعني ممكن تركيب الكود الي وضعه اخونا احمد وبعدها ممكن اعداد الالوان حسب حاجتك مع ان خلفية الفوتير اللي وضعها اخونا احمد ليست بعيده من اﻻستايل الافتراضي الخاص بموقعك
انا جربته عندي يا غالي على localhost وظهر بهذا الشكل
وأعتقد أنها قامت بتركيبه ثم حذفته لما لقيت أن تنسيقه غير مضبوط

1612405511334.png
 
تفضلي يا ست زينب تم التعديل وان شاء الله يكون نفس طلبك صورة من الشكل النهائي

zenab.jpeg

اوﻻً قومي بانشاء قالب جديد على اﻻستايل الذي تريدين وسميه مثلا ً extra_footer وضيفي فيه الكود التالي:

HTML:
<div class="p-extra-footer">
        <nav class="p-footer-block">
            <ul class="p-footer-blockColumns">
                <li class="p-footer-logoColumn">
                    <div class="p-footer-logoContent">
                        <div class="p-footer-logo">
                            <a href="https://maanaa.net/">
                                <img src="https://i.imgur.com/xhJv7a2.png" alt="منتديات معنا" width="200" height="72">
                            </a>
                        </div>

                        <div class="p-footer-buttons">
                            <a href="https://maanaa.net/login/" class="p-footer-button">تسجيل الدخول</a>
                            <a href="https://maanaa.net/register/" class="p-footer-button">إنشاء حساب</a>
                        </div>

                        <div class="p-footer-social">
                            <a href="#"><span class="p-footer-social-icon"><i class="fab fa-twitter-square"></i></span> تويتر</a>
                            <a href="#"><span class="p-footer-social-icon"><i class="fab fa-facebook-square"></i></span> فيسبوك</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">منتجات</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">المبيعات</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">العُملاء</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">المساعدة</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>

بعد ذلك قومي بفتح قالب PAGE_CONTAINER وابحثي عن هذا الكود

HTML:
<footer class="p-footer" id="footer">

وضيفي فوقه هذا الكود

HTML:
<xf:include template="extra_footer" />

وﻻحظي ان الكود السابق هو كود ﻻستدعاء القالب الذي تم انشاءه سابقا ً باسم extra_footer فان كنتي قد غيرتي اﻻسم فقومي بتغيير اﻻسم في الكود السابق

اﻻن تبقى ان تضيفي الكود التالي الى قالب extra.less

CSS:
.p-extra-footer{
    color: @xf-pageBg;
    background: #0f3652;
    padding: 20px 0;
    background-image: linear-gradient(to bottom, #185886, #154f79, #13476b, #113e5f, #0f3652);
    
    .p-footer-block{
        width: @xf-pageWidthMax;
        margin: 0px auto;
        
        ul{
            list-style: none;
            li{
                flex: 1;
                &:first-child{
                    flex: 2;
                }// end first-child
                
            }// end li
            
        }// end ul
        
        .p-footer-blockColumns{
            display: flex;
            justify-content: space-between;
            
                .p-footer-button{
                    color: @xf-chromeTextColor !important;
                }// end p-footer-button
                
                .p-footer-social a{
                    color: @xf-chromeTextColor !important;
                }// end p-footer-social
                
            
            .p-footer-linkGroup{
                display: flex;
                flex-direction: column;
                
                ul{
                    margin: 0;
                    padding: 0;
                    
                    li{
                        
                        a{
                            color: @xf-chromeTextColor;
                        }// end a
                        
                    }// end li
                    
                }// end ul
                
            }// end p-footer-linkGroup
            
        }// end p-footer-blockColumns
    }
}

@media (max-width: @xf-responsiveNarrow){
    .p-extra-footer .p-footer-block{
        width: 100%;
    }
    .p-extra-footer .p-footer-block .p-footer-blockColumns{
        flex-direction: column;
        li{
            align-self: center;
        }
    }
}

@media (max-width: @xf-responsiveMedium){
    .p-extra-footer .p-footer-block{
        width: 100%;
    }
    .p-extra-footer .p-footer-block .p-footer-blockColumns{
        flex-direction: column;
        li{
            align-self: center;
        }
    }
}

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

كود:
<footer class="p-footer" id="footer">

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

HTML:
<footer class="p-footer" id="footer">
<xf:include template="extra_footer" />

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

قومي بتغيير الرقم 2 الى رقم 1 في كود ال css التالي وجربي اذا ناسب معك الوضع فالحمد لله رب العالمين واذا ﻻ فارجعيه كما كان:

كود:
 &:first-child{
                    flex: 2; // غيري الرقم هذا
                }// end first-child

احترامي وتقديري
اخوك
شقاوي
 

إحصائيات المنتدى

المواضيع
1,444
المشاركات
16,588
الأعضاء
1,021
آخر عضو مسجل
wallas
أعلى