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.
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.
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.
Then open the default.css file to change fonts and find the
@import... element which loads the Google font and place
your copied code.
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;
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:
Add template to the koala
Set styles.sccs path to output pathstyles.css (With right
click of styles.scss)
Now open the style.scss in your text editor, find Replace
or Find and Replace function
As original text enter the red color #ff0000 (template default color)
As Replace with enter HEX value of blue color #0000ff
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.
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.
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.
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.
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".
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)
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.
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)
Important! If you add xxlxllgmdsm prefix before the class it will be consider
for large, medium and small screens. Please refer the default.css for more
classes.
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 xxlxllgmdsm prefix before the class it will be consider
for large, medium and small screens. Please refer the default.css for more
classes.
