MediaWiki:Timeless.css: Difference between revisions
From SoS Ledger
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Timeless skin */ | /* All CSS here will be loaded for users of the Timeless skin */ | ||
/* | /* --- Adjusting Timeless Sidebar Width --- */ | ||
#mw- | |||
width | /* 1. Target the main content block, which usually controls column layout */ | ||
#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 | /* This is your #mw-site-navigation where the Discord widget is */ | ||
#mw-navigation { | #mw-site-navigation { | ||
width: | /* The default width is likely around 200px. Increase it. */ | ||
width: 250px; /* Try 250px first, then increase if needed */ | |||
flex-basis: 250px; /* If flexbox is used, this is often the key */ | |||
min-width: 250px; /* Ensure it doesn't shrink below this */ | |||
} | } | ||
/* | /* 3. Adjust the main content wrapper's left margin/position to make space */ | ||
# | /* This ensures the content doesn't overlap the widened sidebar */ | ||
#mw-content-wrapper { | |||
/* Default margin-left on #mw-content-wrapper is often 220px or 230px | |||
when the sidebar is 200px. If you set sidebar to 250px, this needs to be | |||
at least 270px (250px + some padding/gap). */ | |||
margin-left: 270px; /* Increase this by the same amount you increased the sidebar width, plus a gap */ | |||
} | } | ||
/* | /* 4. Ensure the iframe itself scales within the new sidebar width */ | ||
# | #p-discord-widget iframe { | ||
/* | width: 100% !important; /* Make the iframe take up all available width */ | ||
/* | height: 300px; /* Keep your desired height */ | ||
box-sizing: border-box; /* Ensures padding/border are included in the 100% width */ | |||
} | } | ||
/* | /* 5. IMPORTANT: Timeless uses media queries for responsiveness. | ||
@media all and ( min-width: 720px ) { /* | Ensure your changes apply at the relevant screen sizes. | ||
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: | width: 250px; | ||
flex-basis: 250px; | |||
min-width: 250px; | |||
} | } | ||
#mw-content- | #mw-content-wrapper { | ||
margin-left: 270px; | margin-left: 270px; | ||
} | } | ||
} | } | ||
/* If Timeless uses a CSS Grid for its main layout, you might need to override | |||
'grid-template-columns' on #mw-content-block or its parent. | |||
Example (check browser inspector if you see grid rules): */ | |||
/* | |||
#mw-content-block { | |||
grid-template-columns: 250px auto; // Example: sidebar (250px) and content (auto) | |||
} | |||
*/ | |||
Revision as of 19:15, 28 July 2025
/* All CSS here will be loaded for users of the Timeless skin */
/* --- Adjusting Timeless Sidebar Width --- */
/* 1. Target the main content block, which usually controls column layout */
#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 {
/* The default width is likely around 200px. Increase it. */
width: 250px; /* Try 250px first, then increase if needed */
flex-basis: 250px; /* If flexbox is used, this is often the key */
min-width: 250px; /* Ensure it doesn't shrink below this */
}
/* 3. Adjust the main content wrapper's left margin/position to make space */
/* This ensures the content doesn't overlap the widened sidebar */
#mw-content-wrapper {
/* Default margin-left on #mw-content-wrapper is often 220px or 230px
when the sidebar is 200px. If you set sidebar to 250px, this needs to be
at least 270px (250px + some padding/gap). */
margin-left: 270px; /* Increase this by the same amount you increased the sidebar width, plus a gap */
}
/* 4. Ensure the iframe itself scales within the new sidebar width */
#p-discord-widget iframe {
width: 100% !important; /* Make the iframe take up all available width */
height: 300px; /* Keep your desired height */
box-sizing: border-box; /* Ensures padding/border are included in the 100% width */
}
/* 5. IMPORTANT: Timeless uses media queries for responsiveness.
Ensure your changes apply at the relevant screen sizes.
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 {
width: 250px;
flex-basis: 250px;
min-width: 250px;
}
#mw-content-wrapper {
margin-left: 270px;
}
}
/* If Timeless uses a CSS Grid for its main layout, you might need to override
'grid-template-columns' on #mw-content-block or its parent.
Example (check browser inspector if you see grid rules): */
/*
#mw-content-block {
grid-template-columns: 250px auto; // Example: sidebar (250px) and content (auto)
}
*/
