From 6ff74d7cc8174d5023832f09eb6dc125278574ee Mon Sep 17 00:00:00 2001 From: Isabelle Date: Wed, 24 Dec 2025 10:14:06 +0100 Subject: [PATCH] feat(isabelle-edits): Modify index page layout This new page structure for the home page makes it so you have more control over the index.tpl file. By default, if the index.tpl file is full width (meaning no side columns) the container becomes fluid and full-width. For each section, you need to define a container, rows and columns. This way you can easily have full-width background images for only certain sections. --- .../theme/custom/abstracts/_utilities.scss | 13 -- falcon/templates/index.tpl | 17 +++ .../templates/layouts/layout-both-columns.tpl | 127 +++++++++--------- .../templates/layouts/layout-full-width.tpl | 2 +- 4 files changed, 79 insertions(+), 80 deletions(-) diff --git a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss index af19738..73b6d30 100644 --- a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss +++ b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss @@ -1,16 +1,3 @@ // Header selector for interpolation // Example usage: #{$headings} { ... } $headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6"; - -// Color utility classes -@each $name, $color in $theme-colors { - .bg-#{$name} { - background-color: $color; - } -} - -@each $name, $color in $theme-colors { - .text-#{$name} { - color: $color; - } -} diff --git a/falcon/templates/index.tpl b/falcon/templates/index.tpl index c17d03e..f6c8bee 100644 --- a/falcon/templates/index.tpl +++ b/falcon/templates/index.tpl @@ -29,6 +29,23 @@ {block name='page_content_top'}{/block} {block name='page_content'} + {* Define containers, rows and columns here for each section *} + {* Example: + +
+
+
+
+ {hook h='displayCustomhtml1'} +
+
+ {hook h='displayHomeBanner1'} +
+
+
+
+ + *} {block name='hook_home'} {$HOOK_HOME nofilter} {/block} diff --git a/falcon/templates/layouts/layout-both-columns.tpl b/falcon/templates/layouts/layout-both-columns.tpl index e27ec56..3a0b78c 100644 --- a/falcon/templates/layouts/layout-both-columns.tpl +++ b/falcon/templates/layouts/layout-both-columns.tpl @@ -25,101 +25,96 @@ - + {block name='head'} - {include file='_partials/head.tpl'} + {include file='_partials/head.tpl'} {/block} - + - + {block name='hook_after_body_opening_tag'} - {hook h='displayAfterBodyOpeningTag'} + {hook h='displayAfterBodyOpeningTag'} {/block}
- {block name='product_activation'} - {include file='catalog/_partials/product-activation.tpl'} - {/block} - - - -
- - {block name='notifications'} - {include file='_partials/notifications.tpl'} + {block name='product_activation'} + {include file='catalog/_partials/product-activation.tpl'} {/block} - {hook h="displayWrapperTop"} -
- {block name='breadcrumb'} - {include file='_partials/breadcrumb.tpl'} - {/block} - -
- {block name="left_column"} -
- {if $page.page_name == 'product'} - {hook h='displayLeftColumnProduct' product=$product category=$category} - {else} - {hook h="displayLeftColumn"} - {/if} -
+ - {block name="content_wrapper"} -
- {hook h="displayContentWrapperTop"} - {block name="content"} -

Hello world! This is HTML5 Boilerplate.

+
+ {block name='notifications'} + {include file='_partials/notifications.tpl'} + {/block} + {hook h="displayWrapperTop"} +
+ {block name='breadcrumb'} + {include file='_partials/breadcrumb.tpl'} {/block} - {hook h="displayContentWrapperBottom"} -
- {/block} +
+ {block name="left_column"} +
+ {if $page.page_name == 'product'} + {hook h='displayLeftColumnProduct' product=$product category=$category} + {else} + {hook h="displayLeftColumn"} + {/if} +
+ {/block} + {block name="content_wrapper"} +
+ {hook h="displayContentWrapperTop"} + {block name="content"} +

Hello world! This is HTML5 Boilerplate.

+ {/block} + {hook h="displayContentWrapperBottom"} +
+ {/block} + {block name="right_column"} +
+ {if $page.page_name == 'product'} + {hook h='displayRightColumnProduct'} + {else} + {hook h="displayRightColumn"} + {/if} +
+ {/block} +
+
+ {hook h="displayWrapperBottom"} +
- {block name="right_column"} -
- {if $page.page_name == 'product'} - {hook h='displayRightColumnProduct'} - {else} - {hook h="displayRightColumn"} - {/if} -
+
+ {block name="footer"} + {include file="_partials/footer.tpl"} {/block} - - - {hook h="displayWrapperBottom"} - - -
- {block name="footer"} - {include file="_partials/footer.tpl"} - {/block} -
+
{block name='javascript_bottom'} - {include file="_partials/password-policy-template.tpl"} - {include file="_partials/javascript.tpl" javascript=$javascript.bottom} + {include file="_partials/password-policy-template.tpl"} + {include file="_partials/javascript.tpl" javascript=$javascript.bottom} {/block} {block name='hook_before_body_closing_tag'} - {hook h='displayBeforeBodyClosingTag'} + {hook h='displayBeforeBodyClosingTag'} {/block} {block name='mobile-modals'} - {include file="_partials/mobile-modals.tpl"} + {include file="_partials/mobile-modals.tpl"} {/block} {block name='page-loader'} - {include file="_partials/page-loader.tpl"} + {include file="_partials/page-loader.tpl"} {/block} - + diff --git a/falcon/templates/layouts/layout-full-width.tpl b/falcon/templates/layouts/layout-full-width.tpl index 83186a9..e16fd2e 100644 --- a/falcon/templates/layouts/layout-full-width.tpl +++ b/falcon/templates/layouts/layout-full-width.tpl @@ -28,7 +28,7 @@ {block name='right_column'}{/block} {block name='content_wrapper'} -
+
{hook h="displayContentWrapperTop"} {block name='content'}

Hello world! This is HTML5 Boilerplate.