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
// 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;
}
}

17
falcon/templates/index.tpl
View File

@ -29,6 +29,23 @@
{block name='page_content_top'}{/block}
{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'}
{$HOOK_HOME nofilter}
{/block}

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

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

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

@ -28,7 +28,7 @@
{block name='right_column'}{/block}
{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"}
{block name='content'}
<p>Hello world! This is HTML5 Boilerplate.</p>