CCIKM Documentation (v.1)

CCIKM is a hub for climate change related information, a platform for the management and publication of geospatial and time series data. It brings together different information linked to climate and environment under a consistent and easy-to-use interface allowing non-specialized users to share data and create interactive maps.

Important! CCIKM provide easy access of documentation through its library features, geospatial data through geoportal as well as time series data visualization of climate and hydrological stations of Bangladesh

It is also designed to be a flexible platform that other developers can access different information from the rest API.

Getting started

Before you dive into code, you we want you to explain how the template is structured and organized, what support is included, what tools did we have used etc.

Help & Support

Item support includes:
  • Availability of the author to feedback
  • Get assistance with reported bugs and issues
Item support does not include:
  • Customizations and installations

Support is node via email at

How to find a version of your template

Go to /css and open style.css. Here you can find a Version at the very top.

Folder Structure


Main (root) folder


Template style.css and other plugins CSS files.


Font Awesome (icons), et-line (icons), and revicons(revolutin slider icons) files.


Images that are used in the template.


Template main.js and other JS plugins.


Video that is used in the template.


Separate directory of the admin template.


Included agency, business adn consulting templates.

Image Placeholders

All images are replaced by placeholder due to copyright policy. We cannot include them in the package and sell it.


Template is build with mobile first approach. It is responsive and uses Bootstrap grid system. Base layout includes three sections.

  • Climate Impact Atlas
  • Climate Vulnerability Atlas
  • Time Series Map
<!--CSS includes-->

     <nav class="navbar navbar-expand-lg"><!--navbar--></nav>
    <section><!--section content--></section>

    //JS plugins includes

Climate Impact Atlas

Climate Impact Atlas is the wrapper for the header content - this includes topbar, logo and navigation content.


Climate Impact Atlas main header content wrapper.

Climate Vulnerability Atlas

section this tag gives the top and bottom padding.

Basic Customization

How To Edit Files

You can use whatever text editor you like, even default Text Editor in the OS. But we recommend to use the one with th syntax highlighting such as:

  • Sublime
  • Notepad++

How To Change Fonts

  1. If you are not satisfied with the default font, you can choose from hundreds ones from the Google Fonts. After you are happy with the selected font, click SEE SPECIMEN. You'll be redirected to to font detail. Then click Select this font. Popup window will show with text "1 Family Selected" - click it. Then you can customize your selection by clicking Customize. When you are done copy the text in import tab.
  2. Then open the default.css file to change fonts and find the @import... element which loads the Google font and place your copied code.
  3. Final step is to change the font family in the default.css file. Find body tag on the beginning of the file and font-family inside. Go back to Google Fonts page where you have chose your font and copy the line placed in the Specify in CSS. In this example it is font-family: 'Open Sans', sans-serif;

How To Change Colors - Simple Way

There are two methods how to change the main color. 1st Just by replacing the HEX color value in the styles.css (simple) and 2nd by installing koala or you can choose another compiler as well (advanced). Here is the simple way.

Let say, that you want to change the default red color to blue one:

  1. Add template to the koala
  2. Set styles.sccs path to output pathstyles.css (With right click of styles.scss)
  3. Now open the style.scss in your text editor, find Replace or Find and Replace function
  4. As original text enter the red color #ff0000 (template default color)
  5. As Replace with enter HEX value of blue color #0000ff

Font Awesome Icons

Font Awesome includes more than 600 icons that can be easily used on your site. For example you want the download link with the PDF icon.

  1. Go to Font Awesome Icons gallery and find the one you need. I our example it is file-pdf. Click the detail, then find and copy .
  2. Place the copied line to your link: Download File
  3. Final result: Download File

Bootstrap Utilities

Template is using Bootstrap utilities very often. We think that it is better solution as writing all styles for every element into CSS file. It makes the style.css smaller and it is more flexible. You can find more about Bootstrap Utilities.

Advanced Customization


JavaScript (JS) files/plugins are located in the /js folder and in the HTML file they are called using code. All JS files are located at the bottom of the HTML file. main.js file is the template's JS file that includes scripts for running other plugins.

Note: You will need to modify only main.js file. Read more about it in the Plugins section.

Styling the Background

You can easily change the color of the background without editing of the CSS files. This can be applied to whole section or particular element as well.

Background Color

To change the background color of the element use bg-* class.

Example: Change the background color of the section to black.

<section class="bg-black">
<h2>This Section is Black</h2>

Background Image

To add the background image of the element. You can also add an opacity using opacity-medium

Example: Background image with the 75% opacity:

 <section class="cover-background" style="background-image: url('image path');">
     <div class="opacity-medium bg-extra-dark-gray"></div>
     <div class="container"><!--content--></div>

Important! You can also change the opacity and color with changing of opacity-light | opacity-medium | opacity-full-dark | bg-extra-dark-gray | bg-black | bg-white classes.

Parallax Background

Easy background parallax effect is done using data-background. You can also change the speed and overlay of the parallax effect and overlay by adding data-stellar-background-ratio="0.5" and data-overlay-dark="6".

<div class="parallax" data-overlay-dark="6" data-background="image path" data-stellar-background-ratio="0.5">
        <div class="container"><!--content--></div>


Template uses Bootsrap form structure and brings some own styles.

Contact and News Letter Forms

Attention! You have to setup your own email address for email receiving. As a default it is addyour@emailhere and it is located in the quform/apply-job.php, quform/free-trial.php, quform/getin-touch-one.php, quform/newsletter-name.php, quform/newsletter-two.php, quform/request-call.php files on line 42 and 62. For more details please refer the form-documentation (documentation/form-documentation-quform/documentation).

Important! Make sure It will not work in local sytem or localhost, It will work when your site goes live. (If you don't receive email than once check spam folder as well)

Search Form

Attention! Search feature will not work without wamp or xamp in locally. It works only on a hosting-server with PHP enabled.

Important! Search result comes from the /search folder

Setup a path to HTML file

In your <form> element you need to specify a path to the .html file that will handle the search result.

<form class="search-form" action="search.html" method="GET" accept-charset="utf-8">
   <input type="text" name="s" />
   <a onclick="document.getElementById('search').submit()">Search</a>

Files needed to work with the form:

  • jquery.js – jQuery library (the form will work with this version of library only);
  • search.css – stylesheet file which is being used for stylization of the search results pages ;
  • search.html – page where the search results will appear;
  • search.js – script which is responsible for the search results output in an iframe on the page search.php;
  • results.php – PHP script which actually performs the search.

In this form we should define such parameters as: action="search.html" and method="get", also set parameter for an input: name="s". If you want to change the name of the search form, which is id="search" by default, you should change it on the line 3 in the file search.js as well, you can find it in search folder.


Here is the list of the JS plugins used in the template. Usually they are loaded from /js folder.

Important! Every JS plugin loaded from /js must be called BEFORE the main.js
<script src="js/jquery.min.js"></script>

<!-- Plugins from /js -->
<script src="js/main.js"></script>

Google Maps

Get your location from the map

You have to just copy and replace your location HTML code in the contact page. (You have to just keep iframe only, there are some CSS and DIVs which doesn't require)

Revolution Slider

Revolution Slider Documentation

Please send us mail at with your license ID if you want more details.


Template is using Bootstrap Utilities along with custom ones. Here is the list of available custom utilities:


  • border-all border for all side
  • border-width-1 border width 1px
  • border-color-white border color white
  • border-rounded border rounded
  • border-dotted border style

Font Size

  • display-7 to display-34
  • display-sm-1 to display-sm-34
  • display-md-1 to display-md-34
  • display-lg-1 to display-lg-34
  • display-xl-1 to display-xl-34

Important! If you add md and sm prefix before the class it will be consider for medium and small screens.

Font Weight

  • font-weight-100 font weight 100
  • font-weight-200 font weight 200
  • font-weight-300 font weight 300
  • font-weight-400 font weight 400
  • font-weight-500 font weight 500
  • font-weight-600 font weight 600
  • font-weight-700 font weight 700
  • font-weight-800 font weight 800
  • font-weight-900 font weight 900

Font Color

  • text-white white text color
  • text-black black text color
  • text-primary-color primary text color
  • text-secondary-color secondary text color


  • divider-full divide the items in a list with 1px border


  • m-1margin to all side
  • m-0 remove margin
  • mt-0 remove margin from top
  • me-0 remove margin from right
  • mb-0 remove margin from bottom
  • ms-0 remove margin from left
  • my-1 margin top and bottom
  • mx-1 margin left and right
  • m-md-1 for medium screen - margin to all side
  • m-sm-1 for small screen - margin to all side

Important! If you add xxl xl lg md sm prefix before the class it will be consider for large, medium and small screens. Please refer the default.css for more classes.

No Gutters

Removes padding from col*. Apply on row class

  • g-0 removes padding from cols


  • overflow-hidden overflow hidden
  • overflow-visible overflow visible
  • overflow-auto overflow auto
  • md-overflow-hidden medium screen overflow hidden
  • md-overflow-visible medium screen overflow visible
  • md-overflow-auto medium screen overflow auto
  • sm-overflow-hidden small screen overflow hidden
  • sm-overflow-visible small screenoverflow visible
  • sm-overflow-auto small screen overflow auto


  • position-inherit position inherit
  • position-relative position relative
  • position-absolute position absolute
  • position-fixed position fixed

Important! If you add md and sm prefix before the class it will be consider for medium and small screens.


  • opacity1 .1 opacity
  • opacity2 .2 opacity
  • opacity3 .3 opacity
  • opacity4 .4 opacity
  • opacity5 .5 opacity
  • opacity6 .6 opacity
  • opacity7 .7 opacity
  • opacity8 .8 opacity
  • opacity9 .9 opacity


Although, Bootstrap has p*-0 utility, but sometimes you need to remove just one side of padding and it is not possible with the same Bootstrap's padding utility.

  • p-1padding to all side
  • p-0 remove padding
  • pt-0 remove padding from top
  • pe-0 remove padding from right
  • pb-0 remove padding from bottom
  • ps-0 remove padding from left
  • py-1 padding top and bottom
  • px-1 padding left and right
  • p-md-1 for medium screen - padding to all side
  • p-sm-1 for small screen - padding to all side

Important! If you add xxl xl lg md sm prefix before the class it will be consider for large, medium and small screens. Please refer the default.css for more classes.


  • box-shadow box shadow
  • box-shadow-light light shadow
  • box-shadow-dark dark shadow
  • box-shadow-large large shadow
  • shadow-none No shadow
  • shadow-sm Small shadow
  • shadow Regular shadow
  • shadow-lg Larger shadow


  • width-10px 10px width
  • width-10 10% width
  • md-width-10px medium screen 10px width
  • md-width-10 medium screen 10% width
  • sm-width-10px small screen 10px width
  • sm-width-10 small screen 10% width

Important! If you add md and sm prefix before the class it will be consider for medium and small screens.


  • z-index-1111 z-index 111
  • z-index-111 z-index 111
  • z-index-99 z-index 99
  • z-index-1 z-index 1
  • z-index-2 z-index 2
  • z-index-3 z-index 3
  • z-index-4 z-index 4
  • z-index-5 z-index 4
  • z-index-0 z-index 0
  • z-index-minus2 z-index -2

Other Utilities

  • no-letter-spacing no letter spacing
  • letter-spacing-1 letter spacing 1
  • letter-spacing-2 letter spacing 2
  • letter-spacing-3 letter spacing 3
  • letter-spacing-4 letter spacing 4
  • letter-spacing-5 letter spacing 5
  • d-block display block
  • d-none display none
  • d-inline-block display inline block
  • d-inline display inline
  • d-inherit display inherit
  • d-table display table
  • d-table-cell display table cell


Template is using third party plugins. Here is the list of third party plugins:

Third Party Plugins (Attribution)