You can make any header sticky simply by using a class i.e"stick"For example, if you want to make the header sticky, just add the class "stick" in this way:
<header class="stick">
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Rescue - Charity, Nonprofit, NGO & Fundraising Multipurpose HTML5 Template is a clean, highly flexible and beautifully designed Bootstrap HTML5 template. Rescue non profit charity templates holds unique yet simple layouts for each page that suit the best to your website’s advanced requirements. In this template we are going to include 5 demos on different charities (Ngo Organizations, Environment, Task force, Adopt a child, Political), Rescue every demo can also be used for different charities to build the websites easily for your nonprofit organization or foundation. These are not only the things that are facilitated to you via this one of the fantastic yet feature-rich nonprofit website templates, but also we have got 3 beautiful store page and shopping cart pages for you. This charity trust website template further holds ultimate short code resource, which gives you freedom to create the new pages with highly interactive features from scratch. It looks perfect on both wide screens and on portable devices.
This template contained following features;
Images are not included in the HTML files
You can make any header sticky simply by using a class i.e"stick"For example, if you want to make the header sticky, just add the class "stick" in this way:
<header class="stick">
There is a class, name “gray” in the coding. If you want a gray background, just apply the “gray” class. For a white background, you just need to remove the class “gray” from the code and the background will be automatically white.
For Gray Background:
<div class="block gray">
It is very simple to display your website in boxed style. On every HTML page, there is a "div" given with the class name web-lyut .
<div class="web-lyut">
You just need to add a class "boxed" in it, and the given HTML page will be converted to the boxed version.
<div class="web-lyut boxed">
When your website is converted to boxed style, you will also need an attractive body background to make it look beautiful. For this purpose, you will need to put some inline style in the "body" tag in this way
<body style="background-image: url("images/pattern1.png");">
For the top and bottom spacing for each section, the class "block"has been used, which applies 70 pixels spacing to the section both from the top and bottom.
You can manage the inter-section spacing easily according to your page flow.When you use sections one after another, the spacing between the two sections becomes 140 pixels as the bottom space of the top section and the top space of the bottom section will join, and it will become awkward spacing.To manage this spacing between the consecutive sections use class "remove-gap" with the "block" class in the section from which you want to avoid top space.
<div class="block remove-gap">
Auto Play Slideshow: If you want an auto play slideshow, go to Owl Carousel initialization and add the code “autoplay:true” there as illustrated below:
$('.services-carousel').owlCarousel({
autoplay:true,
autoplayTimeout:30000,
smartSpeed:2000,
loop:true,
dots:false,
nav:true,
margin:10,
singleItem:true,
items:1,
animateIn:"fadeIn",
animateOut:"fadeOut"
});
If you want to deactivate the feature of auto play, just remove the code “autoplay:true” from the Owl Carousel initialization. In this case, the slides can be switched with the help of navigation buttons provided to the sides.
Set Slide Switching through Fade In/Fade Out Animations: If you want the next slide switching through fading, use the code “animateIn:"fadeIn", animateOut:"fadeOut" in the Owl Carousel initialization as illustrated below:
animateIn:"fadeIn",
animateOut:"fadeOut"
Set Speed for Carousel Slides: You can set the sliding speed as per your taste. For this, enter the code “autoplayTimeout:30000, smartSpeed:2000” in the Owl Carousel initialization and change its value as you want. It is illustrated below:
autoplayTimeout:30000,
smartSpeed:2000
For further guidance, go to the live documentation of Owl Carousel by following this link:http://www.owlcarousel.owlgraphic.com/
In order to change the map location which is displayed on the contact page of the template. Open the "contact.html" file in an editor and go to bottom of that page you will see this:
/*================== Map =====================*/
function initialize() {
var myLatlng = new google.maps.LatLng(51.5015588, -0.1276913);
var mapOptions = {
zoom: 14,
disableDefaultUI: true,
scrollwheel:false,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = 'images/icon.png';
var myLatLng = new google.maps.LatLng(51.5015588, -0.1276913);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
In this code locate this line:
var myLatlng = new google.maps.LatLng(51.5015588, -0.1276913);
The two values in this code shows the latitude and longitude of the map. To change the location of the map you need to change these values. These values can be found from https://www.google.com/maps/. Go to https://www.google.com/maps/ and find your location. In the address bar you will see the two values separated with commas. Copy the values from the address bar and paste in the above code respectively. That's All.
There are three classes, namely "whitish" , "blackish" and "grayish" in the coding.
If you want to set blackish background in parallax section, just add the class "blackish" in this way:
<div class="block blackish"></div>
Similarly, if you want to set whitish background, just add the class "whitish" in this way:
<div class="block whitish"></div>
Similarly, if you want to set grayish background, just add the class "grayish" in this way:
<div class="block grayish"></div>
If you wish to change the color scheme of the template, it is very easy to define and apply it. Go to the "css" folder. In this folder, you can locate "color.css" file. Open it in the editor. You will see a long list of classes separated with commas (,). Here you need to change the css properties for the background, color and border. For this purpose, just change the color code in that file and the color scheme will be changed in the whole template.
A number of fully functional and ready to use widgets are included in the package. You can apply any of these widgets not only in the Sidebar and Footer, but also in the Content Area on any page. The coding for these widgets is included in the widgets.html page. So, for applying a widget at the desired place, you need to open the widgets.html page and locate the division containg the coding for that particular widget (say Contact Us). Copy the entire <div> for Contact Us Widget widget as shown below:
<div class="widget">
<h4 class="widget-title1">Contact Us</h4>
</div>
In the next step, you are to paste this code on the given page where you want to apply the “Gallery” widget. In this way, the “Gallery Widget” would be applied on the given place. Similarly, you can repeat the same process to apply any of the other available widgets as well. As you apply, each of the widgets has potential to automatically adjust itself with the parent class.
I'm using multiple CSS files in this theme.
The second file contains all of the specific stylings for the page. The file is separated into sections using:
/* === Header Section === */ some code /* === Main Section === */ some code /* === Sidebar Section === */ some code /* === Footer === */ some codeetc, etc.
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
Any images that are placed within the package section have 5px worth of padding and a light bluish background. If you would like to edit the display of these images, find the following section in the style sheet:
Responsive.css has media queries, to style the template on all devices
Color.css has all template primary colors.
This theme imports three Javascript files.
I've used the following images, icons or other files as listed.
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 a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Themextic