First of all, Thank you so much for purchasing this project and for
being my loyal customer.
You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.
This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this project is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this project. You may learn basics from the links below.Learn HTML basics
If you are new to HTML, I highly recommend that you watch the video tutorials below which I have outlined some basic steps for customizing HTML. Its 20 minutes long. But It worth it if you are a newbie.
You will need the following sofwares to customize this project.
If you are able to read this documentation locally, which means you have successfully downloaded the package and extracted the zip. The file structure as follows :
Blockstale/ ├── Help Docs/ ├── HTML/ │ ├── css/ │ │ ├── plugins/ │ ├── images/ │ ├── js/ │ │ ├── plugins/ │ ├── sass/
The folder you have to customize is the HTML folder. Copy
from the package and paste it in your Project Folder. (This helps you to prevent
overwriting in original files. so if you messed up something,
you will get the original here.)
Here are the list of HTML Pages included with this project
Once you have finalized your preferred layout for the Homepage,
rename the file name to
index.html It is required to use the same name
to make it work as default page when you upload to your
By Default, this project uses two color theme via SASS (SCSS. New and Fast, need some knowledge). By using SASS, it is really easy to change to any color theme you want by just changing a single variable. or if you prefer, you may change the CSS Manually (Old way)
Changing Color theme using SASS
/scss/_user-variables.scssin your code editor
$body-color: $blue-gray;from theme variables.
$blue-gray;as in the example above,
$blue-gray: #b4bdff;line before the other and then you will be able to modify the value.
Once you have finished all customizations, The next step is to upload your to a Live Hosting Server. For that you will need to buy a Hosting Plan and a Domain name from a Service Provider.
Once you have registered a domain name and Hosting, You will get FTP details from your
hosting provider. Use that login details to connect with your server. You will need an FTP
Software for this such as FileZilla. Connect with your server and open
folder in your server. Then copy all HTML, CSS and JS files from your local machine to your
/public_html folder in
your server. Please note the HTML files should be in the Server's root folder. If your
local project is in
/your-folder/ Do not upload the folder directly. Instead
open the folder and select all HTML files and
CSS, JS folders and upload.
A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:
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/.htaccess
to enable these modules on your server.
We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:
<img>Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of
800pxin a Content Size of
200pxas this is unnecessary. Resize it to
It is also recommended that you Combine & Minify all your CSS
Minification reduces the size of the File
and Combining the files helps in reducing the number of HTTP
requests made to the server. This is also an Important Factor in increasing the
speed of your website. There are several tools available
online to Minify your CSS & JS Files. Our recommendations are:
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 several CDN Hosting Providers available on the Internet but we would recommend MaxCDN or CloudFlare. Note: CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your needs. Cloudflare also has a Free plan, you can try that for free.
A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can also choose our shared hosting plans. See above.
We are really thankful to the makers of the frameworks, plugins and images below. We used these to make this more functional. Demo images, you have seen in Live Demo is not included in the download package because of their copyright restrictions.
If you have purchased an earlier version and want to upgrade your website to the newwer version of this project, You can follow the steps. In each update, we will keep a changelog or version history, where we will keep the log of all changes made. We will list out the Changes made, Features added and Pages modified. So it will be easier for you to replace the existing.
If you have modified a file which has latest update, for example, CSS, Open both page in a code editor and use a Comparison Sofware or an Online Tool like Diff Now to compare changes in both files. Then you can manually copy paste the changed lines without affecting your file. NOTE: We recommend that you keep a separate file for new additions or changes if possible.
If you like the project, Please consider Rating it on Facebook by our fans page : http://blockstale.com That means a lot to us :)
Please remember you have purchased a very affordable project and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Please be patient, polite and respectful. We will try to answer your questions as soon as possibleSupport for my items includes: