Template MediCenter Documentation

Step 1 - Install E4J MediCenter template

After unziped the .zip file, from your back-end setting panel, go to: "Extensions → Extension Manager", browse E4J MediCenter installation package of your Joomla version then hit the "Upload and Install"

Step 2 - Set default template style

Go to: "Extensions → Template Manager", set E4J MediCenter template style as your default template style.

On this page you can choose the color variation your prefer for your website, there are 5 colors palette.

Extensions -> Template Manager -> E4J MediCenter

Choose the logo for your website.

Extensions -> Template Manager -> E4J MediCenter

You can choose different fonts and size for the website’s body and headers.

In our demo website we used:

• Titles Font Size: 32px;
• Body text Font Size: 16px;
• Body Font: Lato;
• Header Font: Lato;

With the "Hide Homepage Content" you could hide the html structure that shows the articles in your homepage, with related padding and spaces.
Please, use this parameter just in the case you don't want to show any article printed on the main website area. 

In our demo website we set it up to: NO.

With the Responsive Layout you could choose if show your website responsive and adaptable for all the devices:

With these parameters setup you can choose if you want to display the Responsive Menu or leave the normal menu.
In the case the Responsive Layout has been setup to YES, the responsive framework will be displayed below the value "Responsive Width".

This is a preview:

This parameter will let the header follows the vertical scolling navigation of the website.

With these parameters you can setup the style of your header.

• Homepage - Header Position: With this parameter you can choose to display the header over the slider or in the top of it.
  By choosing "Over Slider", your header will be displayed with a black background with transparency. By choosing "Top" instead, you'll be able to select a Header Background. On this last case, the slider will not take all the window size in width and height, but just in width, the height will be calculated automatically.
  Here some screenshot of the two choices.

  Over Slider

  

  Top (We've selected a white header background)
  

  

• Internal Pages - Header Position: This parameter works in the same way of the Homepage - Header position. But it'll managed the internal pages.
• Menu Text Color: This parameter setup the color of the menu text for homepage and internal pages.

With these parameteres you can select the color of the text and menu icon in the responsive mode. If the Menu Text field is empty will be displayed just the responsive menu icon.

• 1 This is a simple Menu module setup in the "upmenu-right".
  
  
  Module-position: upmenu-right

• 2 This is the Main Menu module setup in the "mainmenu".
  
  Module-position: mainmenu

• 3 This part is composed by three modules all published in the same Module position:
  1. BOOK AN APPOINTMENTS: This is VikAppointments Search module. You can find it inside the VikAppointments package.
     We listed just the parameters that we've changed from the default values.

     Module Configuration

     • Orientation Vertical
     Module-position: slide-down
  2. PROFESSIONAL STAFF: This is the native Custom HTML module of Joomla. We've simply add simple text.
     
     Class-Suffix: color3
     Module-position: slide-down
  3. OPENING HOURS: This is the native Custom HTML module of Joomla. We've simply add simple text.
     Here the HTML code we've used for the structure of the hours:

<ul class="list-unstyled">
<li>Monday – Friday
<div>8.00 – 19.00</div>
</li>
<li>Saturday
<div>8.30 – 19.00</div>
</li>
<li>Sunday
<div>8.30 – 14.00</div>
</li>
</ul>

• Class-Suffix: opening-hours color2
  Module-position: slide-down

• 4 This is the Vik Content Slider module (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values.
  Module-position: slider-fullscreen

  Module Configuration

  Slider Options

  • Title Effect: FadeInUpBig
  • Description Effect: FadeInUp

• 5 This is a simple Article of Joomla. We've connected our Home menu item to a simple article of Joomla. We've hide the article title, and decided to insert our title inside the article content.

• 6 This part is composed by two modules.
  

  1. The first module is the VikAppointments Services, you can find it inside the VikAppointments package and it'll show the Services added on the component.

     Module Class Suffix: width75 no-padding
     Module-position: module-box2

  2. The second module is the native Menu module of Joomla and we have selected a menu we have created with all the services as menu items.

     Module Class Suffix: width75 no-padding
     Module-position: module-box2

• 7 This part is composed by two modules.
  

  1. The first module is the already known Vik Icons module (you can find the download link in the Modules List chapter or in the module explanation here).
     We listed just the parameters that we've changed from the default values.

     Module Configuration

     • Show Title: Hide

     Icons Options

     • Icons Size: 35
     • Icon Style: Circle
     • Box Container: Full Size
     • Padding Size: 4
     • Content Alignment: Default
     • Icon Alignment: Bottom
     Module Class Suffix: width75 no-padding service-ico
     Module-position: module-box3

  2. The second module is the native Custom HTML module of Joomla. As you could see the content is the same used for the module in the Slide Down position. Please, check the html code here.

     Module Class Suffix: width25 color
     Module-position: module-box3

• 8 This part is composed by two modules. The first module is the Vik Wall Image that shows an image as background, the second module is native Vik Words module loaded over the previous one and it shows the testimonials blocks.
  Let's start to configure the Vik Wall Image (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values.

  Module Configuration

  Module Options

  • Show Title: Hide
  Module Class Suffix: no-padding
  Module-position: fullbox

  The Vik Words module (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values.

  Module Configuration

  • Show Title: Hide

  Options

  • Sentence Layout: Carousel
  • Sentence per row: 1
  • Color Title: #fff
  • Image Position: left

  On Joomla you could load a module by using a specific tag named "loadposition homethumb" between curly brackets. The homethumb is the custom position we decided to use for our module. For more information about how to use the loadposition tag, please, read our Knowledge Base article here.

  Module-position: testimonials

• 9 This is the VikAppointments Employees module, you can find it inside the VikAppointments package and it'll show the Employees added on the component.
  Module Class Suffix: main-size grey title-center
  Module-position: fullbox

• 10 This is the native module of Joomla that shows the articles of specifics categories (each block is an article), you could add it in the Extensions > Modules > New > Articles - Category.
  Each article had a title, text content and intro image published.

  Module

  • Show Title: Latest News || News or Tips from your health (To split the title just use two pipe || )

  Filtering Options

  • Category: Insert your category name

  Display Options

  • Intro Text Show
  Module Class Suffix: width75 no-padding
  Module-position: module-box4
• 11 This is the module VikAppointments Employees Filter, this is part of the VikAppointments package. You can use this module to let your customer filter your employees based on the location or other filters.
  
  Module Class Suffix: width25 color
  Module-position: module-box4

• 12 The four blocks are, in order from left:

  1. Custom HTML module

     Module Class Suffix: width25
     Module-position: footer

  2. Menu module

     Module Class Suffix: width25
     Module-position: footer

  3. Menu module

     Module Class Suffix: width25
     Module-position: footer

  4. Vik Icons (Contact Information)

     This is the Vik Icons module (you can find the download link in the Modules List chapter or in the module explanation here).
     We listed just the parameters that we've changed from the default values.

     Module Configuration

     Module

     • Show Title: Hide

     Icons Options

     • Icon Size: 14
     • Box Container: Default
     • Padding Size: 12
     • Icon Alignment: Left
     Module Class Suffix: width33 footer-contacts
     Module-position: footer

• 13 Vik Icons

  This is the Vik Icons module (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values.

  Module Configuration

  Module

  • Show Title: Hide

  Icons Options

  • Icon Size: 14
  • Box Container: Full Size
  • Padding Size: 12
  • Icon Alignment: Left
  Module Class Suffix: text-center
  Module-position: subfooter

• 1 This is the already known Vik Wall Image module.
  Module-position: slider-fullscreen
  Module Class Suffix: text-center

  Module Configuration

  • Show Title: Hide

  Options

  • Title Effect: FadeInDown
  • Title Effect: FadeInUp
  • Level Opacity Mask: 0.3

  N.B. You'll see this layout in most of the pages of our demo website, they are all Vik Wall Images and they've been configured in this same way.

• 2 This a simple article content. In this case we've just created our text and an image inside the textarea. Both have been added in a div with class "caption".
  The class caption, setup the contents in two columns. Each column has a caption class. To setup a content inside a class caption, you should just select each content and from the TinyMCE editor select the button Format > Formats > div.caption.

• 3 This is the VikAppointments Employees module that we've already used in the Homepage.
  Module Class Suffix: title-center grey Module-position: subcontent

• 4 This the Vik Counters module, with this module you can create as many counter you want. Please, how to use the module on the dedicated page. We listed just the parameters that we've changed from the default values.

  Module Configuration

  • Show Title: Show
  • On our demo website we used for all the counters the FontAwesome icons. Here a configuration example for one counter.

  

  Counter Options

  • Padding Size: 2
  Module Class Suffix: text-center bg-color
  Module-position: fullbox

• 1 This is the Vik Google Maps module (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values.

  Module Configuration

  • Show Title: Hide

  Map Settings

  • Map Height: 400px
  • Zoom Level: 12
  • Center Map Latitude: Insert the Latitude
  • Center Map Longitude: Insert your Longitude
  • API KEY: Insert your API Key, to see how to create it, please read the Knowledge Base article here.

• Contact Details

  • Contact Enabled: Yes
  • Contact Position: Left
  • Text Above Details: On this area you can copy the same HTML code of the others OPENING HOURS modules. Please, copy the same HTML code of this chapter, on this area.

• Locations

  • Latitude and Longitude: Insert here your coordinates

• 2 This is a simple Article of Joomla. We've connected our Contact Us menu item to a simple article of Joomla. We've added a blue border by adding a class in the paragraph. The class is text-border.

• 3 On this part you can find two modules published in the same position.
  
  1. The form is our module Vik Contact Form (you can find the download link in the Modules List chapter or in the module explanation here).
     Module-position: module-box4
     Class-Suffix: width75
  2. The second module is the already known Vik Icons module (you can find the download link in the Modules List chapter or in the module explanation here).
     We listed just the parameters that we've changed from the default values.

     Module Configuration

     • Show Title: Hide

     Icons Options

     • Icons Size: 21
     • Padding Size: 12
     • Content Alignment: Default
     • Icon Alignment: Left
     .
     Class-Suffix: width25 color contactus
     Module-position: module-box4

<h3 class="text-border text-border-left">About Us</h3>