Masthead plugin

on Saturday 16 May 2020
comments: 0

The simplified version of JM Element plugin for all future business themes (with big header on homepage)

Very simple admin area.  If I found the main header that needs more fields, it is easy to add it. There will be a new version then. For now, I tested it with all my bootstrap4 themes and it was enough.


Just set code (mode) and template. 


Add needed values. There are prepared shortcodes for 4 titles, 3 images and 3 buttons.




There are prepared demo data in the pack, but this content will come with the theme itself. There are examples for templates too, but again, it should be part of the theme.

There is only one global shortcode with 2 parameters: mode and template. If the template is not set, mode name is used.

There is no menu because you should use this shortcode in HTML layout for homepage. If needed, it can be inserted anywhere and with shortcode menu used in Menu manager too.

Some snippets:

How to replace core welcome message in theme:

function sc_wmessage()
if(e107::isInstalled('masthead')) {
$text = '{MASTHEAD: mode='.$this->sitetheme.'}'; 
$wmessage = e107::getParser()->parseTemplate($text); 
if(e_DEBUG && $wmessage == '' ) { 
e107::getMessage()->addError('{MASTHEAD: mode='.$this->sitetheme.'&template=agency} is empty. Check if record with this code exists');
return $wmessage;
return e107::getMessage()->add('Missing plugin!')->render();

How to use some background image:

$MASTHEAD_TEMPLATE['creative']['element'] = '
<header class="masthead" style="background-image: url({IMAGE_BG}) ">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center" >
<div class="col-lg-10 align-self-end">
<h1 class="text-uppercase text-white font-weight-bold">{MASTHEAD_HEADING}</h1>
<hr class="divider my-4" />
<div class="col-lg-8 align-self-baseline">
<p class="text-white-75 font-weight-light mb-5">{MASTHEAD_SUBHEADING}</p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="{BUTTON_LINK}">{BUTTON_TEXT}</a>

How to use agency data with different template:

{MASTHEAD: mode=agency2&template=solid}

Warning:  This plugin is no replacement for JM ELements. With JME your options are not limited. This is just a solution for how to create free themes and not be limited with the core.


Other links

Follow us