TownPress HTML Template Documentation

Introduction

Thank you for purchasing TownPress! This documentation will guide you through the customization possibilities of TownPress 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 Sublime Text is probably the best choice if you are on Mac.

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

Don't forget to use your browser's search functionality to search for any keyword in this documentation if you have trouble finding a solution to your issue (CTRL + F or CMD + F if you are on Mac)

CSS Customization

Custom.css

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.

Predefined Skins

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

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

Just change "red.css" to "blue.css", "bluegray.css", "green.css" or "orange.css". Fo example, if you want to use blue skin, change the line to this:

<link rel="stylesheet" type="text/css" href="library/css/skin/blue.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 to make it quick.

Custom Skin

The easiest way to create a custom skin is to make copy of the existing one from "library/css/skin" directory.

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 "red.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 one is "$accent". You can change just this one color to create a brand new skin, but of course, you can play with values of all other variables or even change any other CSS/SASS definitions deeper in the code to fine-tune your scheme. You can use www.colorpicker.com to generate codes for any color.

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) to convert your SASS code (from "myskin.scss" file) to regular CSS code. After the successful conversion, copy the generated CSS code to "myskin.css" file. Now you just need to link this new skin to your templates following the instructions in Predefined Skins 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).

You will need 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://example.us8.list-manage.com/subscribe/post?u=76a50c9454ec8ab78914d1bf2&id=49e892f53d.

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://example.us8.list-manage.com/subscribe/post-json?u=76a50c9454ec8ab78914d1bf2&id=49e892f53d&c=?.

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

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 variables are "email_to" and "email_from".

Google Map

In order to use Google maps (either as a header map or content map), you have to obtain your own Google API key and insert it into "data-google-api-key" attribute of all "gmap-canvas" elements. See the index.html file for example of header map and town-hall.html for example of content map. More info about obtaining the key can be found here.

Icons

This theme uses two icon sets - FontAwesome and Nova icons (implemented via IcoMoon).

To add an icon into your site, use the following code:

<i class="icon-class"></i>

You can find icon classes in FontAwesome library (click on icon to see its class) or Nova icons libary and use its full class (with additional "fa" or "tp" respectively).

For example FontAwesome icon can be defined like this:

<i class="fa fa-heart"></i>

And Nova icon can be defined like this:

<i class="tp tp-plane"></i>

Credits

Images seen in preview are NOT included. You can purchase your own licenses on Envato Market: