MediaWiki:Timeless.css: Difference between revisions
From SoS Ledger
Created page with "→All CSS here will be loaded for users of the Timeless skin: →Adjust width for the main left navigation container: #mw-site-navigation { width: 250px; →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: 250px; →Make sure this matches or is slightly larger: } /* Ensure the Discord widget if..." |
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: | 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: | 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: | 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; } }