Calendarium Template Help

Version 1.0

Cross Browser, High Quality and Full Responsive HTML5 Coming Soon Template.

Thank you very much for purchasing our template. It is built with the latest HTML5 and CSS3 technologies, but at the same time it is also made compatible with older browser versions. If you have any questions that aren’t covered in this article, please feel free to email us on our user page, you can find the contact form here.

Don’t forget to rate this template, it helps us improve our products.

We invite you to view our portfolio.

Thanks so much!

Getting Started

Requirements

For installing this template you need to make sure that you have the following extensions on your webserver. You will need to contact your webhost if the following requirements are missing.

  • PHP 5.2+;
  • PHP Mail support;
  • Enabling JavaScript in the web browser.

Installation

Unzip the downloaded Calendarium file to the local disk on your computer. Inside the extracted folder there will be 2 folders labeled docs and html. Inside the html folder, rename the desired version to index.html and copy all the contents of the folder to your server via FTP client (e.g. Filezilla or Total Commander).

Slideshow

Slider Images

To change the image background you have to edit the file index.html. You have to add more images after this code to add images to the slideshow or remove current images. Download these images into the /slides folder. Resolution and image size can be of your choice. However, it is recommended not to exceed the images file size beyond 1MB. Filename can be anything and must be the same as previously written in the index.html code. The order of the slides is one by one as specified in index.html. In obligatory image attributes alt can be written with the name of the image or anything according to your choice.

                    161 : <img src="slides/001.jpg" alt="Slideshow Image">
                    162 : <img src="slides/002.jpg" alt="Slideshow Image">
                    163 : <img src="slides/003.jpg" alt="Slideshow Image">
                

But if you don’t specify any image, you will have a solid background color, and you can change that color choice in css/"theme-name".css.

                    5 : body            { background-color: #343434; }
                

Slideshow settings

To change the slideshow settings you have to edit the file js/custom.js.

                    6: sliderFx: 'slide',       // Slider effect. Can be 'slide' or 'fade'
                    7: sliderInterval: 8000,   // Interval between image change. Set 0 to disable auto slideshow
                    8: sliderSpeed: 500       // Speed of the slider effect in milliseconds
                

If you want to change a color overlay that covers the background slideshow, you will have to edit the css/slider.css background-color. To change the opacity, you will have to edit the opacity. The value should be between 0 and 1. The syntax of the code is mentioned below as an example:

                    7 : #slides .slides-container > div:before   {
                        background-color: #FFFFFF;
                        opacity: 0.5;
                    }
                

If you want to change a dot-textured overlay that covers the background slideshow you will have to edit css/slider.css. His name can be anything of your choice. By default, pattern.png. Pattern can be located in a folder /images.

                    6 : #slides .slides-container > div:after  {
                        background: url(../images/pattern.png) 0 0 repeat;
                        opacity: 0.5;
                    }
                

Panorama

To change the image background you will need to edit the file css/"theme-name".css. Download this image into the /panorama folder. Resolution and image size can be of your choice. However, it is recommended not to exceed the images file size beyond 1MB. Filename can be anything and must be the same as previously written in the css/panorama.css code.

                    39 : #panorama  { background-image: url(../images/panorama.jpg); }
                

Panorama settings

To change the panorama settings you have to edit the file js/custom.js.

                    9: panoramaDirection: 'left',       // Direction. Can be 'left' or 'right'
                    10: panoramaSpeed: 60,   // The higher the value, the slower the animation
                

If you want to change a color overlay that covers the panorama, you will have to edit the css/panorama.css background-color. To change the opacity, you will have to edit the opacity. The value should be between 0 and 1. The syntax of the code is mentioned below as an example:

                    8 : #panorama:before   {
                        background-color: #FFFFFF;
                        opacity: 0;
                    }
                

If you want to change a dot-textured overlay that covers the panorama you will have to edit css/panorama.css. His name can be anything of your choice. By default, pattern.png. Pattern can be located in a folder /images.

                    7 : #panorama:after  {
                        background: url(../images/pattern.png) 0 0 repeat;
                        opacity: 0;
                    }
                

YouTube movies as background

To enable YouTube video as background you have to remove class none in index.html file:

                    106 : <div id="ytvideo" class=""> /* add/remove class none to disable/enable video as background */
                

During loading video file from YouTube, you can change background image. That means, before the video is loaded you can manipulate slideshow.

YouTube video settings

To change the video settings you have to edit the file js/custom.js.

                    21 : loop: true,  // True or false loops the movie once ended.
                    22 : startAt: 0,  // Set the seconds the video should start at.
                    23 : autoPlay: true,  // True or false play the video once ready.
                    24 : showControls: false, // Show or hide the controls bar at the bottom of the page.
                    25 : addRaster: false, // Show or hide the background pattern image
                    26 : videoURL: 'youtu.be/EDir9-UoPjo', // background video URL
                    27 : mute: true // video sound
                

If you want to change a color overlay that covers the background video, you will have to edit the css/YTPlayer.css background-color. To change the opacity, you will have to edit the opacity. The syntax of the code is mentioned below as an example:

                    230 : .YTPOverlay{ background-color: #6D5333; opacity: 0; }
                

If you want to change a dot-textured overlay that covers the background video you will have to edit css/YTPlayer.css. His name can be anything of your choice. By default, pattern.png. Pattern can be located in a folder /images.

                    231 : .YTPOverlay.raster{ background: url("../images/pattern.png"); opacity: 0; }
                

Logo Settings

To change text logo, you have to edit index.html. Maximum lines of logo are two. If you use only one word or line of logo, you can remove second line or leave empty. If you want to hide text logo, you have to add class none.

                    29 : <span>CALENDARIUM</span> // first logo line
                    30 : <span></span> // second logo line (is empty)
                

If you want to show logo image, you have to remove class none. To change main logo you have to reload new logo image in a /images folder. If you have another name for your logo, you will have to edit index.html.

                    25 :  // change "src" and "alt" attribute (not required)
                

Visualization settings

To change the font size or color of your logo text, you have to edit css/header.css.

                    20 : #logo > a span:first-child{
                        color:#3f4d5b; /* change color for first line */
                    }
                    21 : #logo > a span:last-child{
                        color:#3CB878; /* change color for second line */
                    }
                    22 : #logo > a:hover span{
                        color:#3CB878; /* changing color after hovering */
                    }
                

Calendar

To hide calendar on any page, you have to replace class calendar to none in HTML page index.html. For example:

                    55 : 
                    56 : <div class="none"></div> 
                

The date on the calendar depends on the settings that are specified for the countdown and you can set the date in the js/custom.js

                    11: countdownTo: '2014/12/28', // Change this in the format: 'YYYY/MM/DD'
                

Visualization settings

To change the background-color you have to edit css/"theme-name".css.

                    33 : .calendar           { background-color:#32a6dc; } /* main background color */
                    34 : .calendar i         { background-color:#32a6dc; } /* bottom line background color */
                    35 : .calendar:before    { border-top: 70px solid #82d1f6; } /* right-down corner background-color */
                    36 : .calendar:after     { border-bottom: 70px solid #2b8dbb; } /* nearby the right-down corner background-color */
                

Buttons

To change the color, background-color and sizes for the button, you have to edit, at first, css/typography.css:

                    11 : .btn        {
                    14 : padding: 0 40px; /* left/right paddings */
                    15 : line-height: 43px; /* line height */
                    16 : height: 40px;   /* button height */
                    25 : font-size: 16px;    /* font-size */
                    26 : }
                

And, at second, you have to edit css/"theme-name".css:

                    12 : .btn        {
                        background-color: #32a6dc;
                        border-bottom: 5px solid #2b8dbb;
                    }
                    13 : .btn:hover  {
                        background-color: #82d1f6; /* hovering color */
                    }
                

On the home (main) page, you can replace the url for the button to the desired and name. Href attribute can be one of them: #home, #about, #subscribe, #team, #contact. This means, after you click the button to the relevant page without reloading, just as if the chosen link in the main menu. You have to edit index.html:

                    62 : subscribe 
                

Copyrights

To change the text of copyrights, you just have to edit index.html.

                    154 : <p class="copyrights">Made in <a href="http://aisconverse.com/" target="_blank">Aisconverse</a></p>
                

Replace href="http://aisconverse.com/" of link to your actual website.

Visualization settings

For changing the font size and the color, you will have to edit css/"theme-name".css.

                    45 : .copyrights, .copyrights > a         {
                        color:#404040;
                    }
                

Favicon Settings

To change the favicon you will have to reload a new favicon.ico in a site root. If you have another name for your favicon, you just have to edit index.html.

                    8 : <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"> // replace favicon.ico to file name
                

Font Settings

Typography

To change the font-family you will have to edit the file css/typography.css. If the font is a standard one, built the system by default, you can just write it here.

                    6 : body {
                        font-family: 'Arial', sans-serif;  /* or whatever you want (e.g. "Verdana") */
                    }
                

Also you can use Google Font and connect it to your website.

  1. Just go to http://www.google.com/fonts.
  2. Choose the appropriate font.
  3. Click the Quick-use button ().
  4. Choose the styles that you want;
  5. Choose the character sets that you want.
  6. Below that click on the @import tab and copy this line.
  7. Paste this line to that css/typography.css file on 3d line instead of the default (e.g.):
                                3 : @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
                            
  8. At last, copy font-family name from Google Fonts website and paste on css/layout.css:
                                3 : html, body            {
                                    font-family: 'Montserrat', sans-serif;
                                }
                            

Home page

Countdown

If you want to display the countdown block, you can remove class none from the HTML page index.html.

                    58 : <div id="countdown" class=""></div>
                

Countdown settings

You can set the date in the js/custom.js for the countdown.

                    11: countdownTo: '2014/12/28', // Change this in the format: 'YYYY/MM/DD'
                

Visualization settings

To change the color and font size, you have to edit css/"theme-name".css.

                    29 : #countdown span   {
                        font-size: 80px;
                        color:#b6c0ca;
                    }
                

To customize words days, hours, minutes and seconds, you have to edit css/"theme-name".css too.

                    30 : #countdown ins  {
                        font-size: 14px;
                        color:#d9e0e6;
                    }
                

Text Block Settings

To change the text of the headline, you will have to edit index.html.

                    60 : <h1>WE ARE COMING SOON</h1>
                

To change the font size, margin and text transform of main headline, you will have to edit css/typography.css.

                    6 : h1 {
                        font-size: 60px;
                        margin-bottom: 20px;
                        text-transform: uppercase;
                    }
                

To change the text under headline, you will have to edit index.html.

                    61 : 

We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks. We are open for breakfast, lunch and afternoon tea.

To change the font size, font family, line height of that text, you will have to edit css/layout.css.

                    16 : #content p  {
                        font-family: 'Open Sans', sans-serif;
                        font-size: 17px;
                        line-height: 24px;
                    }
                

About page

Text Block Settings

To change the text of the headline, you will have to edit index.html.

                    78 : <h1>About us</h1>
                

To change the text under headline, you will have to edit index.html.

                    79 : 

We serve freshly brewed tea and coffee, soft drinks and a section of light <a href="#">meals</a> and tasty treats and snacks. We are open for breakfast, lunch and afternoon tea from 8am to 5pm and unlike any other cafe in the town, we are open 7 days per week.

80 :

A truly family run business, we aim to create a cosy and friendly atmosphere in the cafe with Mum and Auntie doing the cooking and Dad and the children serving front of house.

Subscribe page

Paragraph before form

To change the paragraph text, you will have to edit index.html.

                    89 : 

A truly family run business, we aim to create a cosy and friendly atmosphere in the cafe with Mum and Auntie doing the cooking and Dad and the children serving front of house.

MailChimp Subscription Form

Newsletter settings

You need to change the Mailchimp's List URL in your index.html for the Newsletter form. Check this link How can I add my signup form on my website and try to insert correct URL from code in Step 5.

                    
                    
         

To change the validation messages, you will have to edit js/custom.js.

                    19 : successText: 'Thanks. You have successfully subscribed. Please check email to confirm.', // text after successful subscribing
                    20 : errorText: 'Please, enter a valid email' // text, if email is invalid
                

Visualization form settings

To change the background color and color of subscription form, you will have to edit css/"theme-name".css.

                    48 : #feedback-form input[type="email"] {
                        background-color: #333333;
                        color:#cccccc;
                    }
                    49 : #feedback-form input[type="email"]::-webkit-input-placeholder {
                        color:#cccccc; /* color of placeholder for webkit browsers */
                    }
                    50 : #feedback-form input[type="email"]::-moz-placeholder {
                        color:#cccccc; /* color of placeholder for gecko browsers */
                    }
                

To change the font size, height, font-family and text align of subscription form, you will have to edit css/newsletter.css.

                    14 : #feedback-form input[type="email"] {
                        height: 50px;
                        font-size: 17px;
                        font-family: 'Open Sans', sans-serif;
                        text-align: center;
                    }
                

Team page

Team list

To add new person to your team list, you have to copy/paste one of the previous li and edit it. You have to edit index.html file:

                    
  •      
      
        Alexey Houghton     Founder   
  • To remove the person on the list, just delete one of the li element.

    When you add/remove some person, other list items are automatically reconstructed.

    To change font size and line height to the name and staff position you have to edit css/team.css file:

                        14 : .team-list li.face div ins       {
                            font-size: 24px; /* font size name */
                            line-height: 25px; /* line height in general (distance between lines) */
                        }
                        15 : .team-list li.face div span      { font-size: 14px; } /* font size position */
                    

    To change background opacity for the list items you have to edit css/tem.css file too:

                        12 : .team-list li.face div.overlay{ opacity: 0.9; }
                    

    Contact page

    Google Maps

    Settings

    Edit thejs/custom.js file to configure the google map. At first, you can get the latitude and the longitude of a place from here. Now click on the map and move the marker or enter an address on the latitude and the longitude coordinates in "Get the Latitude and Longitude of a Point" block. Then you can insert your coordinates to custom.js code:

                        4 : locations: [-34.397, 150.644]	    // latitude and longitude coordinates to center the map on
                    

    After determined the coordinates start changing InfoBox.

                        13 : infoBoxName: 'Aisconverse',      // write the actual name in InfoBox
                        14 : infoBoxDescription: 'J. Savickio str. 4 Vilnius, LT-01108 Lithuania',   // write the actual address in Infobox.
                        17 : infoBoxUrl: 'http:⁄⁄aisconverse.com'      // write the actual url in InfoBox
                        18 : infoBoxUrlText: 'Aisconverse.com'      // write the url text
                    

    In the 14 line you may use <br> tag to enter the line breaks, do not separate paragraphs.