|
|
|
@@ -228,6 +228,9 @@ Recurring bugs and non-obvious behaviours discovered across sessions. **Read thi
|
|
|
|
|
- `overflow: visible !important` on `.wp-block-navigation__container` is essential for dropdowns inside block theme navigation.
|
|
|
|
|
- **WooCommerce `shop_table` borders conflict with Bootstrap `.table`** -- reset with `.woocommerce table.shop_table { border: 0 }` and cell `border-left/right: 0`.
|
|
|
|
|
- **WooCommerce gallery JS requires modifier classes** -- `--with-images`, `--without-images`, `--columns-N` on `.woocommerce-product-gallery` + `style="opacity: 0"` for fade-in. Without these, zoom and photoswipe won't initialize.
|
|
|
|
|
- **WooCommerce dark mode select backgrounds** -- `woocommerce.css` sets `select { background-color: var(--wc-form-color-background, #fff) }`. The custom property is never defined for dark mode, so it falls back to `#fff`. Override with `[data-bs-theme="dark"] .woocommerce select`.
|
|
|
|
|
- **Select2/SelectWoo dark mode** -- `select2.css` hardcodes `#fff` on selection containers and dropdowns. Needs overrides for `.select2-selection`, `.select2-dropdown`, `.select2-search__field`, and highlighted options.
|
|
|
|
|
- **WooCommerce notice CSS specificity** -- Uses `border-top: 3px solid`, `background-color: #f6f5f8`, and icon font `::before` at specificity `0,1,0`. Must use `.woocommerce .woocommerce-*` (specificity `0,2,0`) and explicitly reset `border-top` to override.
|
|
|
|
|
- **WooCommerce float layout fights Bootstrap grid** -- `div.product div.images/summary` have `float:left/right; width:48%` in `woocommerce-layout.css`. Override with `float: none; width: 100%`.
|
|
|
|
|
- **Bootstrap `g-*` gutters add negative top margin** -- `g-4` sets both `--bs-gutter-x` and `--bs-gutter-y`; the `.row` gets `margin-top: calc(-1 * var(--bs-gutter-y))` pulling it upward. Use `gx-*` for horizontal-only gutters when vertical gap isn't desired.
|
|
|
|
|
|
|
|
|
@@ -321,7 +324,7 @@ The child theme inherits from `wp-bootstrap` via WordPress `Template: wp-bootstr
|
|
|
|
|
|
|
|
|
|
## Version History
|
|
|
|
|
|
|
|
|
|
Current version: **v0.1.0**
|
|
|
|
|
Current version: **v0.1.1**
|
|
|
|
|
|
|
|
|
|
## Session History
|
|
|
|
|
|
|
|
|
@@ -387,3 +390,19 @@ Current version: **v0.1.0**
|
|
|
|
|
**Files changed (1):**
|
|
|
|
|
|
|
|
|
|
- `CHANGELOG.md` — Added `[0.1.0]` section documenting all features and fixes between v0.0.1 and v0.1.0
|
|
|
|
|
|
|
|
|
|
### 2026-02-28 — v0.1.1 Dark Mode & Notice CSS Bugfixes
|
|
|
|
|
|
|
|
|
|
**Scope:** Fixed dark mode select backgrounds, WooCommerce notice styling conflicts, and product card image overflow.
|
|
|
|
|
|
|
|
|
|
**Files changed (2):**
|
|
|
|
|
|
|
|
|
|
- `assets/css/wc-bootstrap.css` — Dark mode overrides for native `<select>` and Select2/SelectWoo widgets; bumped notice selectors to `.woocommerce .woocommerce-*` (specificity `0,2,0`) to beat `woocommerce.css`; suppressed WooCommerce icon font `::before` on notices; added checkout form focus color for dark mode
|
|
|
|
|
- `templates/content-product.html.twig` — Added `overflow-hidden` to product card `<article>` for border-radius clipping
|
|
|
|
|
|
|
|
|
|
**Key learnings:**
|
|
|
|
|
|
|
|
|
|
- WooCommerce CSS sets `select { background-color: var(--wc-form-color-background, #fff) }` — the custom property is never defined for dark mode, so it falls back to white. Override with `[data-bs-theme="dark"] .woocommerce select`.
|
|
|
|
|
- Select2/SelectWoo hardcodes `#fff` backgrounds in `select2.css` — needs comprehensive overrides for selection containers, dropdowns, search fields, and highlighted options.
|
|
|
|
|
- WooCommerce notice CSS uses `border-top: 3px solid`, `background-color: #f6f5f8`, and WooCommerce icon font `::before` at specificity `0,1,0`. Single-class overrides don't win — must use `.woocommerce .woocommerce-*` (specificity `0,2,0`) and explicitly reset `border-top`.
|
|
|
|
|
- Never set `background-image` without `background-repeat: no-repeat` / `background-size` / `background-position` — SVGs will tile.
|
|
|
|
|