Blue Collar HTML Template Documentation

Introduction

Thank you for purchasing Blue Collar!

This documentation will guide you through the customization possibilities of Blue Collar HTML template.

If you are a HTML beginner, I recommend to install some advanced HTML editor before you dive into customization of this template. Notepad++ is great if you are Windows user and I've heard that Brackets editor is pretty good too if you are on Mac.

If you are already loving Blue Collar template, please don't forget to rate it ***** under your ThemeForest account / downloads. Thank you!

CSS Customization

Adding your own CSS definitions

If you want to add your own CSS definitions or override existing ones, use the "library/css/custom.css" file for that. This file is already linked to all HTML templates, just save your changes and it is done.

Changing the color skin

Thi template offers several skins to choose from. In order to change the default one, you need to search for "default.css" inside HEAD tag. By default, whole line looks like this:

<link rel="stylesheet" type="text/css" href="library/css/skin/default.css">

You can find all skins in "library/css/skin" directory. Change the "default" in above code to name of the existing skin, for example: "skin2", "skin3" or "skin4". For example, if you want to use the "skin2" skin, you need to change the code to look like this:

<link rel="stylesheet" type="text/css" href="library/css/skin/skin2.css">

Please note, that you will need to do this for all HTML files, but you can use something like "mass replace in files" function of your text editor ("Search / Find in Files..." if you are using Notepad++) to make it quick.

Custom color scheme with SASS

If you are not familiar with the SASS language, check sass-lang.com first.

The easiest way to create a custom color scheme (skin) is to make copy of the existing one in "library/skin" directory and change some SASS variables.

You will find two file types for each skin, one with ".css" extension and other with the ".scss" extension. Make copy of the ".scss" one (for example "default.scss") and rename it to, let's say, "myskin.scss".

Open this new file in the editor. You will find all variables at the top of the document, most important ones are "$accent-1" and "$accent-2". You can change just those two colors to create a brand new skin, but of course, you can play with values of all other variables (or even change non-variable colors deeper in the code) to fine-tune your scheme.

After you have made your changes, save the file. Now you need to convert "myskin.scss" to "myskin.css" (note the different extension). First create an empty file named "myskin.css" in "library/css/skin". Then use any online SASS to CSS converter (for example sassmeister.com). After the successful conversion, copy the converted CSS code to "myskin.css" file. Now you just need to link this new skin to your templates following the instructions in Changing the color skin section above.

Widgets

Twitter feed

This template uses default Twitter feed, which can be generated at twitter.com (you will need to be logged in).

MailChimp subscribe form

You need to have a Mailchimp account in order to make subscribe form work.

Log in to Mailchimp and go to desired subscribers List which you want to connect with this template. Click on Signup forms and build some basic signup form. If you want to use this template's subscribe form as it is, you will need just an email field (field tag EMAIL).

When you done building the form, go back to Signup forms and click on Embedded forms. You should see the code of your form in Copy/paste onto your site section. Copy it into your text editor, but you need just form's action URL. Search for "<form action=" and copy the whole URL. It should look similar to this: http://lsvr.us14.list-manage.com/subscribe/post?u=8291218baaf54ddfd7dbc6016&id=f3e5d696dc.

You need to edit it a little bit though. Replace "post?" with "post-json?" and add "&c=?" at the end. You should get something similar to this: http://lsvr.us14.list-manage.com/subscribe/post-json?u=8291218baaf54ddfd7dbc6016&id=f3e5d696dc&c=?.

Now, search for element with "subscribe-widget-form" class and change its "action" attribute to your URL created above. You will need to make this change for all HTML templates.

Flickr feed

First, you need to obtain the ID of photostream you want to display. To do so, navigate to desired photostream at Flickr and copy the code from browser's location bar right after "http://www.flickr.com/photos/".

You can find the example of the Flickr feed in home-2.html template (at bottom). Search this template for element with class "flickr-widget" and add this ID to its data-id attribute.

Contact Form

Please note, that you will need to host your site on the PHP hosting for contact form to work.

To set up the contact form, you just need to open the "ajax/contact-form.php" file and change all its variables to suit your needs. Most important variable is the first one - "email_to". This specifies the email address where all contact form messages will be sent.

Google Map

Example of Google Map can be found in contact.html template, search for element with class "c-gmap".

In order to use the map, you have to obtain your own Google API key and insert it to c-gmap element's "data-google-api-key" attribute. More info about obtaining the key can be found here.

Icons

This template uses two icon font sets - FontAwesome and Nova icons.

Font Awesome

To add a FontAwesome icon, use  code and replace the "fa-heart" with any class from Font Awesome icon set. For example: , , etc.

Nova icons

This set is generated via Icomoon.

To add an icon from this set, use  code and replace "im-design" with any class from Nova icons set.

Credits

Images seen in preview are NOT included. You can purchase your own licenses on PhotoDune.net:
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24

Please Rate

If you like Blue Collar template, please don't forget to rate it ***** under your ThemeForest account / downloads. Thank you!