Loading...
Home Page
About
Marketplace
Sample page
Wishlist at dev site
Sitemap (Categories)
Tiki Customization
Creating a theme
Converting a Bootstrap theme
Contributing, sharing or selling
Customizing icons
Tips
Template Tricks
CSS Tricks
Feature Examples
Articles
Blogs
Calendar
Forums
FAQs
Trackers
Files
Links Directory
Wiki Pages
Find
History: Topbar hero
View published page
Source of version: 7
(current)
{layout header="y" footer="y" leftcolumn="n" rightcolumn="n" fullwidth="y" nosidemargins="y" bgrepeat="repeat" actionbuttons="y" topbar="y" pagetopbar="y" pagebottombar="y"} {img fileId=181 class="top-image" width="100%" height="auto"} {HTML()}<style> .toggle-container, .col2, .col3 { display: none; } .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; } </style>{HTML} {DIV(class="container")} A common and attractive feature on the web is a full-width image above the text content that reflects the content of the page or sets its tone. In this implementation of a page-top hero image, the source image plugin (''PluginImg'') is actually here in the page content but it, along with the page title and description, are relocated to the page top by a few lines of JavaScript. !!! Possible in all content sections This page-top image implementation can be done on one or more (or all) wiki pages, blog posts, and articles, as well as other pages, as long as they have a wiki text section where the image can be specified. !!! Uniform appearance For a uniform treatment where all such pages have an image, for pages that don't have a specific image indicated, the hero area could also have a general background image or color, etc. that served the purpose or, for example, one image for wiki pages without a specific image, another image for all blog posts without a specific image, and so on. These background images would be set by CSS, and then would be covered by page-specific images for pages that have that information set. !!! Standard Tiki components used A custom module (for now) has the HTML that is the target of the relocation. This module is in the ''topbar'' module zone, which spans the content columns of the page, just below the navbar. The custom module probably should be the only content of the module zone or, if other modules are used, they could be above or below the image. The image for the hero is indicated with a CSS class, -+ top-image +- . The complete image plugin syntax looks like this: {CODE()} {img fileId=136 class="top-image" width="100%" height="auto"} {CODE} The CSS in the plugin will probably be moved to Tiki's -+ tiki-base.css +- stylesheet later on. This is the custom module content: {CODE()} <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> {CODE} !!! The CSS This is the CSS originally put together for this feature, but it will be improved shortly. Currently this needs to be put in the Look & Feel Custom CSS textarea, or in the page (in a PluginHTML and < st~tc~~/tc~yle > tags): {CODE()} /* 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; } {CODE} If the image is to be the full width of the viewport (screen), then this CSS should also be used: {CODE()} .container.container-std.topbar-wrapper { max-width: 100%; } {CODE} Otherwise, the image will be limited to the container width of the page (the width of the content columns below the image. !!! The JavaScript This is the JavaScript that's needed (some improvements are possible here and in the CSS to prevent display of unneeded icons, etc.: {CODE()} $( 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') ); } {CODE} !!! Looking ahead Probably in the near future we will have a PluginPagetopHero* with a GUI to enter not only the image for the page but also the text color (for good color contrast), font family, and so on. Working with this will be a new PagetopHero module, containing the HTML shown above so it doesn't have to be created as a custom module at the Tiki site. Since it's a module, it's visibility can be controlled per-page, per-category or other filter, like all modules. *Name subject to change {JQ()}$( 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') ); }{JQ} {DIV}
Layout
Stay on this page
Default
Single Container
Classic Bootstrap
Classic Tiki (3 containers - header, middle, footer)
Tikipedia
Latest Changes
Included themes
Materia
Ohia
Themes
Making or Updating a Theme for Tiki 27
Updating a Theme for Tiki 26
Tiki_org_family_customizations_CSS
BookStacked
Make an SCSS-Compiled Tiki Theme
Contributing, sharing or selling a theme
...more
Subscribe to Tiki Newsletters!
Delivered fresh to your email inbox!
Don't miss major announcements and other big news!
Site Config
Site upgraded to branch 26x
Wed 21 of Jun, 2023 09:45 GMT-0000
Site upgraded to branch 25x
Sat 12 of Nov, 2022 17:00 GMT-0000
Site upgraded to Tiki 23.x
Sat 24 of Jul, 2021 00:30 GMT-0000
Site upgraded to Tiki 20
Wed 29 of May, 2019 07:57 GMT-0000
We are now on Tiki 19.x
Fri 05 of Oct, 2018 10:02 GMT-0000
Shoutbox module removed
Thu 28 of Jun, 2018 07:01 GMT-0000
We are now on Tiki 18.x
Wed 02 of May, 2018 08:46 GMT-0000
Upgraded to Tiki 17.0
Wed 02 of Aug, 2017 08:19 GMT-0000
Upgraded to Tiki 15.0alpha
Tue 08 of Mar, 2016 13:34 GMT-0000