MediaWiki:Timeless.css: Difference between revisions

From SoS Ledger
 
No edit summary
Line 2: Line 2:
/* Adjust width for the main left navigation container */
/* Adjust width for the main left navigation container */
#mw-site-navigation {
#mw-site-navigation {
     width: 250px; /* Increase this value (e.g., from default 200px) */
     width: 300px; /* Increase this value (e.g., from default 200px) */
}
}


Line 8: Line 8:
/* This might be needed if #mw-site-navigation alone isn't enough */
/* This might be needed if #mw-site-navigation alone isn't enough */
#mw-navigation {
#mw-navigation {
     width: 250px; /* Make sure this matches or is slightly larger */
     width: 300px; /* Make sure this matches or is slightly larger */
}
}


Line 28: Line 28:
@media all and ( min-width: 720px ) { /* Example breakpoint */
@media all and ( min-width: 720px ) { /* Example breakpoint */
     #mw-site-navigation {
     #mw-site-navigation {
         width: 250px; /* Ensure width is applied at larger screen sizes */
         width: 300px; /* Ensure width is applied at larger screen sizes */
     }
     }
     #mw-content-container #mw-content-block {
     #mw-content-container #mw-content-block {

Revision as of 19:12, 28 July 2025

/* All CSS here will be loaded for users of the Timeless skin */
/* Adjust width for the main left navigation container */
#mw-site-navigation {
    width: 300px; /* Increase this value (e.g., from default 200px) */
}

/* Adjust width for the overall navigation wrapper if necessary */
/* This might be needed if #mw-site-navigation alone isn't enough */
#mw-navigation {
    width: 300px; /* Make sure this matches or is slightly larger */
}

/* Ensure the Discord widget iframe itself can take up the new space */
#p-discord-widget .mw-portlet-body iframe {
    width: 100% !important; /* Make iframe fill its container */
    max-width: none !important; /* Prevent it from being constrained */
    box-sizing: border-box; /* Include padding/border in width */
}

/* You might also need to adjust the margin of the content area to prevent overlap */
#mw-content-container #mw-content-block {
    /* Default margin-left is often around 220px-230px depending on the Timeless version/config */
    /* If your sidebar is 250px, add a bit more for padding/gap, e.g., 270px */
    margin-left: 270px; /* Adjust this value */
}

/* Also check for specific rules for small screens if the above doesn't work perfectly everywhere */
@media all and ( min-width: 720px ) { /* Example breakpoint */
    #mw-site-navigation {
        width: 300px; /* Ensure width is applied at larger screen sizes */
    }
    #mw-content-container #mw-content-block {
        margin-left: 270px;
    }
}