Follow the steps below to setup your site template:
- Unzip the downloaded package and open the /HTML folder to find all the template files.There are 4 templates. You will need to upload these files to your hosting web server using FTP/cPanel in order to use it on your website.
- Below is the files/folders needs to be uploaded to your website root directory:
theme-assets/css- Contains stylesheet files
theme-assets/fonts- Font Icons files
theme-assets/images- template images
theme-assets/js- Javacript files
theme-assets/vendors- Vendor css & JS files
- You should upload all or specific HTML files as per your need.
- You're now good to go...! Start adding your content/images and generate your perfect ICO brand template for your users.
Note: No need to upload SRC folder and Gulpfile.
Note: Please use only
assets folder for updation. That will overwrite your changes, Don't change theme-assets.
This section contains HTML Structure to create perfect Crypto ICO layout. This layout has a navigation, content and diffrent sections which required to launch Crypto ICO with header & footer.
Find Logo Container in the Nav Container
<a class="navbar-brand animated fadeInDown" data-animation="fadeInDown" data-animation-delay="1s" href="#head-area"> <img src="images/logo.png" class="navbar-brand-logo" alt="Crypto Logo"> <img src="images/logo-dark.png" class="navbar-brand-logo-dark d-none" alt="Crypto Logo"> <span class="brand-text">Crypto ICO</span> </a>
To change the favicon of your site, you need to load a new ICO image in a site root or to point out a new address of the image.
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> <link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" href="images/apple-icon-120.png">
Crypto ICO download package contains images which are displayed in our online demo. You will see the image code as mentioned below. You can replace your images url with template image url like images/your_image.png
<img src="images/your_image_path.png" alt="image alt text">
Crypto ICO uses 1 font: Comfortaa from the Google Fonts Library. You can change the fonts from HTML files. If you want to use self hosted fonts other than Google fonts then here is an example of self hosted fonts. In this case you need to remove below lines and change font names in /css/style.css file as per your fonts used.
<!--Google Fonts--> <link href="https://fonts.googleapis.com/css?family=Comfortaa:300,400,500,700" rel="stylesheet"> <!--Font icons-->
Now a days fast & optimized website is must, so we would like to represent some optimization tips below which can affect your overall website speed:
gZip Compression & Browser Caching
gZip compression & browser caching can be enabled using the .htaccess file on an Apache web server. You can use the codes from here: https://github.com/h5bp/html5-boilerplate/blob/master/dist/ to enable these modules on your server.
Image Compression & Optimization
We normally use lots of images on our websites to make it look beautiful as well as easily understandable but it can make the website slow if we do not take care of image size. It is important to resize, optimize & compress your images before using it on your website. Here are some tips which can be helpful:
- Resize your images: Resize your images before using it on your website. Do not just download an image & place it as it is in your website. The size/resolution of the image matters since it is not recommended to use an Image size of 1200px x 800px in a content size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px.
- Image formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a flat background use JPEG images, for images with a transparent background use PNG images and for images with animations use GIF images.
- Compressing images: Images compression is important as it considerably reduces the size without losing the quality. There are several FREE image optimization tools available to download.
For MAC use ImageOptim
For windows use riot for compressing JPEG images & PNG Gauntlet for PNG images.
CSS & jQuery Minifications
Customize Header Expiry/Caching
Compared to the potential hassles that can be encountered when implementing the rule above, the application of this rule is very easy. You just need to add the following to your .htaccess file:
Note that this rule applies to sites that are in a server farm. If you’re using a shared host, you could skip this step, but we recommend that you do it regardless.
Content Delivery Network
You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font files. There are many CDN hosting providers available in the market but we would recommend MaxCDN or CloudFlare.
Note CDN setup requires extra monthly recurring fees to setup on your server.
Fast Web Hosting Servers
Website speed depends on your Web Hosting Servers also, so it is recommended that you choose a Hosting Company/Server that provides a reliable & a fast hosting service. You can refer some recommended hosting Services here: inmotion Hosting