iofrm - Documentation

HTML Structure

The template is based on bootstrap 4 library, please read more about bootstrap here: https://getbootstrap.com/docs/4.1/getting-started/introduction/ To edit the template, a very basic knowledge in dealing with bootstrap is required.

The Html file can be edited in any text editor, best example is Adobe Dreamweaver.

CSS

There are 18 CSS files in the template. First is "bootstrap.min.css", used for layout — originally in bootstrap, the second one is "fontawesome-all.min.css" font awesome 5, it is icons font, "iofrm-style.css" the main style file for the forms, and the others are: "iofrm-theme1.css", "iofrm-theme2.css", "iofrm-theme3.css", "iofrm-theme4.css", "iofrm-theme5.css", "iofrm-theme6.css", "iofrm-theme7.css", "iofrm-theme8.css", "iofrm-theme9.css", "iofrm-theme10.css", "iofrm-theme11.css", "iofrm-theme12.css", "iofrm-theme13.css", "iofrm-theme14.css", "iofrm-theme15.css" the forms themes.

JavaScript

This template imports four Javascript files.

"jquery.min.js": jQuery is a Javascript library that greatly reduces the amount of code that you must write.
"bootstrap.min.js": Bootstrap is the most popular Javascript framework for developing responsive, mobile first projects on the web.
"popper.min.js": A library used to position poppers in web applications. A popper is an element on the screen which "pops out" from the natural flow of your application. Common examples of poppers are tooltips, popovers, and drop-downs.
"main.js": Our custom javascript code.

Logo

To change the logo simply replace "logo-light.svg", "logo-dark.svg", "logo-dark2.svg" files.

Form Content

You can use bootstrap forms from this page https://getbootstrap.com/docs/4.1/components/forms/ or use simple form as follow:

<form>
    <input class="form-control" type="text" name="username" placeholder="E-mail Address" required>
    <input class="form-control" type="password" name="password" placeholder="Password" required>
    <input type="checkbox" id="chk1"><label for="chk1">Remmeber me</label>
    <div class="form-button">
        <button id="submit" type="submit" class="ibtn">Login</button>
    </div>
</form>

It's very important that you put the form inside the following code:

<div class="form-holder">
   <div class="form-content">
       <div class="form-items">
                form is here
       </div>
   </div>
</div>

Style Modifying

To change the text and background colors you have to edit the theme css file, for example "iofrm-theme1.css", to change the body background color, modify the following css code:

.form-content {
    background-color: #0093FF;
}

Important Files

If you deside to use the login form 1 and the regiser form 1 you must copy the following files to your website:

    - css/bootstrap.min.css
    - css/fontawesome-all.min.css
    - css/iofrm-style.css
    - css/iofrm-theme1.css

    - images/img1.jpg
    - images/logo-dark.svg
    - images/logo-light.svg

    - js folder
    - webfonts folder

    - login1.html
    - register1.html

Or if you want to use login 1 and register 2, copy the following files:

    - css/bootstrap.min.css
    - css/fontawesome-all.min.css
    - css/iofrm-style.css
    - css/iofrm-theme1.css
    - css/iofrm-theme2.css

    - images/img1.jpg
    - images/img2.jpg
    - images/logo-dark.svg
    - images/logo-light.svg

    - js folder
    - webfonts folder

    - login1.html
    - register2.html

Or simply copy the css folder, the images folder, the js folder and the webfonts folder. That will make all the themes availabe.

Integration

To integrate the form with any project, you have to link the css files in the head of the HTML as follow:

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="css/iofrm-style.css">
<link rel="stylesheet" type="text/css" href="css/iofrm-theme1.css">

And add the following scripts before the ending of body:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

You must stick on the following structure of the form page:

<div class="form-body" class="container-fluid">
    <div class="website-logo">
        <a href="index.html">
            <div class="logo">
                <img class="logo-size" src="images/logo-light.svg" alt="">
            </div>
        </a>
    </div>
    <div class="row">
        <div class="img-holder">
            <div class="bg"></div>
            <div class="info-holder">

            </div>
        </div>
        <div class="form-holder">
            <div class="form-content">
                <div class="form-items">
                    <h3>Get more things done with Loggin platform.</h3>
                    <p>Access to the most powerfull tool in the entire design and web industry.</p>
                    <div class="page-links">
                        <a href="login1.html" class="active">Login</a><a href="register1.html">Register</a>
                    </div>
                    <form>
                        <input class="form-control" type="text" name="username" placeholder="E-mail Address" required>
                        <input class="form-control" type="password" name="password" placeholder="Password" required>
                        <div class="form-button">
                            <button id="submit" type="submit" class="ibtn">Login</button>
                        </div>
                    </form>
                    <div class="other-links">
                        <span>Or login with</span><a href="#">Facebook</a><a href="#">Google</a><a href="#">Linkedin</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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