MediaWiki:Timeless.css: Difference between revisions

From SoS Ledger
 
No edit summary
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* All CSS here will be loaded for users of the Timeless skin */
/* --- Adjusting Timeless Sidebar Width and Gap --- */
/* Adjust width for the main left navigation container */
 
/* 1. Sidebar Width - Keep this value the same as whatever made your Discord widget fit */
#mw-site-navigation {
#mw-site-navigation {
     width: 250px; /* Increase this value (e.g., from default 200px) */
     width: 250px; /* Adjust this to the exact value that correctly displays the widget */
    flex-basis: 250px; /* Keep this in sync with width if flexbox is used */
    min-width: 250px; /* Keep this in sync */
}
}


/* Adjust width for the overall navigation wrapper if necessary */
/* 2. Content Wrapper Margin - THIS IS THE KEY TO FIXING THE GAP */
/* This might be needed if #mw-site-navigation alone isn't enough */
#mw-content-wrapper {
#mw-navigation {
    /* Current value is likely 270px (from our previous suggestion).
    width: 250px; /* Make sure this matches or is slightly larger */
      You need to reduce this value.
      If your sidebar is 250px wide:
      - Try 255px (if no padding/gap needed)
      - Try 260px (if small gap needed)
      - Try 265px (if slightly more gap needed)
      The exact value depends on Timeless's internal padding/margins.
    */
    margin-left: 260px; /* <<< START HERE, THEN TWEAK WITH F12 */
}
}


/* Ensure the Discord widget iframe itself can take up the new space */
/* 3. Ensure the iframe itself scales within the new sidebar width */
#p-discord-widget .mw-portlet-body iframe {
#p-discord-widget iframe {
     width: 100% !important; /* Make iframe fill its container */
     width: 100% !important;
    max-width: none !important; /* Prevent it from being constrained */
    /* height: 300px; - Keep your desired height, no change needed here. */
     box-sizing: border-box; /* Include padding/border in width */
     box-sizing: border-box;
}
}


/* You might also need to adjust the margin of the content area to prevent overlap */
/* 4. Responsive adjustments (important for Timeless) */
#mw-content-container #mw-content-block {
@media all and (min-width: 720px) { /* Adjust breakpoint if your site uses a different one */
    /* 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 {
     #mw-site-navigation {
         width: 250px; /* Ensure width is applied at larger screen sizes */
         width: 250px; /* Keep in sync */
        flex-basis: 250px;
        min-width: 250px;
     }
     }
     #mw-content-container #mw-content-block {
     #mw-content-wrapper {
         margin-left: 270px;
         margin-left: 0.1em; /* Keep in sync with the value above */
     }
     }
}
/* You might also need to ensure no max-width is interfering with the iframe's display */
#p-discord-widget {
    max-width: none; /* Remove any potential max-width on the portlet itself */
}
}

Latest revision as of 19:19, 28 July 2025

/* --- Adjusting Timeless Sidebar Width and Gap --- */

/* 1. Sidebar Width - Keep this value the same as whatever made your Discord widget fit */
#mw-site-navigation {
    width: 250px; /* Adjust this to the exact value that correctly displays the widget */
    flex-basis: 250px; /* Keep this in sync with width if flexbox is used */
    min-width: 250px; /* Keep this in sync */
}

/* 2. Content Wrapper Margin - THIS IS THE KEY TO FIXING THE GAP */
#mw-content-wrapper {
    /* Current value is likely 270px (from our previous suggestion).
       You need to reduce this value.
       If your sidebar is 250px wide:
       - Try 255px (if no padding/gap needed)
       - Try 260px (if small gap needed)
       - Try 265px (if slightly more gap needed)
       The exact value depends on Timeless's internal padding/margins.
    */
    margin-left: 260px; /* <<< START HERE, THEN TWEAK WITH F12 */
}

/* 3. Ensure the iframe itself scales within the new sidebar width */
#p-discord-widget iframe {
    width: 100% !important;
    /* height: 300px; - Keep your desired height, no change needed here. */
    box-sizing: border-box;
}

/* 4. Responsive adjustments (important for Timeless) */
@media all and (min-width: 720px) { /* Adjust breakpoint if your site uses a different one */
    #mw-site-navigation {
        width: 250px; /* Keep in sync */
        flex-basis: 250px;
        min-width: 250px;
    }
    #mw-content-wrapper {
        margin-left: 0.1em; /* Keep in sync with the value above */
    }
}

/* You might also need to ensure no max-width is interfering with the iframe's display */
#p-discord-widget {
    max-width: none; /* Remove any potential max-width on the portlet itself */
}
Retrieved from "https://sosledger.com/index.php?title=MediaWiki:Timeless.css&oldid=272"