isabelle/Falcon-PrestaShop-9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(isabelle-edits): Modify index page layout

Browse Source 
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.
This commit is contained in:
Isabelle Oving - Anno
2025-12-24 10:14:06 +01:00
parent 00b79f12e2
commit 6ff74d7cc8
4 changed files with 79 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
falcon/_dev/css/theme/custom/abstracts/_utilities.scss
View File

@ -1,16 +1,3 @@
// Header selector for interpolation // Header selector for interpolation
// Example usage: #{$headings} { ... } // Example usage: #{$headings} { ... }
$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6"; $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;
}
}

17
falcon/templates/index.tpl
View File

@ -29,6 +29,23 @@
{block name='page_content_top'}{/block} {block name='page_content_top'}{/block}
{block name='page_content'} {block name='page_content'}
{* Define containers, rows and columns here for each section *}
{* Example:
<section id="home_hero" class="mt-0">
<div class="container">
<div class="row">
<div class="col-6 displayCustomhtml1">
{hook h='displayCustomhtml1'}
</div>
<div class="col-6 displayHomeBanner1">
{hook h='displayHomeBanner1'}
</div>
</div>
</div>
</section>
*}
{block name='hook_home'} {block name='hook_home'}
{$HOOK_HOME nofilter} {$HOOK_HOME nofilter}
{/block} {/block}

17
falcon/templates/layouts/layout-both-columns.tpl
View File

@ -25,13 +25,13 @@
<!doctype html> <!doctype html>
<html lang="{$language.locale}"> <html lang="{$language.locale}">
<head> <head>
{block name='head'} {block name='head'}
{include file='_partials/head.tpl'} {include file='_partials/head.tpl'}
{/block} {/block}
</head> </head>
<body id="{$page.page_name}" class="{$page.body_classes|classnames}"> <body id="{$page.page_name}" class="{$page.body_classes|classnames}">
{block name='hook_after_body_opening_tag'} {block name='hook_after_body_opening_tag'}
{hook h='displayAfterBodyOpeningTag'} {hook h='displayAfterBodyOpeningTag'}
@ -49,18 +49,15 @@
</header> </header>
<section id="wrapper"> <section id="wrapper">
{block name='notifications'} {block name='notifications'}
{include file='_partials/notifications.tpl'} {include file='_partials/notifications.tpl'}
{/block} {/block}
{hook h="displayWrapperTop"} {hook h="displayWrapperTop"}
<div class="container"> <div class="{if $page.page_name == 'index' }container-fluid p-0 overflow-hidden{else} container {/if}">
{block name='breadcrumb'} {block name='breadcrumb'}
{include file='_partials/breadcrumb.tpl'} {include file='_partials/breadcrumb.tpl'}
{/block} {/block}
<div class="{if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}row{/if}">
<div class="row">
{block name="left_column"} {block name="left_column"}
<div id="left-column" class="col-12 col-md-4 col-lg-3"> <div id="left-column" class="col-12 col-md-4 col-lg-3">
{if $page.page_name == 'product'} {if $page.page_name == 'product'}
@ -70,7 +67,6 @@
{/if} {/if}
</div> </div>
{/block} {/block}
{block name="content_wrapper"} {block name="content_wrapper"}
<div id="content-wrapper" class="js-content-wrapper left-column right-column col-md-4 col-lg-6"> <div id="content-wrapper" class="js-content-wrapper left-column right-column col-md-4 col-lg-6">
{hook h="displayContentWrapperTop"} {hook h="displayContentWrapperTop"}
@ -80,7 +76,6 @@
{hook h="displayContentWrapperBottom"} {hook h="displayContentWrapperBottom"}
</div> </div>
{/block} {/block}
{block name="right_column"} {block name="right_column"}
<div id="right-column" class="col-12 col-md-4 col-lg-3"> <div id="right-column" class="col-12 col-md-4 col-lg-3">
{if $page.page_name == 'product'} {if $page.page_name == 'product'}
@ -120,6 +115,6 @@
{include file="_partials/page-loader.tpl"} {include file="_partials/page-loader.tpl"}
{/block} {/block}
</body> </body>
</html> </html>

2
falcon/templates/layouts/layout-full-width.tpl
View File

@ -28,7 +28,7 @@
{block name='right_column'}{/block} {block name='right_column'}{/block}
{block name='content_wrapper'} {block name='content_wrapper'}
<div id="content-wrapper" class="col-12 js-content-wrapper"> <div id="content-wrapper" class="{if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}col-12 {/if}js-content-wrapper">
{hook h="displayContentWrapperTop"} {hook h="displayContentWrapperTop"}
{block name='content'} {block name='content'}
<p>Hello world! This is HTML5 Boilerplate.</p> <p>Hello world! This is HTML5 Boilerplate.</p>