e107sk.com

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.

10fcb47cbfe6

Just set code (mode) and template. 

17e9f24f8eff

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

E95b2545d3db

9e9e61b39f98

0ca96948a3fe

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>
<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>
</div>
</div>
</div>
</header>';

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.

0 Comments

Other links

Follow us