MediaWiki:Common.css - Revision history

Admin at 20:12, 30 July 2026

2026-07-30T20:12:50Z

← Older revision		Revision as of 20:12, 30 July 2026
Line 1,170:		Line 1,170:
	}		}

	/* Pushes the visible page content down, revealing the background/logo		/* Pushes the visible page content down on the MAIN PAGE ONLY, revealing
	area above it. ~~Only target~~ the ~~OUTER container~~ -- ~~Vector 2022 uses~~		the background/logo area above it. MediaWiki adds a body class based
	~~CSS Grid internally,~~ so ~~applying~~ this ~~to both an inner and outer~~		on the page title -- "page-Main_Page" -- so this won't affect any
	~~element causes the margins~~ to ~~stack instead of overlap (this is~~		other page's layout. Adjust 800px to taste. */
	~~what was causing the extra scroll / misalignment)~~. */		body.page-Main_Page .mw-page-container {
	.mw-page-container {
	margin-top: 800px;		margin-top: 800px;
	}		}

Admin at 18:49, 30 July 2026

2026-07-30T18:49:09Z

← Older revision		Revision as of 18:49, 30 July 2026
Line 1,163:		Line 1,163:

	body {		body {
	background-image: url("https://factorytown2.com/~~images~~/d/~~de/Site_background~~.jpg");		background-image: url("https://factorytown2.com/wiki/Special:FilePath/Site-background.jpg");
	background-size: cover;		background-size: cover;
	background-position: top center;		background-position: top center;
Line 1,171:		Line 1,171:

	/* Pushes the visible page content down, revealing the background/logo		/* Pushes the visible page content down, revealing the background/logo
	area above it. ~~Adjust~~ the ~~height (140px here) to taste~~ -- this is		area above it. Only target the OUTER container -- Vector 2022 uses
	the ~~"recessed" gap you saw on the source site~~. */		CSS Grid internally, so applying this to both an inner and outer
	~~#content,~~		element causes the margins to stack instead of overlap (this is
			what was causing the extra scroll / misalignment). */
	.mw-page-container {		.mw-page-container {
	margin-top: 800px;		margin-top: 800px;
	}		}

	/* ~~Optional: place your~~ logo ~~centered in that new top gap.~~		/* Hide MediaWiki's default small corner logo -- covers both the
	~~Requires uploading a logo image~~ the ~~same way as the background~~,		modern Vector 2022 class and the older skin ID, in case your
	~~then swapping the URL below. Remove this block if you'd rather~~		theme falls back to either. */
	~~just use MediaWiki's standard sidebar logo ($wgLogos~~ in		#p-logo,
	~~LocalSettings.php) and only want the background banner above~~. */		.mw-logo {
	~~body::before {~~		display: none !important;
	~~content: "";~~
	~~display: block;~~
	~~position: absolute;~~
	~~top: 20px;~~
	~~left: 50%;~~
	~~transform: translateX(~~-~~50%);~~
	~~width: 160px;~~
	~~height: 100px;~~
	~~background-image: url("https://factorytown2.com/images/d/de/Site_background~~.~~jpg");~~
	~~background~~-~~size: contain;~~
	~~background-repeat: no-repeat;~~
	~~background-position: center;~~
	~~pointer-events~~: none;
	}		}

Admin at 18:43, 30 July 2026

2026-07-30T18:43:35Z

← Older revision		Revision as of 18:43, 30 July 2026
Line 1,175:		Line 1,175:
	#content,		#content,
	.mw-page-container {		.mw-page-container {
	margin-top: ~~140px~~;		margin-top: 800px;
	}		}

Admin at 18:36, 30 July 2026

2026-07-30T18:36:49Z

@@ Line 1,158: / Line 1,158: @@
      padding: 16px 20px;
      margin-bottom: 20px;
+}

Admin at 17:57, 30 July 2026

2026-07-30T17:57:09Z

Show changes

Admin: Created page with "/* =================================================================== Factory Town 2: Paradise Wiki — MediaWiki:Common.css Paste this entire file into: https://factorytown2.com/wiki/MediaWiki:Common.css =================================================================== / / ------------------------------------------------------------------- 1. Theme colors (edit these to taste — everything below references these variables, so changing a color he..."

2026-07-30T17:22:14Z

Created page with "=================================================================== Factory Town 2: Paradise Wiki — MediaWiki:Common.css Paste this entire file into: https://factorytown2.com/wiki/MediaWiki:Common.css ===================================================================: /* ------------------------------------------------------------------- 1. Theme colors (edit these to taste — everything below references these variables, so changing a color he..."

New page

/* ===================================================================
Factory Town 2: Paradise Wiki — MediaWiki:Common.css
Paste this entire file into: https://factorytown2.com/wiki/MediaWiki:Common.css
=================================================================== */

/* -------------------------------------------------------------------
1. Theme colors (edit these to taste — everything below references
these variables, so changing a color here updates it everywhere)
------------------------------------------------------------------- */
:root {
--ft2-accent: #2e7d32; /* primary accent (buttons, links, hover) */
--ft2-accent-dark: #1b5e20;
--ft2-card-bg: #ffffff;
--ft2-card-border: #dcdcdc;
--ft2-card-shadow: rgba(0, 0, 0, 0.08);
--ft2-text: #202122;
}

/* -------------------------------------------------------------------
2. "Game Navigation" icon grid on the Main Page
Targets MediaWiki's built-in <gallery> tag, which is the standard
way to build an image+caption grid like the source wiki's.
If your imported page instead uses a custom template/div wrapper,
see the note at the bottom of this file for how to adjust.
------------------------------------------------------------------- */

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin: 20px 0;
border: none !important; /* remove MediaWiki's default gallery border */
}

.gallery .gallerybox {
width: 130px !important;
text-align: center;
background: var(--ft2-card-bg);
border: 1px solid var(--ft2-card-border);
border-radius: 10px;
padding: 12px 8px;
box-shadow: 0 1px 3px var(--ft2-card-shadow);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.gallery .gallerybox:hover {
transform: translateY(-3px);
box-shadow: 0 6px 14px var(--ft2-card-shadow);
border-color: var(--ft2-accent);
}

.gallery .gallerybox .thumb {
background: transparent !important;
border: none !important;
display: flex;
justify-content: center;
align-items: center;
min-height: 64px;
}

.gallery .gallerybox img {
max-width: 56px;
max-height: 56px;
object-fit: contain;
}

.gallery .gallerytext {
font-weight: 600;
font-size: 0.95em;
margin-top: 8px;
color: var(--ft2-text);
}

.gallery .gallerytext a {
color: var(--ft2-text);
text-decoration: none;
}

.gallery .gallerybox:hover .gallerytext a {
color: var(--ft2-accent-dark);
}

/* -------------------------------------------------------------------
3. Sidebar section headings — bolder, colored, small caps look
------------------------------------------------------------------- */

.vector-menu-heading,
.mw-portlet-head {
color: var(--ft2-accent-dark) !important;
font-weight: 700 !important;
text-transform: uppercase;
font-size: 0.8em;
letter-spacing: 0.03em;
}

/* -------------------------------------------------------------------
4. General link color to match the accent theme
------------------------------------------------------------------- */

a {
color: var(--ft2-accent-dark);
}

a:visited {
color: var(--ft2-accent);
}

/* -------------------------------------------------------------------
5. Main page welcome box — light card treatment, if you wrap your
welcome text in <div class="ft2-welcome">...</div> on the page
------------------------------------------------------------------- */

.ft2-welcome {
background: #f6f8f6;
border: 1px solid var(--ft2-card-border);
border-radius: 10px;
padding: 16px 20px;
margin-bottom: 20px;
}

/* =====================================================================
NOTE: If the Game Navigation grid doesn't pick up this styling,
the imported page likely uses different markup than a <gallery> tag.
To check:
1. View the Main Page in your browser
2. Right-click one of the icon boxes -> "Inspect" (Chrome/Firefox)
3. Look at the class name on the containing <div> or <li>
4. Send me that class name and I'll adjust the selectors above
===================================================================== */