You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
4.0 KiB
168 lines
4.0 KiB
{* $Id$ *}
|
|
{tikimodule error=$module_error title=$tpl_module_title name=$tpl_module_name flip=$module_params.flip decorations=$module_params.decorations nobox=$module_params.nobox notitle=$module_params.notitle type=$module_type}
|
|
<div id="pagetop-hero" class="pagetop-hero w-100 p-4">
|
|
<div class="bg-image-wrapper" id="bg-image-wrapper" {if $bgimage neq ''}style="background-image: url('{$bgimage}')"{/if}></div>
|
|
<div class="row">
|
|
<div class="col-sm-12 content">
|
|
<h1 class="pagetop-hero-title">{$title|escape}</h1>
|
|
{if count($breadcrumbs) gt 0}
|
|
<div class="breadcrumbs">
|
|
{foreach from=$breadcrumbs item=item name=object }
|
|
{if $smarty.foreach.object.last}
|
|
<span>{$item}</span>
|
|
{else}
|
|
<b>{$item}</b> /
|
|
{/if}
|
|
{/foreach}
|
|
</div>
|
|
{else}
|
|
{if $description neq ''}
|
|
<p class="pagetop-hero-description">{$description|escape}</p>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/tikimodule}
|
|
|
|
<style>
|
|
/* Pagetop Hero */
|
|
.pagetop-hero {
|
|
-webkit-box-shadow: 0px 5px 16px 2px rgba(68, 68, 68, 0.58);
|
|
box-shadow: 0px 5px 16px 2px rgba(68, 68, 68, 0.58);
|
|
min-height: 300px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pagetop-hero-title,
|
|
.breadcrumbs,
|
|
.pagetop-hero-description {
|
|
text-align: center
|
|
}
|
|
|
|
|
|
.pagetop-hero .bg-image-wrapper {
|
|
min-height: 300px;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pagetop-hero .row {
|
|
z-index: 1;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.pagetop-hero .row .pagetop-hero-title {
|
|
flex-wrap: wrap !important;
|
|
color: #fff !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.bg-image-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 0;
|
|
background-position: center center;
|
|
background-size: cover;
|
|
background-color: rgb(60, 60, 60);
|
|
filter: brightness(65%);
|
|
-webkit-filter: brightness(65%);
|
|
-moz-filter: brightness(65%);
|
|
}
|
|
|
|
.breadcrumbs,
|
|
.breadcrumbs a,
|
|
.breadcrumbs span {
|
|
color: #fff !important;
|
|
}
|
|
</style>
|
|
|
|
{if $content_position eq 'topleft'}
|
|
<style>
|
|
.pagetop-hero-title,
|
|
.breadcrumbs,
|
|
.pagetop-hero-description {
|
|
text-align: left
|
|
}
|
|
|
|
.pagetop-hero {
|
|
align-items: flex-start;
|
|
}
|
|
</style>
|
|
{/if}
|
|
|
|
{if $content_position eq 'topcenter'}
|
|
<style>
|
|
.pagetop-hero-title,
|
|
.breadcrumbs,
|
|
.pagetop-hero-description {
|
|
text-align: center
|
|
}
|
|
|
|
.pagetop-hero {
|
|
align-items: flex-start;
|
|
}
|
|
</style>
|
|
{/if}
|
|
|
|
{if $content_position eq 'topright'}
|
|
<style>
|
|
.pagetop-hero-title,
|
|
.breadcrumbs,
|
|
.pagetop-hero-description {
|
|
text-align: right
|
|
}
|
|
|
|
.pagetop-hero {
|
|
align-items: flex-start;
|
|
}
|
|
</style>
|
|
{/if}
|
|
|
|
{if $content_position eq 'bottomleft'}
|
|
<style>
|
|
.pagetop-hero-title,
|
|
.breadcrumbs,
|
|
.pagetop-hero-description {
|
|
text-align: left
|
|
}
|
|
|
|
.pagetop-hero {
|
|
align-items: flex-end;
|
|
}
|
|
</style>
|
|
{/if}
|
|
|
|
{if $content_position eq 'bottomcenter'}
|
|
<style>
|
|
.pagetop-hero-title,
|
|
.breadcrumbs,
|
|
.pagetop-hero-description {
|
|
text-align: center
|
|
}
|
|
|
|
.pagetop-hero {
|
|
align-items: flex-end;
|
|
}
|
|
</style>
|
|
{/if}
|
|
|
|
{if $content_position eq 'bottomright'}
|
|
<style>
|
|
.pagetop-hero-title,
|
|
.breadcrumbs,
|
|
.pagetop-hero-description {
|
|
text-align: right
|
|
}
|
|
|
|
.pagetop-hero {
|
|
align-items: flex-end;
|
|
}
|
|
</style>
|
|
{/if}
|