MediaWiki:Timeless.css - Revision history

Sava at 19:19, 28 July 2025

2025-07-28T19:19:14Z

← Older revision		Revision as of 19:19, 28 July 2025
Line 36:		Line 36:
	}		}
	#mw-content-wrapper {		#mw-content-wrapper {
	margin-left: 0.~~5em~~; /* Keep in sync with the value above */		margin-left: 0.1em; /* Keep in sync with the value above */
	}		}
	}		}

Sava at 19:18, 28 July 2025

2025-07-28T19:18:59Z

← Older revision		Revision as of 19:18, 28 July 2025
Line 36:		Line 36:
	}		}
	#mw-content-wrapper {		#mw-content-wrapper {
	margin-left: ~~1em~~; /* Keep in sync with the value above */		margin-left: 0.5em; /* Keep in sync with the value above */
	}		}
	}		}

Sava at 19:18, 28 July 2025

2025-07-28T19:18:37Z

← Older revision		Revision as of 19:18, 28 July 2025
Line 36:		Line 36:
	}		}
	#mw-content-wrapper {		#mw-content-wrapper {
	margin-left: 1%; /* Keep in sync with the value above */		margin-left: 1em; /* Keep in sync with the value above */
	}		}
	}		}

Sava at 19:18, 28 July 2025

2025-07-28T19:18:17Z

← Older revision		Revision as of 19:18, 28 July 2025
Line 36:		Line 36:
	}		}
	#mw-content-wrapper {		#mw-content-wrapper {
	margin-left: ~~210px~~; /* Keep in sync with the value above */		margin-left: 1%; /* Keep in sync with the value above */
	}		}
	}		}

Sava at 19:17, 28 July 2025

2025-07-28T19:17:53Z

← Older revision		Revision as of 19:17, 28 July 2025
Line 36:		Line 36:
	}		}
	#mw-content-wrapper {		#mw-content-wrapper {
	margin-left: ~~260px~~; /* Keep in sync with the value above */		margin-left: 210px; /* Keep in sync with the value above */
	}		}
	}		}

Sava at 19:17, 28 July 2025

2025-07-28T19:17:20Z

← Older revision		Revision as of 19:17, 28 July 2025
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)~~
	}		}
	*/

Sava at 19:15, 28 July 2025

2025-07-28T19:15:03Z

← Older revision		Revision as of 19:15, 28 July 2025
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 */
	/* ~~Adjust width for~~ the main ~~left navigation container~~ */		/* --- Adjusting Timeless Sidebar Width --- */
	#mw-~~site~~-~~navigation~~ {
	width~~: 300px;~~ /* ~~Increase this value (e~~.g.~~, from default 200px)~~ */		/* 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. */
	}		}

	/* ~~Adjust~~ width ~~for~~ the ~~overall~~ navigation ~~wrapper if necessary~~ */		/* 2. Increase the width of the left navigation sidebar */
	/* This ~~might be needed if~~ #mw-site-navigation ~~alone isn't enough~~ */		/* This is your #mw-site-navigation where the Discord widget is */
	#mw-navigation {		#mw-site-navigation {
	width: ~~300px~~; /* ~~Make sure~~ this ~~matches or~~ is ~~slightly larger~~ */		/* 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 */
	}		}

	/* ~~Ensure~~ the ~~Discord widget iframe itself can take up~~ the ~~new space~~ */		/* 3. Adjust the main content wrapper's left margin/position to make space */
	#~~p-discord-widget .~~mw-~~portlet~~-~~body iframe~~ {		/* This ensures the content doesn't overlap the widened sidebar */
	~~width: 100% !important;~~ /* ~~Make iframe fill its container */~~		#mw-content-wrapper {
	~~max-width: none !important;~~ /* Prevent it from being constrained */		/* Default margin-left on #mw-content-wrapper is often 220px or 230px
	~~box~~-~~sizing~~: ~~border-box~~; /* ~~Include padding/border in~~ width */		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 */
	}		}

	/* ~~You might also need to adjust~~ the ~~margin of~~ the ~~content area to prevent overlap~~ */		/* 4. Ensure the iframe itself scales within the new sidebar width */
	#~~mw-content-container #mw~~-~~content~~-~~block~~ {		#p-discord-widget iframe {
	/* ~~Default margin-left is often around 220px-230px depending on~~ the ~~Timeless version/config~~ */		width: 100% !important; /* Make the iframe take up all available width */
	/* If your ~~sidebar is 250px, add a bit more for padding/gap, e.g., 270px~~ */		height: 300px; /* Keep your desired height */
	~~margin~~-~~left~~: ~~270px~~; /* ~~Adjust this value~~ */		box-sizing: border-box; /* Ensures padding/border are included in the 100% width */
	}		}

	/* ~~Also check~~ for ~~specific rules for small screens if~~ the ~~above doesn't work perfectly everywhere~~ */		/* 5. IMPORTANT: Timeless uses media queries for responsiveness.
	@media all and ( min-width: 720px ) { /* ~~Example~~ breakpoint */		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: ~~300px~~; ~~/* Ensure~~ width ~~is applied at larger screen sizes */~~		width: 250px;
			flex-basis: 250px;
			min-width: 250px;
	}		}
	#mw-content-~~container #mw-content-block~~ {		#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)
			}
			*/

Sava at 19:12, 28 July 2025

2025-07-28T19:12:18Z

← Older revision		Revision as of 19:12, 28 July 2025
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 {

Sava: 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..."

2025-07-28T19:11:47Z

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..."

New page

/* 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 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: 250px; /* Ensure width is applied at larger screen sizes */
}
#mw-content-container #mw-content-block {
margin-left: 270px;
}
}