المطلوب توسيط أزرار الصفحة الرئيسية فى البار الخاص بتصميم المنتدى

الكود:

a.mainmenu {
    padding: 4px !important;
}

a.mainmenu img {
    display: none !important;
}

كونان2000 كتب:وعليكم السلام ورحمة الله وبركاته
اهلا اخي  @Mahmoud Gilany

جرب التالي بالcss

الكود:

a.mainmenu {
    padding: 4px !important;
}

a.mainmenu img {
    display: none !important;
}

كونان2000 كتب:اهلا
التولبار لا يعمل على الازرار
هو كان يعمل على الايقونات المخفيه بالقرب من الازرار
والكود الي عطيته لك حذف الايقونات لجعل الازرار بالوسط  

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

Spoiler:

الكود:

$(document).ready(function() {
    // إضافة عنصر التلميح داخل الصفحة
    $('body').append('<div class="tooltip" style="display: none; position: absolute; background-color: yellow; color: #000; padding: 5px; border-radius: 5px; font-size: 12px; z-index: 1000; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);"> </div>');

    // عند مرور الماوس على العناصر التي تحمل الكلاس .mainmenu
    $('a.mainmenu').hover(function(e) {
        var tooltipText = $(this).text();  // النص داخل الرابط
        
        // إظهار التلميح
        var $tooltip = $('.tooltip');
        $tooltip.text(tooltipText)
            .stop(true, true)  // إيقاف أي تأثير سابق
            .fadeIn(300)      // تأثير ظهور التلميح
            .css({
                // وضع التلميح في المنتصف فوق الرابط
                top: $(this).offset().top - $tooltip.outerHeight() - 5,  // 5px فوق الرابط
                left: $(this).offset().left + ($(this).outerWidth() - $tooltip.outerWidth()) / 2, // توسيط التلميح فوق الرابط
            });
        
        // إضافة السهم (اختياري) على التلميح
        $tooltip.append('<div class="tooltip-arrow" style="position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid yellow;"></div>');
    }, function() {
        // إخفاء التلميح عند مغادرة الماوس
        $('.tooltip').stop(true, true).fadeOut(300, function() {
            // إزالة السهم بعد إخفاء التلميح
            $('.tooltip-arrow').remove();
        });
    });
});

كونان2000 كتب:اهلا اخي محمود
انا دخلت منتداك وركبته فيه

باستخدام الكود التالي المتوافق مع ازرار منتداك

الكود:

$(document).ready(function() {
    // إضافة عنصر التلميح داخل الصفحة
    $('body').append('<div class="tooltip" style="display: none; position: absolute; background-color: yellow; color: #000; padding: 5px; border-radius: 5px; font-size: 12px; z-index: 1000; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);"> </div>');

    // عند مرور الماوس على العناصر التي تحمل الكلاس .mainmenu
    $('a.mainmenu').hover(function(e) {
        var tooltipText = $(this).text();  // النص داخل الرابط
        
        // إظهار التلميح
        var $tooltip = $('.tooltip');
        $tooltip.text(tooltipText)
            .stop(true, true)  // إيقاف أي تأثير سابق
            .fadeIn(300)      // تأثير ظهور التلميح
            .css({
                // وضع التلميح في المنتصف فوق الرابط
                top: $(this).offset().top - $tooltip.outerHeight() - 5,  // 5px فوق الرابط
                left: $(this).offset().left + ($(this).outerWidth() - $tooltip.outerWidth()) / 2, // توسيط التلميح فوق الرابط
            });
        
        // إضافة السهم (اختياري) على التلميح
        $tooltip.append('<div class="tooltip-arrow" style="position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid yellow;"></div>');
    }, function() {
        // إخفاء التلميح عند مغادرة الماوس
        $('.tooltip').stop(true, true).fadeOut(300, function() {
            // إزالة السهم بعد إخفاء التلميح
            $('.tooltip-arrow').remove();
        });
    });
});

Mahmoud Gilany كتب:

سلمت يمينك أخى الحبيب