Church Family - Responsive and Clean WordPress Theme Documentation

HTML Structure

Header

Let's get in touch with the block <header id="header">. Logo is placed in <div id="sitename">, and the menu is in <nav id="mainmenu_area">. "Home"and "Features" contains sub-menus.

src="images/logo.png" - URL of the logo.

<a href="index.html> - link to the page in menu;
Homepage 1 - page's name.

<section class="section1">
    <div class="container clearboth">
        <div id="sitename">
            <a href="index.html" title="Family Church">
                <img src="images/logo.png" alt="Family Church">
            </a>
        </div>
        <nav id="mainmenu_area" role="navigation">
            <ul id="mainmenu">
                <li class="follow"></li>
                <li class="current-menu-item">
                    <a>Home</a>
                    <ul>
                        <li><a href="index.html">Homepage 1</a></li>
                        <li><a href="homepage-2.html">Homepage 2</a></li>
                    </ul>
                </li>
			...
        </nav>
    </div>
</section>

Choose your style.

To change the background style, you may add required class into <body> tag.

<body class="pattern1">
<body class="pattern2">
<body class="pattern3">
<body class="pattern4">
<body class="pattern5">

Parllax is placed into the block <div class="... parallax ...">. Each parallax has its own background stored in styles. To change the parallax theme, you need to add required class into the <div> tag.

<!-- Parallax Block (Theme 1) -->
                <div id="parallax_1" class="... parallax parallax_theme_lake">
                      ...
                </div>
                
<!-- Parallax Block (Theme 2) -->
                <div id="parallax_2" class="... parallax parallax_theme_lake">
                   ...
                </div>

You can find list of styles in css/style.css.

To change the theme's color you can go to css/style_color.css and rewrite the default color in all the styles.

Slider

The slider is placed into <div class="slideshow ...">. In <ul class="slides"> tags <li> contains one slide.

<img src="../image.jpg" alt=""> - URL of the image.

<div class="slideshow flexslider gallery arrows">
    <ul class="slides">
        <li>
            <img src="images/shortcodes/bigstock-sunset-and-clouds-12752522-360x203.jpg" alt="">
        </li>
        <li>
            <img src="images/shortcodes/446011_original_R_K_B_by_Margot-Kessler_pixelio.de_-360x203.jpg" alt="">
        </li>
        <li>
            <img src="images/shortcodes/Depositphotos_9766771_original-360x203.jpg" alt="">
        </li>
    </ul>
</div>

Text Slider

Text slider is placed into <div class="text_slider">. In <ul class="slides"> tags <li class="test_slide"> contains information about one slide.

<div class="slide_title">... - slide's title;
<div class="slide_content">... - slide's content;
<div class="slide_link">... - link to the post.

<div class="slideshow flexslider">
    <ul class="slides">
        <li class="test_slide">
            <div class="slide_title">
                Vestibulum eu dui gravida, facilisis
            </div>
            <div class="slide_content">
                <p>Curabitur sem felis, lobortis vel mattis ultricies, rutrum vitae tellus. Nam malesuada ornare justo, non tristique erat interdum vel. Praesent id rhoncus diam.</p>
            </div>
            <div class="slide_link">
                <a class="slide_more_link" href="post_format/format_standard.html">Read More</a>
            </div>
        </li>
		...
    </ul>
</div>

Video Player

Video player of a regular size is placed into <div class="... post_video">, reduced size - in <div class="... post_video_lttl">.

data-video="http://player.vimeo.com/video/84103278?wmode=opaque&autoplay=1" - URL of the video;
<img src="../image.jpg" alt=""> - original image.

<div class="video_frame_wrap post_video_lttl" data-video="http://player.vimeo.com/video/84103278?wmode=opaque&autoplay=1">
    <img src="images/shortcodes/01_Home_Style_1-9-720x406.jpg" alt="Video post format.">
    <span class="icon icon-play"></span>
</div>

Audio Player

Audio player is placed into <audio class="sc_audio>. In the tag 'src' you can change the audio's URL.

<audio src="files/sermon.mp3" class="sc_audio" style="width:100%; height: 60px"></audio>
<div class="audio_data"><span class="sc_audio_author">Macklemore & Ryan Lewis feat. Ray Dalton</span> – <span>Can't Hold Us</span>

Countdown block.

Timer is placed into <div class="countdown_block">. You may change time in attribute "data-time".

<div class="countdown_block style_1">
    <h2>Next event in:</h2>
    <div class="block_wrap">
        <div class="countdown" data-time="14 Jun 2014 08:00">
        </div>
    </div>
</div>

Download links.

Download links are stored in <div class="latest_sermon">.

href="files/sermon.mp4" - URL of the file
download="video" - download name

<div class="latest_sermon">
    <div class="sermon_wrap">
        <h2>Latest Sermon: Lorem ipsum dolor sit amet, consectetur. – March 18, 2014</h2>
        <ul class="sermon_downloads">
            <li><a href="files/sermon.mp4" download="video">...</a></li>
            <li><a href="files/sermon.doc" download="document">...</a></li>
            <li><a href="files/sermon.exe" download="program">...</a></li>
            <li><a href="files/sermon.mp3" download="audio">...</a></li>
        </ul>
    </div>
</div>

Social icons.

Social icons are stored in <ul class="socail_links">. Each icon is assigned a certain class (e.g. class="icon-facebook").

href="https://www.facebook.com/themerex" - link to your website.

<div class="social">
    <ul class="soc_list">
        <li>
            <a href="https://www.facebook.com/themerex">
				<span class="icon-facebook" title="facebook">
            </a>
        </li>
        ...
    </ul>
</div>

Google maps.

Google map is placed into <div class="sc_googlemap">.

data-map="New York, NY 10014" - address

<div class="gap_fullwidth fullwidth ">
    <div class="sc_googlemap" data-map="New York, NY 10014"></div>
</div>

Skills.

Skills is placed intto <div class="sc_skills">. The Chart uses percentage 0% to 100%. To change the percentage for the pie chart you need open "js/shortcodes.js" and change its value 'value:'.
Line chart percentage is set in <span class="sc_skills_level">.

var doughnutData = [{
    value: 20,
    color: "#23cbdb"
}, {
    value: 55,
    color: "#43dfee"
}, {
    value: 95,
    color: "#87edf7"
}, {
    value: 77,
    color: "#01b6c7"
}, {
    value: 17,
    color: "#01b6c7"
}, ];


<div id="xjjqjozfsfmx" class="sc_skills">
    <div class="sc_skills_item first">
        <div class="sc_skills_progressbar"><span class="sc_skills_level">20%</span><span class="sc_skills_caption">Missions</span><span class="sc_skills_progress_wrap"><span class="sc_skills_progress" data-width="20%"></span></span></div>
	</div>
	...
</div>

Columns/Sorting.

To set a number of columns in the block "Events", you need to add one of the classes "col2"/"col3"/"col4" into tag <div class="isotope_block events anim">.
You can short posts in "Events''. For sorting, assign its own class to each post: <div class="... latest-life-group past">. If you added a non-existing class, remember to add it into <ul class="iso_filters cats">.

<ul class="iso_filters cats">
	<li><a data-filter="your class" href="#">your class</a></li> 
	... 
</li>

<div class="container">
    <div class="isotope_block events anim col3" id="isotope_block_1">
        <h2 class="events_title">Events</h2>
		...
        <div class="events_posts iso_items isotope">
            <div class="tribe_events hentry isotope_single_item latest-life-group past">
                <div class="event_thumb">
                    <img alt="We bring heaven to earth through Christ in us" src="images/events/home_page_1/01_Home_Style_1-4-720x593.jpg">
                </div>
                <div class="event_caption">
                    <div class="event_info">
                        <div class="event_date">
                            January 13, 2014
                        </div>
                        <span class="divider"></span>
                        <a class="event_author" href="author_page.html">admin</a>
                    </div>
                    <h3 class="event_title"><a href="event_page.html">We bring heaven to earth through Christ in us</a></h3>
                    <a class="event_link_more" href="event_page.html">Read More<span>»</span></a>
                </div>
            </div>
        </div>
        <div class="more_link">
            <a class="load_posts_request" href="#"><span>Load More</span></a>
        </div>
    </div>
</div>

Format standard example.

Format standard post is palced in <article class="format-standard ...>. Author info is contained in <div class="additional">. Links for file downloads are contained in <ul class="sermon_downloads">. If pressing the button located in <div class="readmore">, you will be redirected to the page with the given post and its comments.

href="post_format/format_standard.html" - link to the post;
src="images/blog/01_Home_Style_1-3-1320x742.jpg" - URL of the image;
<div class="post_content"> <p>Lorem ipsum dolor ... - text content.

<article class="format-standard hentry post">
	<!-- author -->
    <div class="additional">
        <div class="post_author">
            <div class="user_pic">
                <a href="author_page.html">
                    <img src="images/blog/paul-11.jpg" alt="" />
                </a>
            </div>
            <div class="username"><a href="author_page.html">Paul Lazarus</a>
            </div>
        </div>
        <div class="posted_in">
            <span class="label">Posted</span><span class="post_cats">in <a href="blog.html">Sermons</a></span>
        </div>
    </div>
	<!-- /author -->
    <div class="extra_wrap">
        <div class="post_thumb">
            <a href="post_format/format_standard.html">
                <img alt="" src="images/blog/01_Home_Style_1-3-1320x742.jpg">
            </a>
        </div>
        <div class="post_content_wrap">
            <div class="post_info"><span>March 18, 2014</span>
            </div>
            <h2 class="post_title"><a href="post_format/format_standard.html">Lorem ipsum dolor sit amet, consectetur.</a></h2>
            <ul class="sermon_downloads">
                ...
            </ul>
            <div class="post_content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="readmore">
                    <a href="post_format/format_standard.html" class="more-link"><span class="readmore">Read more »</span></a>
                </div>
            </div>
        </div>
    </div>
</article>

Format video example.

Format 'video post' is contained in <article class="format-video ...>.

data-video="http://player.vimeo.com/video/84103278?wmode=opaque&autoplay=1" - URL of the video;
src="images/blog/01_Home_Style_1-9-1320x742.jpg" - image;
<div class="post_content"> <p>Lorem ipsum dolor ... - text content.

<article class="format-video hentry post">
    <!-- author -->
    <div class="additional">
        <div class="post_author">
            <div class="user_pic">
                <a href="author_page.html">
                    <img src="images/blog/cfg-8.jpeg" alt="" />
                </a>
            </div>
            <div class="username"><a href="author_page.html">Martin Moore</a></div>
        </div>
        <div class="posted_in">
            <span class="label">Posted</span><span class="post_cats">in <a href="blog.html">Uncategorized</a><br><a href="blog.html">Missons</a></span>
        </div>
    </div>
	<!-- /author -->
    <div class="extra_wrap">
        <div class="post_thumb post_video" data-video="http://player.vimeo.com/video/84103278?wmode=opaque&autoplay=1">
            <img src="images/blog/01_Home_Style_1-9-1320x742.jpg" alt="Video post format.">
            <span class="icon icon-play"></span>
        </div>
        <div class="post_content_wrap">
            <div class="post_info"><span>March 18, 2014</span>
            </div>
            <h2 class="post_title"><a href="post_format/video_format.html">Video post format</a></h2>
            <div class="post_content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="readmore">
                    <a href="post_format/video_format.html" class="more-link"><span class="readmore">Read more »</span></a>
                </div>
            </div>
        </div>
    </div>
</article>

Format gallery example.

Format 'gallery post' <article class="format-gallery ...>.

src="images/blog/01_Home_Style_1-2-1320x742.jpg" - slide;
<div class="post_content"> <p>Lorem ipsum dolor ... - text content.

<article class="format-gallery hentry post">
	<!-- author -->
    <div class="additional">
        <div class="post_author">
            <div class="user_pic">
                <a href="author_page.html">
                    <img src="images/blog/01_Home_Style_1-9-148x148.jpg" alt="" />
                </a>
            </div>
            <div class="username"><a href="author_page.html">John Smith</a></div>
        </div>
        <div class="posted_in">
            <span class="label">Posted</span>  <span class="post_cats">in <a href="blog.html">Uncategorized</a><br><a href="blog.html">Missons</a></span>
        </div>
    </div>
	<!-- /author -->
    <div class="extra_wrap">
        <div class="post_thumb">
            <ul class="slides">
                <li>
                    <img src="images/blog/01_Home_Style_1-2-1320x742.jpg" alt="">
                </li>
                <li>
                    <img src="images/blog/446809_original_R_K_B_by_Margot-Kessler_pixelio.de_-1320x742.jpg" alt="">
                </li>
                <li>
                    <img src="images/blog/446011_original_R_K_B_by_Margot-Kessler_pixelio.de_-1320x742.jpg" alt="">
                </li>
            </ul>
        </div>
        <div class="post_content_wrap">
            <div class="post_info">
                <span>March 18, 2014</span>
            </div>
            <h2 class="post_title"><a href="post_format/gallery_format.html">Gallery post format.</a></h2>
            <div class="post_content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <div class="readmore">
                    <a href="post_format/gallery_format.html" class="more-link"><span class="readmore">Read more »</span></a>
                </div>
            </div>
        </div>
    </div>
</article>

Format qoute example.

Format 'quote post' is contained <article class="format-quote ...>.

<div class="inner">... <p>Lorem ipsum dolor sit amet, consectetur...- text content.

<article class="format-quote hentry post">
	<!-- author -->
    <div class="additional">
        <div class="post_author">
            <div class="user_pic">
                <a href="author_page.html">
                    <img src="images/blog/cfg-8.jpeg" alt="" />
                </a>
            </div>
            <div class="username"><a href="author_page.html">Martin Moore</a>
            </div>
        </div>
        <div class="posted_in">
            <span class="label">Posted</span><span class="post_cats">in <a href="blog.html">Missons</a></span>
        </div>
    </div>
	<!-- /author -->
    <div class="extra_wrap">
        <div class="post_content_wrap">
            <div class="quote_wrap">
                <div class="inner">
                    <span class="icon-quote icon"></span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
                </div>
                <div class="bd_bot">
                    <span class="bdl"></span>
                    <span class="bdr"></span>
                </div>
            </div>
            <div class="post_title">ThemeREX</div>
            <div class="post_info">
                <span>March 18, 2014</span>
            </div>
        </div>
    </div>
</article>

Format audio example.

Format 'audio post' is located in <article class="format-audio ...>.

src="files/sermon.mp3" - URL of the audio;
<div class="post_content"><p>Lorem ipsum ... - text content.

<article class="format-audio hentry post">
	<!-- author -->
    <div class="additional">
        <div class="post_author">
            <div class="user_pic">
                <a href="author_page.html">
                    <img src="images/blog/cfg-8.jpeg" alt="" />
                </a>
            </div>
            <div class="username"><a href="author_page.html">Martin Moore</a></div>
        </div>
        <div class="posted_in">
            <span class="label">Posted</span>  <span class="post_cats">in <a href="blog.html">Missons</a></span>
        </div>
    </div>
	<!-- /author -->
    <div class="extra_wrap">
        <div class="post_thumb">
            <audio src="files/sermon.mp3" style="width:100%; height: 60px"></audio>
        </div>
        <div class="post_content_wrap">
            <div class="post_info"><span>March 18, 2014</span></div>
            <h2 class="post_title"><a href="post_format/audio_format.html">Audio post format.</a></h2>
            <ul class="sermon_downloads">
                ...
            </ul>
            <div class="post_content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <div class="readmore">
                    <a href="post_format/audio_format.html" class="more-link"><span class="readmore">Read more »</span></a>
                </div>
            </div>
        </div>
    </div>
</article>

Format link example.

Format 'link post' is contained in <article class="format-link ...>.

<a href="#" class="post_link">http://themeforest.net/user/wpspace</a> - the link.

<article class="format-link hentry post">
    <!-- author -->
    <div class="additional">
        <div class="post_author">
            <div class="user_pic">
                <a href="author_page.html">
                    <img src="images/blog/01_Home_Style_1-9-148x148.jpg" alt="" />
                </a>
            </div>
            <div class="username"><a href="author_page.html">John Smith</a></div>
        </div>
        <div class="posted_in">
            <span class="label">Posted</span>  <span class="post_cats">in  <a href="blog.html">Uncategorized</a></span>
        </div>
    </div>
	<!-- /author -->
    <div class="extra_wrap">
        <div class="post_content_wrap">
            <div class="post_info"><span>March 18, 2014</span></div>
            <div class="link_wrap">
                <a href="#" class="post_link">http://themeforest.net/user/wpspace</a>
            </div>
        </div>
    </div>
</article>

Format image example.

Format 'image post' is contained in <article class="format-image ...>.

<img alt="Image post format" src="images/blog/01_Home_Style_1-4-1320x742.jpg"> - URL of the image.
<h2 class="post_title">Image post format</h2> - heading.

<article class="format-image hentry post">
    <!-- author -->
    <div class="additional">
        <div class="post_author">
            <div class="user_pic">
                <a href="author_page.html">
                    <img src="images/blog/cfg-8.jpeg" alt="" />
                </a>
            </div>
            <div class="username"><a href="author_page.html">Martin Moore</a></div>
        </div>
        <div class="posted_in">
            <span class="label">Posted</span>  <span class="post_cats">in <a href="blog.html">Missons</a></span>
        </div>
    </div>
	<!-- /author -->
    <div class="extra_wrap">
        <div class="post_thumb">
            <a href="post_format/image_format.html">
                <img alt="Image post format" src="images/blog/01_Home_Style_1-4-1320x742.jpg">
            </a>
        </div>
        <div class="post_content_wrap">
            <h2 class="post_title">Image post format</h2>
        </div>
    </div>
</article>

Format status example.

Format 'status post' is contained in <article class="format-status ...>.

<div class="post_content"><p>Lorem ipsum dolor sit amet... - the content.

<article class="format-status hentry post">
    <!-- author -->
    <div class="additional">
        <div class="post_author">
            <div class="user_pic">
                <a href="author_page.html">
                    <img src="images/blog/01_Home_Style_1-9-148x148.jpg" alt="" />
                </a>
            </div>
            <div class="username"><a href="author_page.html">John Smith</a>
            </div>
        </div>
        <div class="posted_in"><span class="label">Posted</span>  <span class="post_cats">in <a href="blog.html">Missons</a></span></div>
    </div>
	<!-- /author -->
    <div class="extra_wrap">
        <div class="post_content_wrap">
            <div class="post_info"><span>March 18, 2014</span></div>
            <div class="post_content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
            </div>
        </div>
    </div>
</article>

Format aside example.

Format 'aside post' si contained in <article class="format-aside ...>.

<div class="post_content"><p>Ut enim ad minim veniam, quis... - the content.

<article class="format-aside hentry post">
    <!-- author -->
    <div class="additional">
        <div class="post_author">
            <div class="user_pic">
                <a href="author_page.html">
                    <img src="images/blog/cfg-8.jpeg" alt="" />
                </a>
            </div>
            <div class="username"><a href="author_page.html">Martin Moore</a></div>
        </div>
        <div class="posted_in"><span class="label">Posted</span><span class="post_cats">in <a href="blog.html">Missons</a></span></div>
    </div>
	<!-- /author -->
    <div class="extra_wrap">
        <div class="post_content_wrap">
            <div class="post_info"><span>March 18, 2014</span></div>
            <div class="post_content">
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>
    </div>
</article>

Format chat example.

Format 'chat post' is contained in <article class="format-chat ...>.

<article class="format-chat hentry category-missons 212 post">
    <!-- author -->
    <div class="additional">
        <div class="post_author">
            <div class="user_pic">
                <a href="author_page.html">
                    <img src="images/blog/cfg-8.jpeg" alt="" />
                </a>
            </div>
            <div class="username"><a href="author_page.html">Martin Moore</a></div>
        </div>
        <div class="posted_in"><span class="label">Posted</span>  <span class="post_cats">in <a href="blog.html">Missons</a></span></div>
    </div>
	<!-- /author -->
    <div class="extra_wrap">
        <div class="post_content_wrap">
            <div class="post_content">
                <ul>
                    <li>
                        <a href="#">Mike Newton</a>
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Jessica Brown</a>
                        <ul>
                            <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</article>

Contact form

An e-mail of a message receiver from the contact form can be specified in the file directory site...include/sendmail.php ('assets' folder), line 9:

$contact_email = 'your_mail@mail.com';

Contacts are stored in the contact.html file.

<div class="sc_column_item sc_column_item_1 odd first">
    <h3 class="sc_headline">Address:</h3>
    176 W street name</br>
    <br />New York, NY 10014
    <br />
</div>
<div class="sc_column_item sc_column_item_2 even">
    <h3 class="sc_headline">Phone:</h3>
    +1(800)123-4567
    <br />
</div>
<div class="sc_column_item sc_column_item_3 odd">
    <h3 class="sc_headline">Website:</h3>
    <a href="#">http://yoursitename.com</a>
    <br />
</div>
<div class="sc_column_item sc_column_item_4 even">
    <h3 class="sc_headline">Email:</h3>
    <a href="#">info@yoursitename.com</a>
    <br />
</div>

PSD Files

We've included 21 PSD files with this theme. All PSD files you can find in the folder PSD

Sources and Credits

This section discloses the sources of various files used within the theme and describes their function. Use this section to gain an understanding on how the theme functions behind the scenes if considering any type of modification.

Fonts:
- Raleway (non standard)
- Fontello (non standard, icons set)
- Arial (standard)

All non standard fonts are from Google Web Fonts and Fontello icons set

We have used the pictures from:
http://www.bigstockphoto.com/

All images are copyrighted to their respective owners and not available for download with this theme.

Additional information from ThemeREX:

“Theme Rex” support team is happy to greet you here! Our operators and developers are always glad to help our customers. Should you have any questions, you may contact us for support:

10.00 – 19.00 (CET), Monday till Friday.

What is important to know about ThemeREX Support Policy

To get a pre-purchase advice, you may post in the theme’s forum
To get a response more promptly, you are recommended to use our Ticket-system (just click on banner “Support Sys” on the item page)

Important!

We try to answer your questions within 5-10 hours. However, if any delay occurs it doesn’t mean that we forgot about you. Some of the issues require testing and analyzing, so we could help you more profoundly

We love to intercommunicate with our customers from all over the world. We always love to explain how our themes work. However, sometimes we have to say No:

Please, note! We do not support queries if you do not have a purchase code
Item support does not include:

Customization and installation services
Support for third party software and plug-ins

How to find a purchase key (see the screenshot):

open the ‘downloads’ tab in your account on ThemeForest
find our theme in the list of products
click ‘download’ button, and in the drop down meny select “license sertificate & purchase code”

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form from our Profile Page on ThemeForest. Thank you so much!