/* Theme Name: PPLS (Weebly port) Theme URI: https://www.penangproperties.com/ Description: Faithful port of the original Weebly "Edison" theme used by penangproperties.com, so the WordPress rebuild launches looking identical to the site it replaces. Wraps the original main_style.css unchanged and reproduces the header/footer markup its selectors expect. Fonts are self-hosted — the originals loaded from cdn2.editmysite.com over plain http. Version: 0.1.7 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 8.0 License: GPL-2.0-or-later Text Domain: ppls */ /* Intentionally almost empty: the real styling is assets/main_style.css, enqueued from functions.php and kept byte-identical to the Weebly original so it can be re-synced. Put overrides below, never in that file. */ /* WordPress core markup that Weebly's stylesheet knows nothing about. */ .wp-caption { max-width: 100%; } .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .ppls-admin-note { background: #fffbe6; border-left: 4px solid #f0b429; margin: 0 0 1em; padding: 12px 16px; } /* --- Buttons ------------------------------------------------------------- main_style.css:207 gives .wsite-button padding, box-sizing and line-height but never a display mode, so an falls back to `display: inline` — where vertical padding paints without reserving line space. The blue button therefore overlapped whatever followed it by 10-13px: "Contact Us" clipped the "Enquiry click" line under it, "Back to top" clipped the disclaimer, on all 526 pages. The rule was never in the export. The archived pages pulled it from cdn11.editmysite.com/css/sites.css, Weebly's base stylesheet, which the scraper did not capture and which died with the account — the same live-CDN dependency that took the fancybox lightbox with it. The only `display` main_style.css sets for this class is line 330, scoped to the ecommerce checkout wrapper, which never matches here. Lives here rather than in main_style.css, which stays byte-identical. */ .wsite-button { display: inline-block; vertical-align: middle; } /* --- Theme-generated listings (search, archives, 404) -------------------- header.php opens .content-wrap but no .container, and every template emits #wsite-content straight into it. That is right for imported pages, which bring their own Weebly wrappers and inline column widths — but index.php builds its own markup, so its text ran flush to both viewport edges. Reuses main_style.css's own container metrics (max-width 1100px, 15px gutters) rather than inventing a value, so results sit on the same measure as the rest of the site instead of stretching the full window. */ .ppls-index { max-width: 1100px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; } /* --- WordPress admin bar ------------------------------------------------- main_style.css pins .edison-header with `position: fixed; top: 0` at every width (body.header-sticky, which header.php always sets). Fixed elements are positioned against the viewport, so they ignore the `html { margin-top: 32px !important }` bump core injects to make room for the admin bar. The header therefore stays at viewport top 0 and the bar paints over it — z-index 99999 against the header's 15 — hiding its top 32px and leaving only the lower strip of #2aa5eb showing. That is the two-tone topbar: admin-bar grey above, clipped header blue below. .mobile-nav is fixed at top:50px so it sits flush under the header, so it has to shift by exactly the same amount or it detaches from it. All of this is scoped to body.admin-bar, so logged-out visitors render the original theme untouched. */ body.admin-bar .edison-header { top: 32px; } body.admin-bar .mobile-nav { top: 82px; /* 32 bar + 50 header */ max-height: calc(100% - 82px); } @media screen and (max-width: 782px) { /* Core grows the bar to 46px here and bumps html to match. */ body.admin-bar .edison-header { top: 46px; } body.admin-bar .mobile-nav { top: 96px; /* 46 bar + 50 header */ max-height: calc(100% - 96px); } } @media screen and (max-width: 600px) { /* Core drops #wpadminbar to position:absolute below 600px so it scrolls away with the page. That fights a sticky header both ways: anchor the header at 46px and a 46px gap opens once the bar scrolls off, anchor it at 0 and the bar is covered for good — unreachable on a phone. Holding the bar fixed keeps the 46px offset above correct at every width. Specificity (1,1,1) beats core's (1,0,0), so load order does not matter. */ body.admin-bar #wpadminbar { position: fixed; } } /* --- Password-protected pages (Blocker 4) -------------------------------- The five staff pages are gated with core's native per-page password, so the_content() returns get_the_password_form() and page.php renders it bare inside #wsite-content. Weebly's stylesheet has no rules for any of it: the result is `Password: [___] [Enter]` on an unstyled white band between the themed header and footer, which reads as a broken page rather than a gate. The people who meet it are staff — the group least likely to report that as a styling problem rather than "the site is down". Two specific gaps, both checkable in main_style.css: - Its input reset (line 3) covers text, email and textarea but NOT password, so the field gets no appearance reset, and the :focus border on line 4 never matches it either. - .wsite-button (line 207) styles elements. The form's submit is an , so it inherits none of that styling. Container metrics reuse main_style.css's own (max-width 1100px, 15px gutters) — the same values .ppls-index borrows above — rather than inventing a measure. The hover state reuses .wsite-button-highlight's declared values (lines 221-222) instead of inventing a darker blue. CSS only, deliberately. The markup comes from core, and filtering it via the_password_form would add a moving part to five pages whose whole job is to be boring. The intro paragraph already picks up site typography, because site-styles.css targets `#wsite-content p` — only the controls are adrift, since form controls do not inherit font-family. */ .post-password-form { max-width: 1100px; margin: 0 auto; padding: 48px 15px 64px; box-sizing: border-box; } /* Core nests the password input INSIDE the