Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

There are several styles available for each module. The basic ones are Box and Box HeaderPrimary. For each module header additionally an icon Icon can be set.

Responsive Menu

In order to make the menu responsive, create a copy of the main menu and place it in off canvas OFF-CANVAS position.

Slideshow

Special template position has been created to display full width image/slideshow: Top-Slide. To place any content on the Top-Slide addionally 2 positions can be used: Top-Slide-Over-A and Top-Slide-Over-B.

Image Removed

For static background image use:

Code Block
<div style="background-image: url("images/Slider/slider.jpg"); height: 280px;" class="tm-image uk-text-center"></div>

Call Customer Service Box

Custom HTML module placed in Toolbar-L position with content:

...

Toolbars (top page)

Contact us

Custom HTML module placed under HEADERBAR position

Code Block
<div style="margin-right: 50px;" class="uk-margin-top">
Contact Us: 
<span class="uk-badge uk-badge-large uk-badge-success"><i class="fa fa-phone"></i> 44 600 530 777</span>
</div>

Login

Custom HTML module placed under HEADERBAR position

Code Block
<div class="uk-margin-top" style="text-transform: uppercase">
 <a href="#"><i class="uk-icon-user"></i> Login</a> | <a href="#"><i class="uk-icon-edit"></i> Register</a>
</div>

JomOffers search module placed in TOP-A position. Layout set to Horizontal.

Add Offer

Custom HTML module placed under TOP-A position:

Code Block
<div style="width: 100%;">
<a href="http://jomoffers.comdev.eu/front-admin" class="button-add-offer" style="float: right"><i class="uk-icon-plus"></i> Add Offer</a>
</div>

JomOffers Latest

JomOffers Latest module placed under TOP-B posiiton

Get Connected

Article with content:

Code Block
<div class="uk-text-center">
<h1>Get Connected</h2>
<h2>Everyone who wants to get connected with us regularly, do not hesitate, we are waiting for you!</h2>
<ul class="uk-grid uk-margin-top">
<li class="uk-width-medium-1-5"><a class="uk-social-link" href="#" target="_blank"><span class="uk-social-icon"><i class="uk-icon-mobile-phone uk-icon-medium"></i> <label>Call Customer Services on: </label> <span class="call-us-number "> 800 122 122</span></span>twitter uk-icon-large"></i></span><h3 class="ut-social-title">Twitter</h3><span class="ut-social-info"> Follow us on Twitter </span></a></li>
<li class="uk-width-medium-1-5   "><a class="uk-social-link" href="#" target="_blank"><span class="uk-social-icon"><i class="uk-icon-facebook uk-icon-large"></i></span><h3 class="ut-social-title">Facebook</h3><span class="ut-social-info"> Join the Conversation </span></a></li>
<li class="uk-width-medium-1-5   "><a class="uk-social-link" href="#" target="_blank"><span class="uk-social-icon"><i class="uk-icon-google-plus uk-icon-large"></i></span><h3 class="ut-social-title">Google</h3><span class="ut-social-info"> Join Our Circle </span></a></li>
<li class="uk-width-medium-1-5   "><a class="uk-social-link" href="#" target="_blank"><span class="uk-social-icon"><i class="uk-icon-youtube uk-icon-large"></i></span><h3 class="ut-social-title">Youtube</h3><span class="ut-social-info"> View Exclusive Videos </span></a></li>
<li class="uk-width-medium-1-5   "><a class="uk-social-link" href="#" target="_blank"><span class="uk-social-icon"><i class="uk-icon-instagram uk-icon-large"></i></span><h3 class="ut-social-title">Instagram</h3><span class="ut-social-info"> Latest Images </span></a></li>
</ul>
</div>