Topbar hero

Copy to clipboard

{img fileId=136 class="top-image" width="100%" height="auto"}

The CSS in the plugin will probably be moved to Tiki's

Copy to clipboard

<div id="pagetop-hero" class="pagetop-hero w-100">
    <div class="bg-image-wrapper" id="bg-image-wrapper"></div>
        <div class="container">
            <div class="row">
                <div class="col-sm-8 offset-sm-2 text-center" id="page-header-title-wrapper">
                </div>
            </div>
        </div>
</div>

Copy to clipboard

/* Pagetop Hero */
.pagetop-hero {
  min-height: 459px;
  position: relative;
}
.pagetop-hero .bg-image-wrapper {
  max-height: 459px;
  max-width: 100%;
  overflow: hidden;
}
.pagetop-hero .bg-image-wrapper .top-image.img-fluid {
  height: auto !important;
  width: 100% !important;
}
.pagetop-hero .container {
  padding-top: 120px;
}
.pagetop-hero .container .row {
  display: flex;
  align-items: center;
  padding: 0 15px;
  margin: 0;
  flex: 1;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.topbar_modules { flex-wrap: wrap !important; }
.pagetop-hero .container .row h1.pagetitle, .pagetop-hero .container .row .pagetitle.h1 {
  margin: 0 0 20px;
  /* font-family can be specified */
  font-size: 67px;
}
.pagetop-hero .container .row h1.pagetitle, .pagetop-hero .container .row .pagetitle.h1, .pagetop-hero .container .row h1.pagetitle a, .pagetop-hero .container .row .pagetitle.h1 a, .pagetop-hero .container .row .page-header .author, .pagetop-hero .container .row .page-header .author a, .pagetop-hero .container .row .page-header .container, .pagetop-hero .container .row .page-header .description, .pagetop-hero .container .row .page-header .pagetop-hero .container .row .page-header .title {
  color: #fff;
}
.pagetop-hero .container .row .hestia-title {
  line-height: 1.4;
}
.pagetop-hero .container .row .wikiinfo {
  display: block;
  margin: 10px 0 0;
  /* font-family can be specified */
  font-size: 1.3rem;
  color: #fff;
}
.pagetop-hero .container .row .float-start {
  float: none !important;
}
.bg-image-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  background-position: center center;
  background-size: cover;
}

Copy to clipboard

.container.container-std.topbar-wrapper { max-width: 100%; }

Otherwise, the image will be limited to the container width of the page (the width of the content columns below the image.

Copy to clipboard

$( init );

function init() {
    $('#page-header-title-wrapper').append( $('body:not(.tiki_blogs) #col1 h1.pagetitle') );
    $('#page-header-title-wrapper').append( $('#col1 .wikiinfo') );
    $('#page-header-title-wrapper').append( $('header.articletitle h1') );
    $('#page-header-title-wrapper').append( $('.blog-postbody-title') );
    $('.bg-image-wrapper').append( $('.top-image') );
    $('#bg-image-wrapper').append( $('.top-image') );
}