Template Help

Version 1.1

Cross Browser, High Quality and Responsive Portfolio HTML 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.

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.

Installation

Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be contents and folder with documentation. Copy all contents, except from folder with documentation, to your server via FTP client.

In this archive will not images, that you can see in demo pages, each images have absolute path from out server.

Preloader

Before the main contents of the website are loaded, there is an opportunity to show the preloader of the site. It can be any image, a gif-animated icon. You can change the path to the image. Look at the preloader.css file:

            5 : .preloader {
             background: url(../images/preloader.gif);
            }
        

If you don’t need the preloader, you can delete div with class preloader in each html files.

            <!-- Preloader -->
            <div class="preloader"></div>
        

Favicon

To change the favicon image of your site, you need to load a new image in a site root or to point out a new address of the image.

            <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
        

Color skins

Single project pages has 2 variants of background color:

  1. Light, by default with additional class skin-light.
  2. Dark, with additional class skin-dark for body.

The chosen theme changes text elements, background, all color headings, links. Find skin section in style.css file and you can change some properties.

Modular grid

Coventry is built on the system by using a 12-column markup. With the help of the given system you can create almost any modular grid and insert a necessary content into created modules. Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Twitter Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. All features and opportuntes you can use in this project. If you need create new table or add accordion or use navbar menu, just go to the appropriate section in Bootstraps documentation copy and paste example.

           <div class="row">
             <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
             <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            </div>
             
            <div class="row">
             <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
             <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
             <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            </div>
        

Of course, there are many other features you do not look for in twitter bootstrap this project has. A great amount of different sliders, counters, pricing table and so on.

Coventry uses custom bootstrap paddings and responsive grid layout. Generated using the Bootstrap Customizer http://getbootstrap.com/customize/?id=f4589971c1090e034bb5

Section Separators

To separate two section add <hr> code. By default, hr has top and bottom 30px margin, but using additional class you can change this values:

            <div class="container"> … </div>
            <hr class="large no-border"/>
            <div class="container"> … </div>
        

Typography

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline. Coventry uses from h1 to h4 headings.

Create lighter, secondary, italic text in any heading with a generic <em> tag.

Alignments

To adjust the content inside a structural element it’s necessary to add the classes text-left, text-center or text-right. To align by vertical you should use like-table structure with divtable and divcell classes:

            <div class="divtable text-center">
             <div class="divcell">
              <p>Vertical aligned Text with any height</p>
             </div>
            </div>
        

In addition to vertical align children block you have to add class middle.

Quotes

Text quote has blockquote tag and paragraph inside. You may add a footer for identifying the source.

            <blockquote>
                 <p>Gregor becomes annoyed at how his boss never accepts excuses or explanations from any of his employees no matter how hard-working they are, displaying an apparent lack of trusting abilities.</p>
                 <footer>— Sam Robertson</footer>
            </blockquote>
        

Font Settings

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

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

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

  1. 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 choice standard tab and copy this line.
  7. Paste this line to the all html pages into the head tag.
  8. At last, copy font-family name from Google Fonts website and paste on css/style.css: body { font-family: "Raleway", sans-serif; }.

Blog

This template contains all needed pages to create fully-worked and oriented for blog pages. Blog list presented in a carousel form. More about sliders read in a slider section. Also we considered many types of posts. Each post has additional class post.

Inside blog pages markup for articles similar as another pages and, of course, you can use all bootstrap styles too.

Portfolio

Home pages, like grid, masonry and mixed have portfolio works with category navigation. You can organize your portfolio according to the preset filters. At first, create works navigation with category:

                <ul class="nav-category">
                 <li><a href="#all" class="filter" data-filter="*">All Works</a></li>
                 <li><a href="#branding" class="filter" data-filter=".branding">Branding</a></li>
                 <li><a href="#logotype" class="filter" data-filter=".logotype">Logotypes</a></li>
                 <li><a href="#graphics" class="filter" data-filter=".graphics">Graphics</a></li>
                </ul>
            

Items of this list have obligatory class filter and data-filter attribute, which helps you divide works on needed category. Under this project were created isotope layout:

            <div class="isotope-wrap">
             <div class="col-md-4 col-xs-6 mix awarded other">
              <img src="img1.jpg" alt="">
              <a href="" class="mask">
               <h2><em>Awarded, Other</em> Great Desert</h2>
              </a>
             </div>
             <div class="col-md-4 col-xs-6 mix awarded nature">
              <img src="img2.jpg" alt="">
              <a href="" class="mask">
               <h2><em>Awarded, Nature</em> Bee</h2>
               <i class="icon-vimeo"></i>
              </a>
             </div>
             <div class="col-md-4 col-xs-6 mix seaside">
              <img src="img3.jpg" alt="">
              <a href="#vimeo-modal" data-toggle="modal" class="mask">
               <h2><em>Seaside</em> Clifs of Moher</h2>
               <i class="icon-vimeo"></i>
              </a>
             </div>
             …
        

Each of mix block should has filtering class: nature, landscape, awarded and etc; and title of your work. When you click one of the title new page or modal window with gallery or video will open.

To open gallery in a modal window, you should add data-toggle="modal" and write down modal id to href attribute of link:

            <a href="#gallery-modal" data-toggle="modal" class="mask">
             <h2><em>Landscape</em> Deep Forest</h2>
             <i class="icon-gallery"></i>
            </a>
        

After list of works add modal markup with description, titles and gallery of works. Modal should has modal id, close button and modal wrap. Gallery has one-image slider with unmarked list ul.

            <!-- Modal -->
            <div class="modal fade" id="gallery-modal">
             <a href="#" class="modal-close" data-dismiss="modal"></a>
             <div class="gallery-modal-wrap container-fluid">
              <div class="row">
               <header class="col-md-8 col-sm-10 col-md-offset-2 col-sm-offset-1">
                <div class="row">
                 <div class="col-xs-6">
                  <h2>Deep Forest</h2>
                 </div>
                 <div class="col-xs-6 text-right">
                  <nav class="gallery-categories">
                   <a href="">Landscape</a>
                  </nav>
                 </div>
                </div>
               </header>
              </div>
              <div class="slider modalslider col-md-8 col-sm-10 col-md-offset-2 col-sm-offset-1 text-center">
               <ul>
                <li>
                 <img src="img1.jpg" alt="">
                </li>
                <li>
                 <img src="img2.jpg" alt="">
                </li>
               </ul>
               <div class="slider-nav">
                <a href="" class="prev"></a>
                <a href="" class="next"></a>
               </div>
               <div class="slider-number"></div>
                <nav class="social">
                 <ul class="flat">
                  <li>
                   <a href="" class="fa fa-heart"></a>
                   <div class="dropdown-like">68</div>
                  </li>
                  <li>
                   <a href="" class="fa fa-share-alt"></a>
                   <div class="dropdown-share">
                    <a href="" class="share-pinterest"><i class="fa fa-pinterest"></i></a>
                   </div>
                  </li>
                 </ul>
                </nav>
               </div>
              </div>
            </div>
            <!-- /.modal -->
        

Portfolio Video

To open youtube or vimeo video in a modal you should add data-toggle="modal" and write down modal id to href attribute of link. See earlier. After list of works add modal markup with description, titles and video wrap.

            <!-- Modal -->
            <div class="modal fade" id="youtube-modal">
             <a href="#" class="modal-close" data-dismiss="modal"></a>
             <div class="gallery-modal-wrap container-fluid text-center">
              <div class="row">
               <div class="col-md-8 col-sm-10 col-md-offset-2 col-sm-offset-1">
                <nav class="gallery-categories">
                 <a href="">Landscape</a>
                </nav>
                <h2>Dakar Rally</h2>
                <div class="project-intro">
                 <div class="embed-responsive embed-responsive-16by9">
                  <iframe src="http://www.youtube.com/embed/rEk0AdJx9gw?feature=player_embedded" allowfullscreen></iframe>
                 </div>
                </div>
                <nav class="social">
                 …
                </nav>
               </div>
              </div>
             </div>
            </div>
            <!-- /.modal -->
        

Single Project

In addition to isotope/grid layout we have done some types of single project pages. All of this pages have different markup and unique design.

  1. Single Extended Dark;
  2. Single Extended Light;
  3. Single Gallery Dark;
  4. Single Gallery Light;
  5. Single Video Dark;
  6. Single Video Light;
  7. Single Sidebar.

Sliders

Sliders allow you to save space, animate and decorate your site. Under this theme there can be several sliders with different settings, which not depends on bootstrap settings.

The slider occupies the whole section by adding a special class slider or additional oneslider (for one-image gallery) to the parent block and some additional markup into it. In each of them there can be 12-columns system with various elements. For each slider we use carouFredSel slider. jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. And it's responsive too.

Each slider has additional parameters, which can use or not. All of this parameters add to ul list as data-attribute:

One-image Gallery

A responsive one-image gallery has a markup:

            <!-- SLIDER -->
            <div class="slider oneslider fullwidth">
             <ul>
              <li>
               <a href="#" class="background" style="background-image: url(img1.jpg);"></a>
              </li>
              <li>
               <a href="#" class="background" style="background-image: url(img2.jpg);"></a>
              </li>
             </ul>
             <div class="slider-nav">
              <a href="" class="prev"></a>
              <a href="" class="next"></a>
             </div>
            </div>
            <!-- /.slider -->
        
  1. Add classes slider oneslider into a parent block. Fullwidth class adds fixed height for slider;
  2. create a familiar section structure;
  3. ul – an marked list with slides;
  4. Sliders li elements can contain align classes;
  5. There is a content with a 12-column markup and a random set of elements in the slider.

Fullscreen Slider

One of the home page has fullscreen slider, which has a little parallax mousemove effect, mousewheel sliding, vertical direction and unique external description for each slide. Look at the html/home-fullscreen.html page for more details.

At first, add description in sidebar into slider-descr block. Description goes one by one. First description belongs to first slide, second to second and so on. Markup of description looks like:

            <div class="slider-descr">
             <div>
              <h1>
               <a href=""><em>Photography</em></a>
               <a href="">Under the bridge</a>
              </h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
              <a href="" class="navbar-toggle">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
              </a>
             </div>
             …
            </div>
        

Then add fullscreen slider. This slider should have fullscreen additional class, and looks much better if add data-fx="scroll" to list. Each slide it's background image with cover size. When you move mouse, image moves in opposite side, creating a little parallax effect. To add video, write down video tag with class html-video and add to video files: .webm and mp4.

On mobile devices video will not play, instead of you see static image, which add to video background-image.

            <!-- SLIDER -->
            <div class="slider fullslider">
             <ul data-fx="scroll" data-speed-animation="600">
              <li class="background" style="background-image: url(img-1.jpg)"></li>
              <li class="background" style="background-image: url(video.jpg)">
               <video loop muted class="html-video">
                <source src="video.webm" type="video/webm">
                <source src="video.mp4" type="video/mp4">
               </video>
              </li>
              …
             </ul>
             <div class="slider-nav slider-nav-vertical">
              <a href="" class="prev"></a>
              <a href="" class="next"></a>
             </div>
             <nav class="social">
              …
             </nav>
            </div>
            <!-- /.slider -->
        

Column Slider

Restricting the number of visible items to a minimum and maximum amount. The main difference between this slider and previous - instead of class oneslider goes colslider. Blog list page, services, contact page, category page has column slider as a main markup. Each column has fixed height equals window height and has hidden scrollarea. To add striped effect, you should write additional class odd for each slider in one. Markup:

            <!-- SLIDER -->
            <div class="slider colslider">
             <ul data-fx="scroll" data-circular="false">
              <li class="col-md-6">
               <div class="scrollpane">
                …
               </div>
              </li>
              …
             </ul>
             <div class="slider-nav">
              <div class="slider-number"></div>
              <a href="" class="prev"></a>
              <a href="" class="next"></a>
             </div>
            </div>
            <!-- /.slider -->
        

Pricing Slider

Only one difference for this slider it's adding additional class pricing to slider block. Each slide contains title, value, description rates and order now button. Look at the html/pricing.html page for more information.

Modal Slider

Into portfolio or any different pages you can create slider inside modal window. To do that, at first, you should add data-toggle="modal" and write down modal id to href attribute of link and next create markup for modal gallery with additional class modalslider for slider wrap:

            <!-- Modal -->
            <div class="modal fade" id="gallery-modal">
             <a href="#" class="modal-close" data-dismiss="modal"></a>
             <div class="gallery-modal-wrap container-fluid">
              <div class="slider modalslider">
               <ul>
                <li>
                 <img src="img-1.jpg" alt="">
                </li>
                <li>
                 <img src="img-2.jpg" alt="">
                </li>
                <li>
                 <img src="img-3.jpg" alt="">
                </li>
               </ul>
               <div class="slider-nav">
                <a href="" class="prev"></a>
                <a href="" class="next"></a>
               </div>
               <div class="slider-number"></div>
              </div>
             </div>
            </div>
            <!-- /.modal -->
        

Slider Navigation

For navigate slider uses slider arrows, slider numbers and slider pagination. Previous button should have class .prev, next buttons - .next. Pagination should have class slider-pagination Slider number, amounts of total slides and current slide has class slider-number.

Arrows and navigation are not obligatory. If the true definition is set up in the data-auto attribute, it means that slides will switch in a specified period of time without these elements.

After all of this slider examples you can use yourself or something new for each types.

Google Maps

contact.html page has google map container in a second slide. Mark up looks like:

            <div class="google-map-container" data-markers="51.513447,-0.1159143; 51.543447,-0.1359143" data-center="51.513447,-0.1159143" data-zoom="11"></div>
        

In html structure you may set all needed settings. Map may have single marker or many. To get the longtitude and latitude you can use the following service. Click a map and replace a marker into the place you need after switching to a link. Then insert the received coordinates into the data-markers separated by commas. Next one, data-center - write coordinates to the center map and the last data-zoom - the value of the map zoom.

Google map, by default, has 100% width and fixed height. This sizes may be changed in css/style.css file. To change marker color or add new color for new marker edit js/custom.js file global array:

            15: markersColor = ['#323232', '#E03C30', '#7FBA00']
        

If markers more than 3, another markers will have default first color in array.

Shortcodes

Accordions

Extend the default collapse behavior to create an accordion with the panel component. More details and examples look at the bootstrap page.

            <div class="panel-group">
                 <div class="panel">
              <div class="panel-heading">
               <a data-toggle="collapse" href="#clps-21">
                <i class="fa fa-folder-open-o fa-fw"></i>
                Accountabilities
               </a>
              </div>
              <div id="clps-21" class="panel-collapse collapse in">
               <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetuer leo, vel purus, nonummy dolor auctor quam.</p>
               </div>
              </div>
             </div>
            </div>
        

Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through :before and content

           <ol class="breadcrumb">
             <li>
              <a href="../index.html">Home</a>
             </li>
           </ol>
        

Buttons

Use the button classes on an <a>, <button> or <input> element. The simplest example:

            <a class="btn btn-default" href="">Order Now</a>
            <a class="btn btn-link" href="">Order Now</a>
            <button class="btn btn-default btn-wd" type="submit">Send</button>
        

Icons

We you use excellent Fontawesome service. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Over 500 new icons. For more examples go to example page.

            <i class="fa fa-camera-retro"></i> fa-camera-retro
            <i class="fa fa-home fa-fw"></i> Home
            <i class="fa fa-cog fa-fw"></i>Settings
        

Also, apart from fontawesome icons can be image icons. Any small image wrapped into block with class icon-img. In the services.html page you may find some examples.

            <div class="icon-img">
             <img alt="" src="icon.png">
            </div>
        

Charts & Counters

In the role of charts are the counters. Counters allow you to see the process of increasing any meaning to the required one when the counter area is in the visible browser screen. There can be several counters. To add a counter to the site create the div block with the class countup, after add obligatory attributes to it. If you add additional class progress-up the increasing border line will appear.

            <div class="countup" data-increment="70" data-num="3640"></div>
            — — —
            <div class="countup progress-up" data-increment="1" data-num="76" data-sign="%"></div>
        

Tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Of course, we use general Bootstrap markup for this purpose. Tho main types of example you find in shortcodes_tabs.html page. You can activate a tab navigation without writing any JavaScript by simply specifying data-toggle="tab" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in initial content. Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

            <ul class="nav nav-tabs">
             <li class="active"><a href="#details" data-toggle="tab">Details</a></li>
             <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
            </ul>
            <div class="tab-content">
             <div class="tab-pane fade in active" id="details">
              …
             </div>
             <div class="tab-pane fade" id="reviews">
              …
             </div>
            </div>
        

Logotypes

clients.html page has section with partners with additional class logotypes. By default, they are have opacity 25%, and hover effect increase opacity to 80%. To change this values, edit css/style.css file:

            503: .logotypes img {
             max-width: 280px;
             opacity: .25;
            }
             
            515: .logotypes a:hover img {
             opacity: .8;
            }
        

Footnotes

text.html page has footnotes section under maincontent. Footnote helps you to describe some unknown or notunderstand word. Each footnote is a item of unmarked list <ul class="flat">:

            <div class="footnotes">
             <ul class="flat">
              <li>
               <sup>1</sup>
               <p>Gregor is the main character of the story. He works as a traveling salesman in order to provide money for his sister and parents. </p>
              </li>
              <li>
               <sup>2</sup>
               <p>Grete is Gregor's younger sister, who becomes his caretaker after his metamorphosis. Initially Grete and Gregor have a close relationship, but this quickly fades.</p>
              </li>
             </ul>
            </div>
        

Share Links

In the each page of Coventry project you can find share links. Like it toggle link and dropdown social list. To change dropdown position from top to down, add class social-down. In html template this links have only markup and do not perform any functionallity. Structure has following markup:

            <nav class="social social-down">
             <ul class="flat">
              <li>
               <a href="" class="fa fa-heart"></a>
               <div class="dropdown-like">68</div>
              </li>
              <li>
               <a href="" class="fa fa-share-alt"></a>
               <div class="dropdown-share">
                <a href="" class="share-pinterest"><i class="fa fa-pinterest"></i></a>
                <a href="" class="share-google-plus"><i class="fa fa-google-plus"></i></a>
                <a href="" class="share-facebook"><i class="fa fa-facebook"></i></a>
                <a href="" class="share-twitter"><i class="fa fa-twitter"></i></a>
               </div>
              </li>
             </ul>
            </nav>
        

Backgrounds

For each section you have an opportunity to add background image, which will cover whole entire area. Add class background and background-image in inline style.

            <div class="background" style="background-image: url(image.jpg);">
             <a class="mask" href="">
              <h2>
               <em>Photography</em>
               Under the Bridge
              </h2>
             </a>
            </div>
        

Media

Coventry has there are many pages with responsive video embed, audio elements, html5 video background.

Audio

For audio player we use powerfull MediaElement plugin. HTML5 audio players in pure HTML and CSS.

            <audio src="http://demo.aisconverse.com/AirReview-Landmarks-02-ChasingCorporate.mp3" controls="controls"></audio>
        

Embed Video

For posts with video we use responsive embeded from Twitter Bootstrap Framework. Rules are directly applied to iframe elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

            <!-- 16:9 aspect ratio -->
            <div class="embed-responsive embed-responsive-16by9">
             <iframe class="embed-responsive-item" src=""></iframe>
            </div>

            <!-- 4:3 aspect ratio -->
            <div class="embed-responsive embed-responsive-4by3">
             <iframe class=embed-responsive-item" src=""></iframe>
            </div>
        

HTML5 Video

To add html5 video you should have 2 types of video: .webm and .mp4. Video may be loop, autoplaying, muted/unmuted. Tag video must have html-video class.

            <div class="background" style="background-image: url(http://media.aisconverse.com/video/sunrise-over-bjorkasjo.jpg)">
             <video loop muted class="html-video">
              <source src="http://media.aisconverse.com/video/sunrise-over-bjorkasjo.webm" type="video/webm">
              <source src="http://media.aisconverse.com/video/sunrise-over-bjorkasjo.mp4" type="video/mp4">
             </video>
            </div>
        

Mobile devices do not support html5 background video, instead of add class background to a parent block and write down background-image.

Team

Team has carousel structure. About sliders read slider section. Person has rounded image with hover effect. Code structure of it:

            <figure class="person">
             <img src="person.jpg" alt="" class="img-circle">
             <a class="mask img-circle" href="#person-1" data-toggle="collapse">
              <span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
              </span>
             </a>
            </figure>
        

Each person has modal window with full description about it or about vacancy. Modal are absolute and occupies the entire area of the parent section.

Feedback Form

Feedback

Feedback form may contain the following blocks:

All the areas must be in the form tag. The tag must have obligatory attributes:

Each area in the form must contain unique forms id, the name attribute and a not obligatory placeholder attribute, also required attributes, which need to validate form for sending. Id and name attributes must remain the same as shown above for the proper work and its further processing. The placeholder is a text which is shown to the user before inputting the main text in the area.

The sending button can be stylized by the code in the style sheet or by adding/changing the existing class. The text on the button is set up with the help of the value attribute.

If form areas are filled in the right way, after pressing the button there will appear a message with class succs-msg.

If areas are filled in the incorrect way or aren’t filled required fields, the class has-error is added to the parent block that hasn’t been validated. The invalid area style can be changed.

            1506 : .has-error input[type=text],
              .has-error input[type=email],
              .has-error input[type=number],
              .has-error input[type=url],
              .has-error input[type=password],
              .has-error input[type=search],
              .has-error textarea {
              color: #E13C30;
            }
        

In the php/email.php file you can change the address of message receiving, a message topic, also the whole text that will deliver to the administrator of the site.

  • define('EMAIL_ADMIN_SENT_TO', 'admin@gmail.com'); - an e-mail address to which a letter will be sent for the administrator template;
  • define('EMAIL_ADMIN_SUBJECT', 'Feedback letter from contacts form on Coventry'); - the topic of a letter for the administrator template;
  • define('EMAIL_CLIENT_SUBJECT', 'Feedback letter from Coventry'); - the topic of a letter for the sender;
  • $letterToAdmin = … - the template of a letter for the administrator;
  • $letterToClient = … - the template of a letter for the sender;
  • an e-mail on behalf of whom a letter is sent to the sender: $headers .= "From: feedback@Coventry.local\r\n";. \r\n obligatory to save at the end of the line.

Scrolltop Button

To scroll the template up, to its beginning, there is a special button that appears by scrolling the page down. To change its style you need to edit the css/style.css file.

            875 : .scrolltop {
             width: 55px;
             height: 55px;
             top: 50%;
             margin-top: -28px;
             right: 30px;
            }
             
            .scrolltop:hover {
             background-color: #1A1A1A;
            }
        

Also, to change offset position, when this button show, you have to edt js/custom.js file scrollTopButtonOffset global variable. And if you do not want to have scrolltop button at all, change variable scrollTopEnable to false:

            11 : scrollTopButtonOffset: 500
            12: scrollTopEnable: true, // false
        

Error Page

For special pages, like 403, 404, under construction used a few another markup. At first, you should add class error404 for body tag. This pages contains only sidebar section with menu button, heading and paragraph.