Thank you for purchasing 'NativeChurch' If you have any questions that are beyond the scope of this help file, please feel free to submit a ticket at our Support Forum. Thanks so much!
NativeChurch is a full functional HTML Template designed & developed for Church, Charity, Non-Profit and Religious Websites. It is fully responsive template based on Twitter Bootstrap 3.0 framework that makes it available for all screen sizes from the bigger ones to smartphones. Its not only responsive whereas it is retina ready also, now no blurry images on your HiDPI and retina devices.
NativeChurch is very easy to update and modify, it will adapt your website and brand in no time. Steps for modification and updating are described step by step in this exclusive documentation.
Whole template is divided in to several folders and their content defines by the folder names easily.
NativeChurch is based upon Twitter Bootstrap css framework that is very easy to use and adapt. It follows the mobile first approach to make the website readily available for all devices and screen sizes. Bootstrap grid is based upon 12 columns that are well defined in the bootstrap.css file inside the css folder. You can get to know about the grid system in detail from this url http://getbootstrap.com/css/#grid
NativeChurch used font awesome icon fonts for its icons requirement and no images has been used for any icon. A complete list of icons along with the class names can be found here: http://fontawesome.io/cheatsheet/
To use an icon on any page of the theme use the below code:
All icons class name will always start with the fa- . There are several sizes for icons are predefined in the fonts.css inside css folder. i.e. fa-lg, fa-2x, fa-3x
NativeChurch comes with 10 predefined color schemes to use it handy. All premade themes can be found inside colors folder of the theme directory. A new color scheme can be defined very easily just copy any of the premade color css file and keep it inside colors folder and name it as you like then just replace the color hex code in the file to your liking. Afterwards you will have to replace the name of the css in the head of each page like below:
This line can be found in every .html page in the top head section
NativeChurch doesn't come with images that you see in demo and in the downloaded files all images except the logo and some other graphics all images are replace with custom size place holders available from http://placehold.it/
You can easily repace these holders with your real images by just putting the same size image that you find in the link text of the placeholder "http://placehold.it/40x40&text=IMAGE+PLACEHOLDER" in the images folder. This example shows that this image will have to be 50px in width and 50px in height to look perfect on the website.
To change the date of upcoming event on homepage below slideshow is very much easy to change. To set the date of an event look for the below code in the index.html template:
dayshrsminssecs
In the above code "July 13, 2015 is the date of the event, which can be changed to any desired date and counter will do the rest itself
As this is a HTML template so the events on different pages are not synced automatically. They need to be entered separately on different pages. The example below describe how to setup events for the events-calendar.html page
$('#calendar').fullCalendar({ defaultDate: '2014-11-12', editable: true, eventLimit: true, // allow "more" link when too many events events: [ { title: 'All Day Event', start: '2014-11-01' }, { title: 'Long Event', start: '2014-11-07', end: '2014-11-10' }, { id: 999, title: 'Repeating Event', start: '2014-11-09T16:00:00' }, { id: 999, title: 'Repeating Event', start: '2014-11-16T16:00:00' }, { title: 'Conference', start: '2014-11-11', end: '2014-11-13' }, { title: 'Meeting', start: '2014-11-12T10:30:00', end: '2014-11-12T12:30:00' }, { title: 'Lunch', start: '2014-11-12T12:00:00' }, { title: 'Meeting', start: '2014-11-12T14:30:00' }, { title: 'Happy Hour', start: '2014-11-12T17:30:00' }, { title: 'Dinner', start: '2014-11-12T20:00:00' }, { title: 'Birthday Party', start: '2014-11-13T07:00:00' }, { title: 'Click for Google', url: 'http://google.com/', start: '2014-11-28' } ] });
The above code can be found at events-calendar.html template at the bottom of the code near the closing body tag. This example shows the events creation in several ways. More info and documentation about the plugin can be found here: http://fullcalendar.io/docs/ Div id "calendar" above is referring to blank div that is in the content part which will show calendar on the browser.
v1.4.2 of the NativeChurch template just got updated events calendar jquery plugin. As Google updated their api to not allow public feed URL of the calendar to show events on any domain. Now plugin have to use the oAuth/api key method to show events in this plugin calendar. For this see google-calendar.html template and at the bottom of this page near the closing body tag, this code can be found:>
$('#calendar').fullCalendar({ // THIS KEY WON'T WORK IN PRODUCTION!!! // To make your own Google API key, follow the directions here: // http://fullcalendar.io/docs/google_calendar/ googleCalendarApiKey: 'ENTER YOUR API KEY HERE', events: 'ENTER YOUR GOOGLE CALENDAR ID HERE', eventClick: function(event) { // opens events in a popup window window.open(event.url, 'gcalevent', 'width=700,height=600'); return false; }, loading: function(bool) { $('#loading').toggle(bool); } });
In the above code where you see "ENTER YOUR API KEY HERE" here your google application api key needs to be entered to get the access of the calendars. Go optain an api key just login to your google account and go to this URL: https://console.developers.google.com/project . Here you need to create a "New Project" a quick popup will come to enter the project name. Enter any name of your liking which you can remember as your website Google Calendar Events. After clicking the create button it will take few seconds to get it completed. Once its done click on "Enable and API" button to generate api key. On the next page search for "Calendar API" and click that link. On the enxt page toggle the "Off" button to make it "On".
Now on the left sidebar you can see "Credentials" link under APIs and auth heading. Click on it and on the next page click button create new key. On the popup opened click "Browser Key" and then click "Create". Done. Now you can see your API key on the following page. Just Copy that and paste as seen in the code above.
Next step is to get your Google Calendar "ID" and to get that go to your Google Calendars page here and click on any calendar's arrow which you want to share at the left sidebar under "My calendars" tab. On the popover click on "Calendar settings". Now on the next page you will find the calendar ID which needs to put in your page code as show above.
Creating new carousels are very easy. Just put the class "flexslider" to any div to get started and define the data attributes for the settings. For example see below:
To give lightbox effect to any link you can use the following method:
Your Link Text or img tag().
You can place a twitter widget anywhere on any page by just using:
data-tweets-count attribute will define how many tweets you want to show in the widget, by default its 1
To enable the twitter widget you need to get some info from your twitter account and put it in the config.php file in nativechurch-theme > api folder as described there.
Here are the steps to get the details needed for this
There are several contact forms in this theme and all are sharing a common file for this that is contact.php inside mail folder of the theme. Just find $address = "Your Email Here"; in this .php file and put the email you to receive submission forms to inside the quotes