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

ZeinabBahaa · 2 فبراير 2021

السلام عليكم ورحمة الله وبركاته
أخوتي الكرام تحية طيبة
أحتاج فوتر مثل هذا

وشكرا مقدما

MesterPerfect · 3 فبراير 2021

وعليكم السَلام ورحمة الله وبركاته
تفضلي أختي هذه محاولة بسيطة مني
وبإنتظار الأخ الحبيب @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
    }
}

تحياتي

ZeinabBahaa · 3 فبراير 2021

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

منتديات معنا

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

maanaa.net

shqawe · 4 فبراير 2021

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

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

MesterPerfect · 4 فبراير 2021

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

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

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

shqawe · 4 فبراير 2021

اهاا انا والله ماجربته لكن راح اجربه اﻻن واعمل عليه تعديل بسيط وان شاء الله يعجب الست زينب

shqawe · 4 فبراير 2021

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

اوﻻً قومي بانشاء قالب جديد على اﻻستايل الذي تريدين وسميه مثلا ً 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;
        }
    }
}

واتمنى ان يكون هذا طلبك وتقبلي احترامي وتقديري
اخوك
شقاوي

ZeinabBahaa · 4 فبراير 2021

السلام عليكم أخوتي الكرام
بارك الله في كما وفي مجهودكما
أخي @shqawe
بوركت هجرب الآن واخبركم بالنتيجة

ZeinabBahaa · 4 فبراير 2021

أخي @shqawe جزاك الله خيرا
تم تجربة الفوتر ولكن لا يظهر بكامله لدي

\
وكما ترا, هناك مسافة بين الصورة والقائمة.

shqawe · 5 فبراير 2021

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

كود:

<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

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

البحث

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

ZeinabBahaa

:: الأعضاء ::

MesterPerfect

:: مراقب زين العربية ::

ZeinabBahaa

:: الأعضاء ::

منتديات معنا

shqawe

ربي أشرح لي صدري

MesterPerfect

:: مراقب زين العربية ::

shqawe

ربي أشرح لي صدري

shqawe

ربي أشرح لي صدري

ZeinabBahaa

:: الأعضاء ::

ZeinabBahaa

:: الأعضاء ::

shqawe

ربي أشرح لي صدري

المواضيع المُشابهة

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

مشاركة هذه الصفحة