Developer notes
| Item | Value |
|---|---|
| Add-on id | kv_theme_canvas |
| Theme | kv_canvas (child of responsive), installed from var/themes_repository/kv_canvas |
| Built with | Kavio theme kit 1.2.8 (kv-files.json lists every file with its hash and the kit version), module flagship |
| CSS prefix | ca- (theme), kv- / kv-fs- (kit) |
How the tile board works
Section titled “How the tile board works”No PHP, no table and no core change. The stock block renderer
(views/block_manager/render/block.tpl) wraps a block that has a User class in one <div class="<user class>">, a
direct child of the grid’s <div class="span16 <grid user class>">. Canvas styles .kv-canvas as a CSS grid
(2 / 6 / 12 columns at 0 / 768 / 1024 px, grid-auto-flow: row dense) and the kv-tile-* / kv-tint-* children as
tiles. Blocks without a kv-tile-* class span the full row without tile chrome.
The admin picker is two template hooks (block_manager:settings, block_manager_update_grid:settings) with a small
script that reads and writes the stock User class input (snapping_data[user_class] / user_class); the picker posts
no field of its own, so layout export / import, other themes and uninstall see plain Block Manager data.
Block templates
Section titled “Block templates”| Template | Type | Data |
|---|---|---|
blocks/categories/kv_ca_count.tpl |
Categories | kit top_products (theme.json kit.top_products, n = 3): $category.kv_top (best sellers) and $category.kv_top_total (active products in the subtree; active vendors only on Multi-Vendor), cached with Registry::registerCache() on the products / categories tables. Setting kv_cols (3, 4, 6). |
blocks/products/kv_ca_spot.tpl |
Products | stock common/product_data.tpl captures (price, old price, clean price, add-to-cart form with options handling) and the kit countdown partial (kv_promo_end). Rail module for previous / next; no automatic movement. |
Both print nothing without the licensed Canvas design. Output never depends on the visitor, so pages stay safe for the 4.21 full page cache.
css/kit/*.less(kit layer and modules),css/skin/skin.less(Canvas: tile board, tints, count / product / stat / help tiles),styles/data/{Gesso,Matcha,Fresco,Gouache,Marina,Sherbet,Blackboard,Charcoal}.less.blocks/categories/kv_ca_count.tpl,blocks/products/kv_ca_spot.tpl.- Admin:
addons/kv_theme_canvas/hooks/block_manager/settings.post.tpl,hooks/block_manager_update_grid/settings.post.tpl,components/tilepick_js.tpl.
Customising
Section titled “Customising”Use a child theme or the Theme editor’s custom CSS. Design tokens are LESS variables set by each scheme file:
@ca_page (board), @ca_tint1..4_bg/_text (paper, sand, mist, sage), @ca_ink_tile_bg/_text/_muted/_accent,
@ca_accent_tile_bg/_text, @ca_numeral (number chips). Add your own tile colour with a class of your own, for
example .kv-canvas > .my-tint { background: #FFE9A8; color: #1A1A1A; }, and put my-tint in the block’s “User-defined CSS class” field.