Template features

This article describes the Steakhouse template additional features.

One-page layout for articles

While creating a menu item it is possible to select two non-standard menu item types - one-page layout and one-page wide layout:

Thanks to these two additional layouts it is possible to create pages which will look like the below page:

The above page uses standard one-page layout. The header is created from the article title (use two underscores to create the second line in the title). Background of the header is created from the article full image.

The one-page wide layout is very similar to the one-page layout one, but it offers wider area for the article.

It is also possible to use narrower module positions - in this case please assign the narrow-page suffix for the menu item with the specific article.

Menu subpage

The above subpage uses the one-page wide layout and the following code:

<div class="gk-menu-container">
<img src="images/demo/menu_main_image.jpg" alt="Steaks menu" />

<div class="gkCols" data-cols="2">
<div>
<h3>Prime Steaks</h3>
<dl>
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
<div>
<h3>Prime Steaks</h3>
<dl>
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
</div>
<section>
<header class="bigtitle">
<img src="images/demo/menu_drinks.jpg" alt="Drinks menu" />
<h3 class="header">
<span>Drinks</span>
<small>Discover our menu</small>
</h3>
</header>

<div class="gkCols" data-cols="2">
<div>
<h3>Prime Steaks</h3>
<dl>
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
<div>
<h3>Prime Steaks</h3>
<dl>
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
</div>
</section>

<section>
<header class="bigtitle">
<img src="images/demo/menu_salad.jpg" alt="Salads menu" />
<h3 class="header">
<span>Salads</span>
<small>Discover our menu</small>
</h3>
</header>

<div class="gkCols" data-cols="2">
<div>
<h3>Prime Steaks</h3>
<dl>
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
<div>
<h3>Prime Steaks</h3>
<dl>
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
</div>
</section>
</div>

Gallery subpage

The gallery subpage can be used for creating an article with the following popup effect:

This effect is created thanks to the following structure:

<figure class="gk-photo gk-photo-left">
<a href="/images/demo/gallery1.jpg"><img src="/images/demo/gallery_thumb1.jpg" alt="Gallery Thumb I" /></a>
<figcaption>
<h3>Risus Ullamcorper Mollis</h3>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
</figcaption>
</figure>

The position of the image can be changed by replacing the gk-photo-left class to gk-photo-right (image on the right side) or gk-photo-center (image over the text) class.

It is important to put in the href attribute of the link the full-size version of the thumbnail.

Contact subpage

It is a standard Joomla! single contact page with small improvement: if the Other information block contains the map code like the below one:

<div class="gk-map static" data-latitude="-34.397" data-longitude="150.644" data-ui="yes" data-zoom="8"></div>

Then the map is displayed under the contact title. The map code is very similar to the map code used on the frontpage with one difference - in this case the map container has also the static CSS class.

Reservation subpage

The above page uses the one-page layout and the following code:

<h2>Online Reservation</h2>
<p class="gk-subtitle">Please complete the submission form below to make a reservation.</p>

{GKRESERVATION}

The {GKRESERVATION} string is replaced by the GK Reservation plugin.

Reservation plugin

It is a simple plugin - very similar to the GK Contact plugin. It generates a reservation form from the {GKRESERVATION} string in the article and it sends an e-mail with the reservation details based on the form input.

Every form element can be disabled:

It is possible to add short text under the form and specify the e-mail recipent:

Please remember that you have to enable the reCAPTCHA plugin and configure it, before enabling it in the GK Reservation plugin!