MediaWiki:Timeless.css: Difference between revisions

From SoS Ledger
← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/* All CSS here will be loaded for users of the Timeless skin */
/* --- Adjusting Timeless Sidebar Width and Gap --- */
/* --- Adjusting Timeless Sidebar Width --- */


/* 1. Target the main content block, which usually controls column layout */
/* 1. Sidebar Width - Keep this value the same as whatever made your Discord widget fit */
#mw-content-container #mw-content-block {
    /* If it uses flexbox, adjust the flex-basis or width of its children */
    /* Timeless often uses grid or flexbox for its main layout.
      You might need to override a specific width or flex-basis for the sidebar. */
}
 
/* 2. Increase the width of the left navigation sidebar */
/* This is your #mw-site-navigation where the Discord widget is */
#mw-site-navigation {
#mw-site-navigation {
    /* The default width is likely around 200px. Increase it. */
     width: 250px; /* Adjust this to the exact value that correctly displays the widget */
     width: 250px; /* Try 250px first, then increase if needed */
     flex-basis: 250px; /* Keep this in sync with width if flexbox is used */
     flex-basis: 250px; /* If flexbox is used, this is often the key */
     min-width: 250px; /* Keep this in sync */
     min-width: 250px; /* Ensure it doesn't shrink below this */
}
}


/* 3. Adjust the main content wrapper's left margin/position to make space */
/* 2. Content Wrapper Margin - THIS IS THE KEY TO FIXING THE GAP */
/* This ensures the content doesn't overlap the widened sidebar */
#mw-content-wrapper {
#mw-content-wrapper {
     /* Default margin-left on #mw-content-wrapper is often 220px or 230px
     /* Current value is likely 270px (from our previous suggestion).
       when the sidebar is 200px. If you set sidebar to 250px, this needs to be
       You need to reduce this value.
       at least 270px (250px + some padding/gap). */
      If your sidebar is 250px wide:
     margin-left: 270px; /* Increase this by the same amount you increased the sidebar width, plus a gap */
       - 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 */
}
}


/* 4. Ensure the iframe itself scales within the new sidebar width */
/* 3. Ensure the iframe itself scales within the new sidebar width */
#p-discord-widget iframe {
#p-discord-widget iframe {
     width: 100% !important; /* Make the iframe take up all available width */
     width: 100% !important;
    height: 300px; /* Keep your desired height */
    /* height: 300px; - Keep your desired height, no change needed here. */
     box-sizing: border-box; /* Ensures padding/border are included in the 100% width */
     box-sizing: border-box;
}
}


/* 5. IMPORTANT: Timeless uses media queries for responsiveness.
/* 4. Responsive adjustments (important for Timeless) */
      Ensure your changes apply at the relevant screen sizes.
@media all and (min-width: 720px) { /* Adjust breakpoint if your site uses a different one */
      Check what min-width breakpoints are active in the Timeless default CSS. */
@media all and (min-width: 720px) { /* This is a common desktop breakpoint for Timeless */
     #mw-site-navigation {
     #mw-site-navigation {
         width: 250px;
         width: 250px; /* Keep in sync */
         flex-basis: 250px;
         flex-basis: 250px;
         min-width: 250px;
         min-width: 250px;
     }
     }
     #mw-content-wrapper {
     #mw-content-wrapper {
         margin-left: 270px;
         margin-left: 260px; /* Keep in sync with the value above */
     }
     }
}
}


/* If Timeless uses a CSS Grid for its main layout, you might need to override
/* You might also need to ensure no max-width is interfering with the iframe's display */
  'grid-template-columns' on #mw-content-block or its parent.
#p-discord-widget {
  Example (check browser inspector if you see grid rules): */
     max-width: none; /* Remove any potential max-width on the portlet itself */
/*
#mw-content-block {
     grid-template-columns: 250px auto; // Example: sidebar (250px) and content (auto)
}
}
*/

Revision as of 19:17, 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: 260px; /* 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=267"