"coda" documentation by "AirFast" v1.2


"coda"

created: July 16, 2018
last update: September 7, 2018
by: AirFast
email: AirFast.88@gmail.com

Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


1. Getting started -
top

We assume you have basic knowledge of HTML / CSS and JS. In this doc, you will not learn how to code but you will learn how to setup, use and customize the theme. Before you begin to make sure you have a code editor, you can use a code editor like Notepad++ will be enough.

Features

All in this wonderful template is prepared for easy setup and use it:

  • fully responsive
  • clean and modern design
  • based on bootstrap 4
  • web friendly fonts
  • several color schemes
  • and more...

File/Folder structure

Within the download, you'll find the following file structure, logically grouped common assets.

Once downloaded, unzip the compressed folder to see the structure of the template. You'll see something like this:

coda/
├── css/
├── fonts/
├── img/
├── js/
├── libs/
├── index.html
└── other files
  • css: this folder contains all style files or stylesheets.
  • fonts: this folder contains all the fonts used for in the Template.
  • img: this folder contains all the images
  • js: this folder contains all the scripts
  • libs: this folder contains all the scripts and all style files or stylesheets separate auxiliary libraries

2. HTML Structure -
top

On opening the main index.html file. You can see the full HTML structure of the template. Every section of the template is properly commented so you can see which section starts/ends.

For example, you want to do one of the following:

Setting the color scheme

The template has three color schemes.

- coda-blue-color-scheme

- coda-pink-color-scheme

- coda-green-color-scheme

Now set the first, blue, color. If you want to change the color, find the following code:

...
<body id="coda-body" class="coda-blue-color-scheme">
...

You need to rewrite the attribute value, for example in this way class="coda-green-color-scheme"

Header

Editing information in header is very simple.

Change image. You can easily change image with some simple steps

  1. Prepare your image, resize it to 1920px width, save as a .jpg file (quality 70%) for the optimal image size to have a fast loading page.
  2. Copy your image to /img folder.
  3. Find the appropriate section code and change image URL in the markup.

These actions apply to all photos for your template.

Want to change the background image in header? Open in the editor index.html. Find this code and change image URL:

<!-- Start Header -->
<header id="coda-about" class="coda-header" style="background-image: url(img/woman-header.jpg)">
    <!-- header background image -->
    <img class="coda-background-img" src="img/woman-header.jpg" alt="header image">
    <!-- end header background image -->

URL is placed in this attributes style="background-image: url(img/woman-header.jpg)" and src="img/woman-header.jpg"

Do you want to change the text in the header? Open in the editor index.html. Find this code and change a text in it:

<!-- Start Header -->
<header id="coda-about" class="coda-header" style="background-image: url(img/woman-header.jpg)">
    ...
    <div class="coda-header-text">
        ...
        <!-- profession -->
        <p class="coda-profession">ui/ux designer</p>
        <!-- end profession -->
        <!-- first name, last Name -->
        <h1 class="coda-name">Tawita Owens</h1>
        <!-- end first name, last Name -->
        <!-- "About me" button -->
        <a href="#about" class="coda-underscore coda-pop-up-btn">learn more about me<i class="coda-left-arrow-ico"></i></a>
        <!-- end "About me" button -->
        ...
    </div>
</header>
<!-- End Header -->

In this code snippet is placed your profession <p class="coda-profession">ui/ux designer</p>

In this code snippet is placed your name <h1 class="coda-name">Tawita Owens</h1>

Would you like to change the information in the pop-up window About me? All code for pop-up windows is placed at the bottom of the index.html file. For an example, let's take a pop-up window About me. Find this code and change image URL or add another new image:

<!-- Start About me (Pop-up window) -->
<div id="about" class="coda-pop-up-window">
    ...
    <!-- pop-up window content, article -->
    <article class="coda-pop-up-content">
        ...
        <div class="coda-sticky">
            <div class='coda-video-responsive'>
                <iframe src="https://player.vimeo.com/video/76979871" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
            <img class="coda-img-responsive" src="img/man-header.jpg" alt="text">
        </div>
        ...
    </article>
    <!-- end pop-up window content, article -->
</div>
<!-- End About me (Pop-up window) -->

URL is placed in this attribute src="img/man-header.jpg"

If you want to add another image, insert this html code <img class="coda-img-responsive" src="img/url-for-image.jpg" alt="text">

If you want to add video, insert the html code of such sample

<div class='coda-video-responsive'>
    <iframe src="https://player.vimeo.com/video/76979871" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

This may be Vimeo or Youtube video, copy the html code that you will generate the video player to insert. Just do not specify the width and height for the video, the template will automatically adjust the size of the area for the video.

Edit information about yourself, add a brief description this:

<!-- Start About me (Pop-up window) -->
<div id="about" class="coda-pop-up-window">
    ...
    <!-- pop-up window content, article -->
    <article class="coda-pop-up-content">
        ...
        <div class="coda-sticky">
            <header class="coda-pop-up-header">
                <h3>About me</h3>
            </header>
            <p>Phasellus tortor eros, ...</p>
            ...
            <footer class="coda-pop-up-footer">
                <dl class="coda-description-container">
                    <div class="coda-description-item">
                        <dt class="coda-description-name">date fo birth:</dt>
                        <dd class="coda-description-data">27 july 1987</dd>
                    </div>
                    <div class="coda-description-item">
                        <dt class="coda-description-name">profession:</dt>
                        <dd class="coda-description-data">web developer</dd>
                    </div>
                    <div class="coda-description-item">
                        <dt class="coda-description-name">languages spoken:</dt>
                        <dd class="coda-description-data">english, german</dd>
                    </div>
                </dl>
            </footer>
        </div>
        ...
    </article>
    <!-- end pop-up window content, article -->
</div>
<!-- End About me (Pop-up window) -->

You can insert this part of the code to enlarge the description of yourself:

<dl class="coda-description-container">
    ...
    <div class="coda-description-item">
        <dt class="coda-description-name">hobby:</dt>
        <dd class="coda-description-data">basketball, crossfit</dd>
    </div>
</dl>

Below is how to create your own popup windows.

Editing sections

Change text or some element is also very easy.

Find the appropriate section or block code and change a text or element in the markup. Let's go from the top to the bottom of the page.

How to create categories in the Portfolio section? Open in the editor index.html. Find this code and change it:

<!-- portfolio filter navigation -->
<div class="col-md-10 col-12">
     <ul class="coda-filter-nav">
        <li class="coda-filter-nav-item coda-underscore" data-filter="all">all</li>
        <li class="coda-filter-nav-item coda-underscore" data-filter="1">web design</li>
        <li class="coda-filter-nav-item coda-underscore" data-filter="2">ui design</li>
        <li class="coda-filter-nav-item coda-underscore" data-filter="3">illustration</li>
    </ul>
</div>
<!-- end portfolio filter navigation -->

This code snippet contains navigation for your portfolio. You can customize the navigation to their needs. You can add or change categories.

In this code snippet there is a navigation item that will represent all your works <li class="coda-filter-nav-item coda-underscore" data-filter="all">all</li> If you want to change its name.

The following navigation elements are responsible for each specific category. Let's add a new category.

Insert this code snippet <li class="coda-filter-nav-item coda-underscore" data-filter="ux-design">ux design</li> It should be noted that this attribute data-filter="ux-design" contains information about the category for which it will respond. In this simple way, we added a new category.

Binding portfolio items to the appropriate category. Now find this code and change it:

<!-- portfolio items container -->
<div class="row filtr-container coda-filter-container">
    <!-- portfolio item, article -->
    <article class="col-lg-6 col-12 filtr-item coda-filter-item" data-category="1" data-sort="value">
        <div class="coda-portfolio-item">
            <img class="coda-img" src="img/web-design-1.jpg" alt="sample">
            <div class="coda-portfolio-item-content">
                <header class="coda-portfolio-item-header">
                    <h3><a href="#travel" class="coda-underscore coda-pop-up-btn">Travel agency</a></h3>
                </header>
            </div>
        </div>
    </article>
    <!-- end portfolio item, article -->
    ...
</div>
<!-- end portfolio items container -->

Inside the container, add a new portfolio item, this way:

<!-- portfolio items container -->
<div class="row filtr-container coda-filter-container">
    ...
    <!-- portfolio item, article -->
    <article class="col-lg-6 col-12 filtr-item coda-filter-item" data-category="ux-design" data-sort="value">
        <div class="coda-portfolio-item">
            <img class="coda-img" src="img/ux-design.jpg" alt="sample">
            <div class="coda-portfolio-item-content">
                <header class="coda-portfolio-item-header">
                    <h3><a href="#ux-design-pop-up-window" class="coda-underscore coda-pop-up-btn">UX design, work name</a></h3>
                </header>
            </div>
        </div>
    </article>
    <!-- end portfolio item, article -->
</div>
<!-- end portfolio items container -->

In order to attach a portfolio item to the appropriate category in the filter, we specify the category name in this attribute: data-category="ux-design"

Also, change the photo for the project, URL is placed in this attribute: src="img/ux-design.jpg"

We also need to specify the name of the pop-up window in this attribute: href="#ux-design-pop-up-window" Then write the name of the project.

Now we will create the corresponding popup window.

How do I create a popup window? In fact, the code structure of the popup window is:

<!-- Start Pop-up window -->
<div id="pop-up-id" class="coda-pop-up-window">
    <div class="coda-pop-up-top-panel">
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-auto">
                    <!-- close pop-up window button -->
                    <a href="#pop-up-id" class="coda-pop-up-btn">
                        <div class="coda-close-ico">
                            <span class="coda-label">close</span>
                            <div class="coda-close-wrap">
                                <span class="coda-close-horizontal"></span>
                                <span class="coda-close-vertical"></span>
                            </div>
                        </div>
                    </a>
                    <!-- end close pop-up window button -->
                </div>
            </div>
        </div>
    </div>
    <!-- pop-up window content, article -->
    <article class="coda-pop-up-content">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-md-5 col-12">
                    <div class="coda-sticky">
                        <header class="coda-pop-up-header">
                            <h3>Title</h3>
                        </header>
                        <p>Some information.</p>
                        ...
                        <footer class="coda-pop-up-footer">
                            <dl class="coda-description-container">
                                <div class="coda-description-item">
                                    <dt class="coda-description-name">the name of the additional description:</dt>
                                    <dd class="coda-description-data">additional description</dd>
                                </div>
                                ...
                            </dl>
                        </footer>
                    </div>
                </div>
                <div class="col-md-6 col-lg-5 col-12">
                    <div class="coda-sticky">
                        <div class='coda-video-responsive'>
                            <iframe src="https://player.vimeo.com/video/76979871" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                        </div>
                        <div class='coda-video-responsive'>
                            <iframe src="https://www.youtube.com/embed/pRxwMbWIsFk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        </div>
                        <img class="coda-img-responsive" src="img/image-for-popup-window.jpg" alt="text">
                    </div>
                </div>
            </div>
        </div>
    </article>
    <!-- end pop-up window content, article -->
</div>
<!-- End Pop-up window -->

You can use this snippet as the initial structure for your popup window.

Now this code snippet should be placed outside this code (file index.html can serve as a sample).

</main>
<!-- End Main content -->

We will link the popup window to our previously created portfolio item. Now in the code of the popup window we will find the following code snippet:

...
<div id="pop-up-id" class="coda-pop-up-window">
...

Replace the attribute id="pop-up-id" on id="ux-design-pop-up-window"

Now find the following code snippet:

...
<!-- close pop-up window button -->
<a href="#pop-up-id" class="coda-pop-up-btn">
...

This snippet is a button code that closes the popup window. Accordingly, she needs to specify which window to close. Therefore, this attribute href="#pop-up-id" replace by href="#ux-design-pop-up-window" Your popup window is ready to go. All you have to fill it with relevant information about the project.

How to add timeline items? In the Experience section, find the following code:

<div class="col-md-5 col-12 coda-experience-timeline-content">
    <!-- experience timeline for education -->
    <div class="coda-experience-timeline">
        <div class="coda-timeline-label">timeline</div>
        <!-- experience timeline caption -->
        <div class="coda-experience-timeline-caption">
            <p class="coda-time-interval">2004 - 2007</p>
            <h4 class="coda-underscore">College</h4>
        </div>
        <!-- end experience timeline caption -->
        ...
    </div>
    <!-- end experience timeline for education -->
    <!-- experience timeline for work -->
    <div class="coda-experience-timeline">
        <div class="coda-timeline-label">timeline</div>
        <!-- experience timeline caption -->
        <div class="coda-experience-timeline-caption">
            <p class="coda-time-interval">2014 - present</p>
            <h4 class="coda-underscore">Freelance</h4>
        </div>
        <!-- end experience timeline caption -->
        ...
    </div>
    <!-- end experience timeline for work -->
</div>

Choose the experience you want to add, whether it is education or work?

For example, you want to add your new place of work. Then the code will look like this:

<div class="col-md-5 col-12 coda-experience-timeline-content">
    ...
    <!-- experience timeline for work -->
    <div class="coda-experience-timeline">
        <div class="coda-timeline-label">timeline</div>
        <!-- experience timeline caption -->
        <div class="coda-experience-timeline-caption">
            <p class="coda-time-interval">2017 - present</p>
            <h4 class="coda-underscore">Some awesome work</h4>
        </div>
        <!-- end experience timeline caption -->
        <!-- experience timeline caption -->
        <div class="coda-experience-timeline-caption">
            <p class="coda-time-interval">2014 - 2017</p>
            <h4 class="coda-underscore">Freelance</h4>
        </div>
        <!-- end experience timeline caption -->
        ...
    </div>
    <!-- end experience timeline for work -->
</div>

So you add a brief description of your work place, it will appear in the timeline. Now we need to add a wider description, find the following code and add it as follows:

...
<!-- experience description item for work -->
<div class="coda-experience-description-item">
    <!-- experience description article -->
    <article class="coda-experience-description">
        <header class="coda-experience-article-header">
            <p class="coda-time-interval">2017 - present</p>
            <h3>Some awesome work</h3>
        </header>
        <p>Some awesome work description ...</p>
    </article>
    <!-- end experience description article -->
    <!-- experience description article -->
    <article class="coda-experience-description">
        <header class="coda-experience-article-header">
            <p class="coda-time-interval">2014 - 2017</p>
            <h3>Freelance</h3>
        </header>
        <p>At commodi, consequatur consequuntur corporis cumque ...</p>
        <p>A accusantium aliquam, blanditiis ...</p>
    </article>
    <!-- end experience description article -->
    ...
</div>
<!-- end experience description for work -->

Now everything is ready, you have added complete information about your new place where you work. It was easier than you thought.

How do I add a description of my work skills? Time to describe all your working skills. There is one feature here, you can publish your skills as you own with a percentage rating and just a skill with a wider description. We will consider both options. Add your new skill this way. Find and paste the following code:

<!-- skills bar container -->
<div class="col-md-5 col-12 coda-skills-bar-container">
    <!-- skill bar -->
    <div class="coda-skill-bar" data-percent="97">
        <div class="coda-skill-bar-title">wordpress</div>
        <div class="coda-skill-bar-percent"><span class="coda-skill-count">97</span>%</div>
        <div class="coda-skill-bar-bar"></div>
    </div>
    <!-- end skill bar -->
    <!-- skill bar -->
    <div class="coda-skill-bar" data-percent="90">
        <div class="coda-skill-bar-title">html</div>
        ...

This was the first option. Consider the second one. Now, find and paste the following code:

<!-- skills term list -->
<dl class="coda-skills-term-list">
    <!-- skill term -->
    <div class="coda-skill-term-box">
        <dt class="coda-skill-term-name"><span class="coda-underscore">wordpress</span></dt>
        <dd class="coda-skill-term-description"><span class="coda-term-name">wordpress</span> - Skill description ...</dd>
    </div>
    <!-- end skill term -->
    <!-- skill term -->
    <div class="coda-skill-term-box">
        <dt class="coda-skill-term-name"><span class="coda-underscore">html</span></dt>
        <dd class="coda-skill-term-description"><span class="coda-term-name">html</span> - Hypertext Markup Language is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.</dd>
    </div>
    <!-- end skill term -->
    ...

Done!

Add your contact information. You are almost professional. Find the code and just make the appropriate changes. I think it will be easy for you to do this.

<!-- contacts data -->
<div class="col-md-6 col-12">
    <dl class="coda-contacts-container">
        <!-- contact item -->
        <div class="coda-contact-item">
            <dt class="coda-contact-name">phone:</dt>
            <dd class="coda-contact-data"><a href="tel:+544 4779 225" class="coda-contact-link coda-underscore">+544 4779 225</a></dd>
        </div>
        <!-- end contact item -->
        <!-- contact item -->
        <div class="coda-contact-item">
            <dt class="coda-contact-name">email:</dt>
            <dd class="coda-contact-data"><a href="mailto:coda@email.com" class="coda-contact-link coda-underscore">coda@email.com</a></dd>
        </div>
        <!-- end contact item -->
        <!-- contact item -->
        <div class="coda-contact-item">
            <dt class="coda-contact-name">follow me on</dt>
            <dd class="coda-contact-data"><a href="https://www.facebook.com" class="coda-contact-link coda-underscore">facebook</a><a href="https://twitter.com" class="coda-contact-link coda-underscore">twitter</a><a href="https://www.instagram.com" class="coda-contact-link coda-underscore">instagram</a></dd>
        </div>
        <!-- end contact item -->
    </dl>
</div>
<!-- end contacts data -->

Just do not forget to specify the correct links in this attribute href="https://www.facebook.com"

Footer

What! But this is a easy task for you now. You have mastered the basic skills of working with html, its logic. Congratulations!


3. CSS Structure -
top

We using one CSS files in this template, in which you can make changes. This file is here: css/main.css. All other files should not be edited.

This file contains all of the specific stylings of the page. In the file of styles, everything is well commented. Its structure looks like this:

/* ------------------------------------------------------
  Stylesheet Guide
  ------------------------------------------------------

    1. Global
        1.1. Fonts
            1.1.1. Header font - Abril Fatface
            1.1.2. Text font - Open Sans
        1.2. General styles
        1.3. Color scheme
            1.3.1. Blue (#4aa8fa) - Color scheme
            1.3.2. Pink (#fa5a88) - Color scheme
            1.3.3. Green (#2ddf7b) - Color scheme
        1.4. Preloader
        1.5. Typography
        1.6. Custom class
        1.7. Icons class
    2. Header
        2.1. Top panel, logotype
        2.2. Header text
    3. Section
        3.1 Section header
        3.2. Portfolio section
            3.2.1. Portfolio filter navigation
            3.2.2. Portfolio filter item
        3.3. Experience section
            3.3.1. Experience filter navigation
            3.3.2. Experience timeline
            3.3.3. Experience content
        3.4. Skills section
            3.4.1. Skills bar
            3.4.2. Skills term
        3.5. Contacts section
            3.5.1. Contact details
            3.5.2. Contact form
    4. Footer
    5. Pop-up window
    6. Media queries

------------------------------------------------------ */

/* ------------------------------------------------------
    1. Global
------------------------------------------------------ */

    /* ------------------------------------------------------
        1.1. Fonts
    ------------------------------------------------------ */

        /* ------------------------------------------------------
            1.1.1. Header font - Abril Fatface
        ------------------------------------------------------ */

            @font-face {
              font-family: "Abril Fatface";
              font-weight: normal;
              font-style: normal;
              src: url("../fonts/Abril-Fatface/AbrilFatface-Regular.eot");
              src: url("../fonts/Abril-Fatface/AbrilFatface-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Abril-Fatface/AbrilFatface-Regular.woff") format("woff"), url("../fonts/Abril-Fatface/AbrilFatface-Regular.ttf") format("truetype");
            }
            ...

In general, table of contents is placed at the top of this file.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

In addition to this file, the template also uses other style files. These are the styles of various libraries. They are linked at the top of index.html file, it looks like this:

    ...
    <!-- Start CSS files -->
    <link rel="stylesheet" href="libs/bootstrap/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="libs/bootstrap/bootstrap-grid.min.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- End CSS files -->
</head>

4. JavaScript -
top

We used one file for scripts that can be edited. But for that, you need some skills. This file is here: js/scripts.js. This javascript file is well commented.

The only thing you may want to edit is to set an active category in the Portfolio section.

So, how to set up active categories in the Portfolio section? Open in the editor scripts.js. Find this code:

/* Filterizr script */
    var options = {
        animationDuration: 0.5,
        filter: 'all',
        controlsSelector: '',
        delay: 0,
        ...

We need to change the value for this property filter: 'all', Now set 'all', you can rewrite this value as follows: filter: 'ux-design',

All JavaScripts files are linked at the bottom of index.html. This code looks like this:

        ...
        <!-- Start JavaScript files -->
        <script src="libs/jquery/dist/jquery.min.js"></script>
        <script src="libs/filterizr/dist/jquery.filterizr.min.js"></script>
        <script src="libs/in-view/dist/in-view.min.js"></script>
        <script src="js/scripts.js"></script>
        <!-- End JavaScript files -->
    </body>
</html>

5. Sources and Credits -
top

I've used the following images, icons or other files and plugins as listed.


Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

AirFast