Forny login and registration templates

Forny templates are based on popular CSS framework Bootstrap 4. All files are in this archive.

Editing template

To edit a basic knowledge of Bootstrap, HTML and CSS is required. Any file can be edited with a simple text editor like VS Code or Notepad++.

Directory structure

There are three important directories inside of this archive:

css/ -- where all CSS files are found
js/ -- JavaScript files
img/ -- images and other graphic assets

HTML templates are located in the root directory.

Every HTML and CSS file was semantically prefixed with a theme number. For example, files 01_login_and_register.html, 01_reset.html and css/theme-01.css belong to the same theme.

CSS

In css/ directory you can find all CSS files from this templates pack.

The are two files which are shared between all themes:

bootstrap.min.css -- an unchanged and minified version of Bootstrap framework
common.css -- a global styles which each theme depends on
theme-01.css, theme-02.css, etc -- styles for a concrete theme

JS

Templates depend on JavaScript files provided by Bootstrap and jQuery. You can find them in js/ directory.

bootstrap.min.js -- a minified version of Bootstrap framework
jquery.min.js -- a minified version of jQuery library
main.js -- scripts, which used by templates to add interactivity
demo.js -- scripts, used only in demo purposes. You don't need it in production.

Change logo

Logos are plain SVG templates and can be replaced on per-theme basic. Just replace SVG file in img/ directory. The name of file contains a number of theme so you can easily find a desired one. For example, a file for theme "01" will have name logo-01.svg.

Note, SVG files are inlined into resulting HTML. If you want to use PNG or JPEG files instead, you need to modify HTML templates. To do so open HTML file, locate element with class Forny-logo and replace inlined SVG with img tag:

<!-- find this block -->
<div class="Forny-logo">
    <a href="#">
        <svg xmlns=""><!-- cut --></svg>
    </a>
</div>

<!-- and replace with this snippet -->
<div class="Forny-logo">
    <a href="#">
        <img src="/path/to/image.png" />
    </a>
</div>

Form validation

When you want to indicate that some field has an error, add has-error class to its parent "form-group" tag. After that the form input will be decorated in errored state.

<div class="form-group has-error">
    <input type="email" />
</div>

Read more about how Bootstrap does the form validation here: Bootstrap's documentation

Integration with existing project

If you add Forny to an existing project, you need to add there styles to <head>:

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/theme-01.css" />

and attach these scripts right before closing body tag:

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

Note, if you use own customized Bootstrap template, it may affect the look and feel of Forny theme.

Credits

Thank you for purchasing this template pack. We will be glad to help you in case of any questions related to this pack.