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

شرح تغيير شكل صندوق الاقتباس للزين فورو

بسم الله الرحمن الرحيم صندوق الاقتباس هو تصميم متميز ومتكامل لعرض النصوص المقتبسة في المنتديات والمواقع الإلكترونية، حيث يجمع بين الأناقة والوظائف العملية...

Mc Nabulsy

Mc Nabulsy

عضو جديد
إنضم
22 ديسمبر 2024
المشاركات
12
مستوى التفاعل
8
النقاط
3
الإقامة
فلسطين
الموقع الالكتروني
بسم الله الرحمن الرحيم​

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

معاينة الكود​

173540477365041.gif

تركيب الكود​

توجه نحو لوحة الادارة - المظهر - القوالب - ابحث عن القالب التالي : extra.less واضف الكود التالي بداخله:
CSS: 
 .bbCodeBlock--quote {
            background: white;
            border-right: 4px solid #3498db;
            border-radius: 8px;
            padding: 20px;
            font-family: cairo;
            color: black;
            text-align: center;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            margin: 0 auto;
        }

        .bbCodeBlock--quote:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }
ومن ثم توجه نحو قالب PAGE_CONTAINER واضف هذا الكود اسفل وسم <head>.
كود: 
    <link rel="stylesheet" type="text/css" href="https://www.fontstatic.com/f=cairo" />
وللعلم هذا خاص بالخط يعني غير ملزم للكود اذا لم ترد ان تغير الخط المستعمل في منتداك، يمكنك عدم اضافة هذا الكود وحذف font-family من كود Css

ومن ثم توجه نحو قالب Thread_view وضع هذا الكود في بدايته او نهايته كما تريد:
كود: 
<script>
    function addQuoteSymbols() {
        const quoteBlocks = document.querySelectorAll('.bbCodeBlock--quote');
       
        quoteBlocks.forEach(block => {
            const topQuote = document.createElement('span');
            topQuote.classList.add('quote-symbol');
            topQuote.textContent = '❝';
            topQuote.style.top = '10px';
            topQuote.style.right = '10px';
           
            const bottomQuote = document.createElement('span');
            bottomQuote.classList.add('quote-symbol');
            bottomQuote.textContent = '❞';
            bottomQuote.style.bottom = '10px';
            bottomQuote.style.left = '10px';
           
            block.insertBefore(topQuote, block.firstChild);
            block.appendChild(bottomQuote);
        });
    }

    function applyFancyFont() {
        const quoteContents = document.querySelectorAll('.blockContent');
        quoteContents.forEach(content => {
            content.classList.add('fancy-font', 'fancy-quote');
            content.style.textShadow = '1px 1px 1px rgba(0,0,0,0.1)';
           
            const text = content.innerHTML;
            const enhancedText = text
                .replace(/^"([^"]*)"/, '<span style="color: #2980b9">"\$1"</span>')
                .replace(/- /, '<span style="color: #7f8c8d"> - </span>');
            content.innerHTML = enhancedText;
        });
    }

    document.addEventListener('DOMContentLoaded', () => {
        addQuoteSymbols();
        applyFancyFont();
    });

    const quoteBlock = document.querySelector('.bbCodeBlock--quote');
    quoteBlock.addEventListener('mouseenter', function() {
        this.style.transform = 'translateY(-2px)';
    });
    quoteBlock.addEventListener('mouseleave', function() {
        this.style.transform = 'translateY(0)';
    });
</script>

والكود الآن المفروض يعمل، انتهى الشرح. ان شاء الله يعجبكم
بالتوفيق للجميع
والسلام ختام
 
شرح اكثر من رائع اخوي @Mc Nabulsy ومفهوم وواضح

واشكرك على وقتك الثمين اللي قضيته لتقديم هذا الشرح

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