Occasionally we need to use custom HTML to obtain the layouts shown on our demos in specific modules. The code below is what was used on this template. It is best to enter this code directly into the HTML editor function of your editor. Some area may require that you enable the Ion Icons (Under General) and Scroll Reveal (Under Javascripts) features in the template configuration.

Logo and inverted colors:

We published 2 images to the "logo" position for this theme. The first image is the blue circle icon and the second is the text. On the text we put a CSS class that inverts the colors when the floating menu drops down. So instead of white it shows up black. Below is the code and you can see the CSS class that can be added to invert the colors of your logo or text.

<img alt="logo" src="templates/light_church/images/s5_logo.png" onclick="window.document.location.href='index.php"> <img alt="logo" src="templates/light_church/images/s5_logo_text.png" onclick="window.document.location.href=''index.php'" class="invert">


The menu here is just the standard flex menu but we simply added an image via the menu manager. We coded the CSS in such a way the images show centered and above each menu item. We recommend using images around 60x60 pixels.

Right slide in Menu:

These are custom html modules that are published to the custom_5 position. There is a standard menu module and then 2 custom HTML modules published below the menu. The menu and middle custom HTML use the suffix "underline"

<div class="s5menuicon_left">
Daily Devotionals
<span class="s5menusubtext">Right from the pastors desk</span>

<div class="s5menuicon_right"><i class="ion-ios-calendar-outline"></i></div>

<div style="clear:both;height:17px;"></div>

<div class="s5menuicon_left">
Verse by Verse
<span class="s5menusubtext">The full council of Gods word</span>

<div class="s5menuicon_right"><i class="ion-ios-book"></i></div>

<div style="clear:both;"></div>

Image and Content Fader:

This module is published to the custom_1 position. The Title is just plain text and the text area we used text as shown below:

Prepare your heart with music <br /> <a style="float:none" class="readon" href="index.php/extensions/s5-image-and-content-fader">Our Worship Music</a>

Latest Message and Download Buttons:

This is the custom_2 module position. All the code for it is below:

<div id="s5_latest_right">
<div id="s5_latest_message">
Latest <br>

<div class="date_outer_wrap">
<div class="date_wrapper">
<div class="date_top">
<div class="date_bottom">
<div class="date_text_wrap">
<span class="date_text1"><a href="/lightchurch/">Dialed In - Part 11, Master Quiz</a></span>
<span class="date_text2">PASTOR MARK MCPHERSON</span>
<div style="clear:both"></div>

<div id="s5_latest_message_right">
<a class="readon" href="index.php/features-mainmenu-47/pages/sermons">Download <i class="ion-ios-cloud-download-outline"></i></a>
<a class="readon" href="index.php/features-mainmenu-47/pages/sermons">Listen <i class="ion-headphone"></i></a>

<div style="clear:both;"></div>

Top Row 1:

This area uses several custom HTML modules and their code is listed below:

Top Row 1:
<img src="images/couple.png" alt="couple" class="hide_1050"/>

Top Row 2:
Welcome! We’re glad to have you with us at Lighthouse Church. Here at Lighthouse Church, our message and mission is simply, to help connect people to the Way, the Truth and Life, Jesus. In the Bible God says good works can’t save us and that no one is good enough to go to heaven. So what do we do? <br><br> <a class="readon" href="/lightchurch/index.php/extensions/s5-image-and-content-fader">Find Out</a>

Top Row 3:
Listen to Sermons
<i class="s5icon ion-ios-mic"></i>

<h5 class="uppercase">Listen to Sermons</h5> Missed a sermon? No problem!
Get the latest teachings from here.
<a class="readon" href="index.php/features-mainmenu-47/pages/sermons" style="margin-top:24px;">Sermon Directory</a>

Service Times
<i class="s5icon ion-ios-clock"></i>

<h5 class="uppercase">Listen to Sermons</h5>
Sunday Mornings <br>
8:00am | 9:30am | 11:15am
Wednesdays Evenings<br>

Sermon Series:

This is a custom HTML module published to the top_row2_1 position with a background image set to it and a class suffix of "largetitle white center".

A walk through the book of Proverbs on wisdom. <br><br> <a class="readon" href="/lightchurch/index.php/extensions/s5-image-and-content-fader">Latest Podcats <i class="ion-ios-cloud-download-outline"></i></a>

Can't Find Something:

This is a custom HTML module published to the top_row2_1 position. It uses the module suffix of "largetitle center"

<span class="s5_width50"><h3 class="lineheight">Looking for a place to connect or grow?</h3></span>
<a class="readon s5_highlight1" href="/lightchurch/index.php/extensions/s5-image-and-content-fader">Let Us Help</a>

Our Meeting Locations

This area uses the S5 Tab Show module, which is published to the custom_3 position. For setup instructions for S5 Tab Show please visit: http://www.shape5.com/documentation/Joomla/Extensions/S5-Tab-Show. The module uses the suffix of "largetitle white" and the background image on the right side is set in the theme specific area of the template. Below is the example code that is published to all three tab show positions.

<div class="addresstime_left">
<h4>Our Address</h4>
Rockville Market Center<br>
8615 W Kelton Lane #310<br>
Peoria, AZ 85382
<a class="readon" href="https://www.google.com/maps/place/Calvary+Chapel/@39.9750624,-75.1612614,17z/data=!3m1!4b1!4m5!3m4!1s0x89c6c7dec70ddfa9:0xa918d409420ec114!8m2!3d39.9750583!4d-75.1590727" target="_blank">View on Map <i class="ion-android-pin"></i></a> </div>

<div class="addresstime_right">
<h4>Service Times</h4>
Sunday Mornings <br>
8:00am | 9:30am | 11:15am
Wednesdays Evenings<br>

From the Blog:

This is the Masonry module published to the "above_columns2_1" position with a module suffix of "largetitle". For setup instructions of this extension please visit: https://www.shape5.com/documentation/Joomla/Extensions/S5-Masonry

Instagram Feed:

This is the S5 Instagram module published to the "bottom_row1_1" position with a gray background set to the row in the Vertex layout area. The text on the right is a custom HTML module published to the "bottom_row1_2" position with the below code:

Bottom Row 1_2:
<span class="textright uppercase"><h3 class="lineheight">Follow us
on Instagram</h3>
<span class="instagram_tag">

Outreach We Serve:

This is a custom HTML module published to the custom_4 module position with the below code. The background image on the left is set in the Vertex theme specific area. The module is using a suffix of "largetitle white"

Service is the overflow of discipleship. It seeks to extend God’s grace and mercy to others for His glory and not our own. We serve as an expression of love and stewardship of grace, marked by humility, generosity and hospitality.
<a href="/lightchurch/index.php/features-mainmenu-47/template-specific-features" class="readon right">Give Online</a>
<a href="/lightchurch/index.php/features-mainmenu-47/template-specific-features" class="readon">Become a volunteer</a>

S5 MailChimp:

This area consists of three modules. The custom HTML text on the left and the mailchimp module published below it to the bottom_row2_1 with a suffix of "largetitle right". The mailchimp module is simply published below this. On the right side the image is published to a custom HTML module with the below code.

<img src="images/tabletimage.png" alt=""/>

Social Icons:

This is a custom HTML module published to the custom_6 position.

<div class="social_icons">
<a href="" target="_blank" class="social_icon ion-social-facebook"></a>
<a href="" target="_blank" class="social_icon ion-social-twitter"></a>
<a href="" target="_blank" class="social_icon ion-social-googleplus"></a>
<a href="" target="_blank" class="social_icon ion-social-pinterest"></a>
<a href="" target="_blank" class="social_icon ion-social-linkedin"></a>
<a href="" target="_blank" class="social_icon ion-social-instagram-outline"></a>