User:TheMcr/monobook.js: Difference between revisions

Boobpedia - Encyclopedia of big boobs
Jump to navigationJump to search
No edit summary
No edit summary
Line 1: Line 1:
// Create a new <style> element
// Add a style element to the page for the hover effect
var customStyle = document.createElement("style");
document.addEventListener('DOMContentLoaded', function () {
customStyle.innerHTML = `
    var style = document.createElement('style');
    /* Change background color */
    style.innerHTML = `
    body {
         /* CSS for image hover effect */
         background-color: #f4f4f4 !important;
         img:hover {
    }
            transform: scale(1.1); /* Grows the image to 110% of its original size */
 
            transition: transform 0.3s ease; /* Smooth transition */
    /* Customize the sidebar */
         }
    #mw-panel {
     `;
         background: #333 !important;
     document.head.appendChild(style);
        color: white !important;
});
    }
 
    #mw-panel a {
        color: #ffcc00 !important;
    }
 
    /* Change the font of the content */
    #mw-content-text {
        font-family: Arial, sans-serif !important;
        font-size: 16px !important;
    }
 
    /* Hide the "edit" button */
    .mw-editsection {
        display: none !important;
    }
 
    /* Improve tables */
    table.wikitable {
        border-collapse: collapse !important;
        border: 2px solid #444 !important;
         background-color: #fff !important;
    }
 
     table.wikitable th {
        background-color: #333 !important;
        color: white !important;
        padding: 8px !important;
     }
 
    table.wikitable td {
        padding: 6px !important;
    }
 
    /* Highlight links on hover */
    a:hover {
        color: red !important;
        text-decoration: underline !important;
    }
`;
 
// Append the <style> element to the document head
document.head.appendChild(customStyle);
alert("Custom CSS applied via JavaScript!");

Revision as of 22:37, 1 April 2025

// Add a style element to the page for the hover effect
document.addEventListener('DOMContentLoaded', function () {
    var style = document.createElement('style');
    style.innerHTML = `
        /* CSS for image hover effect */
        img:hover {
            transform: scale(1.1); /* Grows the image to 110% of its original size */
            transition: transform 0.3s ease; /* Smooth transition */
        }
    `;
    document.head.appendChild(style);
});