CoSpace's Documentation

This template using Bootstrap framework. Main content is placed between header and footer area. The content is nested within <div id="content">.

... header area ...

<div id="content">
     <div class="container">
          <div class="row">
               <div class="col-md-4">
                    this is your content			
               </div>
               <div class="col-md-8">
                    this is your content
               </div>
          </div>
     </div>

     <section>
          <div class="container">
               <div class="row">
                    this is your content
               </div>
          </div>
     </section>

</div>


... footer area ...
        

For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

Please read more for Bootstrap grid system here: https://getbootstrap.com/docs/5.0/layout/grid/

<div class="row">
     <div class="col-md-6"> this is 1/2 columns </div>
     <div class="col-md-6"> this is 1/2 columns </div>
</div>

<div class="row">
     <div class="col-md-4"> this is 1/3 columns </div>
     <div class="col-md-8"> this is 2/3 columns </div>
</div>

<div class="row">
     <div class="col-md-3"> this is 1/4 columns </div>
     <div class="col-md-9"> this is 3/4 columns </div>
</div>

To change text direction to RTL for whole pages on this template is very easy. You just need change one setting in file designesia.js. Change var rtl_mode to 'on'.

var rtl_mode = 'on'; // on - for enable RTL, off - for deactive RTL

To dsiable preloader you can change var preloader to 'off' in file designesia.js.

var preloader = 'off'; // on - for enable preloader, off - for disable preloader

For each template page, look at line 25 below

<link id="colors" href="css/colors/scheme-01.css" rel="stylesheet" type="text/css">

Replace scheme-01.css with another css file name. You can choose one of below:

• scheme-01.css - for teal color
• scheme-02.css - for blue violet color
• scheme-03.css - for green color
• scheme-04.css - for orange color
• scheme-05.css - for pink purple color
• scheme-06.css - for purple color
• scheme-07.css - for blue color

All premade color on this template can be found inside folder css/colors/.

Select an object that you want to animate. As example you want create animate for H1 element. You can see below:

<h1 class="wow fadeIn" data-wow-delay=".2s" data-wow-duration=".5s">Animate Text</h1>

• You must add class name "wow" for object that you want to animate.
• fadeIn: sample type of animation. You can see all animation available from: http://daneden.github.io/animate.css/
• data-wow-delay: determine when animation will start (on second)
• data-wow-duration: determine duration of animation (on second)

To make custom background color without touching css file, you can use code data-bgcolor="#hex-color" within your div/section tag. See sample below:

<div data-bgcolor="#333333">
     my div content...
</div>

To make custom background image without touching css file, you can use code data-bgimage="url(your-image-url)" within your div/section tag. See sample below:

<div data-bgimage="url(images/background/bg-1.jpg)">
     my div content...
</div>        

• jquery.min.js - http://docs.jquery.com/Downloading_jQuery
• bootstrap.min.js - bootstrap js file
• designesia.js - custom js file
• jquery.isotope.min.js - used in gallery page
• jquery.magnific-popup.min.js - used to open popup image
• easing.js - http://archive.plugins.jquery.com/project/Easing
• jquery.ui.totop.js - used to scroll to top
• validation.js - used for contact form validation

• animate.css - used to make animation
• bg.css - used to set background for all section and subheader
• bootstrap.css - main css framework for this theme
• color.css - used to load color for template
• magnific-popup.css - for maginfic popup jquery
• owl.carousel.css, owl.theme.css, owl.transitions.css - for owl carousel jquery
• plugin.css - overwrite default plugin css
• rev-settings.css - custom css for Revolution Slider
• style.css - main css file for this template