@House Rules 1 — Copy

Custom CSS/JS 

House Rules

This page is intended as a living record of how we are using CSS/JS customisations on the Macanese Heritage public site (WordPress/Elementor), so that future administrators, designers and developers can see what exists and why.

The main goals are:

  • Avoid duplicated or conflicting snippets (same rule in multiple places).

  • Keep a single source of truth about where each piece of CSS/JS lives (HFCM, theme, Elementor, etc.).

  • Record the intent behind each snippet, so changes later are safe and understandable.

1. Where CSS/JS lives

For the Macanese Heritage public site, we use the following places for custom code:

  • HFCM (Header Footer Code Manager) – This is our preferred home for all site-wide custom CSS and JS. We use HTML-type snippets with a <style> wrapper for CSS (not the HFCM “CSS” type, which can render as text in the snippet editor).

  • Elementor – For layout and content, but we avoid putting important or reusable CSS/JS inside Elementor widgets or page-level “Custom CSS” where possible.

  • Theme / child theme – We currently do not rely on theme files for custom CSS/JS. If this changes in future, it must be documented here, including file names and what they do.

In general, new CSS/JS for the public site should go into a clearly named HFCM snippet, not into Elementor widgets, pages, or theme files.

2. General conventions

  • Naming of snippets (HFCM) – Each snippet must have a descriptive title such as “Language Toggle — Runtime Controller (Footer)” or “MH Typography — Base Text & Links” so future admins can see what it does at a glance.

  • CSS organisation – Prefer a small number of well-structured snippets (e.g., Typography, Layout helpers, Language toggle) over many small fragments. Avoid duplicating the same rule in multiple snippets.

  • Version control in comments – When editing an existing snippet, add a brief comment at the top noting the date and nature of the change (e.g., /* 2025-11-01: updated link styles */).

Important: For the public site, all new CSS should go into HFCM HTML-type snippets inside a <style> block (for example, <style>…</style>)

GedSite (Restricted Static Site) – Fixed Columns

Scope: Layout rules for the restricted GedSite builds (English and Portuguese). This does not apply to the public WordPress site.

Purpose

Provide a simple, reusable two-column layout that:

  • Shows two equal-width columns on wider screens.
  • Stacks to a single column on smaller screens.
  • Allows a “bottom row” inside each column (links, small text, icons, etc.) that stays anchored at the bottom of the column.

Class structure (restricted GedSite)

Role Class Description
Grid wrapper .equal-pairs Creates a responsive grid (two columns on desktop, stacking on smaller screens).
Column item .equal-cell Each individual column; vertical flex container so elements can be pushed to the bottom.
Bottom row helper .bottomrow Flexible row anchored at the bottom of the column; can hold links, short text, or icons.

GedSite User Style item

Create a GedSite User Styles item titled “Equal pairs layout (restricted)” with these selectors and parameters:

  • Selector 1
    .equal-pairs

    Parameters 1
    display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:16px; align-items:stretch;

  • Selector 2
    .equal-cell

    Parameters 2
    display:flex; flex-direction:column; box-sizing:border-box; padding:1rem; border:1px solid maroon;

  • Selector 3
    .bottomrow

    Parameters 3
    margin-top:auto; display:flex; flex-wrap:wrap; gap:.5em; justify-content:center; align-items:center;

Example usage (restricted GedSite)

<div class="equal-pairs">
  <div class="equal-cell">
    <h3>Family Trees</h3>
    <p>Explore Macanese lineages preserved from the 16th century to today.</p>

    <div class="bottomrow">
      <a href="../up/si1.htm">Surnames</a>
      <a href="../up/uiindexgiven.htm">Given names</a>
    </div>
  </div>

  <div class="equal-cell">
    <img src="../ui/family-chart.jpg" alt="Family chart" width="600" height="400">
  </div>
</div>

Notes

  • No !important flags are used in these layout rules, to avoid conflicts with other CSS.
  • This layout is specific to the restricted GedSite builds and uses .equal-pairs / .equal-cell naming to keep it clearly distinct from public-site classes.
  • Content inside .bottomrow can be plain links, short explanatory text, icons, or similar small elements.
1