HomeWebmaster TipsPrinter Friendly Version

Webmaster Tips

These are great tips and articles to help you get the most out of your TownLife experience.

1. Site/CSS Customization

1.1. Theme Options

Theme Options

The are 3 methods of customizing websites in TownLife

  1. Choose a Theme and modify yourself using Custom CSS in the CMS (usually done by our webmaster team)
  2. Choose a Theme and have it customized by our Design Team
    (may include creating a unique home page style and layout along with custom headings and colors just depends on your budget)
  3. Create a whole new Theme

Sample Themes

Panoramic Theme (Hoth) Split Screen Theme(Dantooine) Full Screen Theme (Bespin)
Vertical (Anota) Professional Edged (Kessel) (brown or green) 3 Column Geek (Gerona)
Trendy (Ossus) Sample of Wider Variant we call Trendy Plus

1.2. Background Colors

Please note that with CSS modifications you can make your websites any color you want, if you dream it then we can make it possible!

WARNING!

It is highly recommended that the 'main' div section be kept with a white background. 

  • Reability - usability studies continue to agree that black font on a white background is the easiest to read.
  • Growth - as new modules come out from TownLife they will be designed with white backgrounds, so if you choose to add or modify this then every new module will need to be customized to work for your website, this would be considered an extra charge

 

The major sections for a basic website customization are:

  • page background
  • header graphic

The more time available for design could lead to:

  • footer graphics
  • and theme integration, blending the header into the banner or into the sidemenu

The most advanced templates include CSS customizations to:

  • the navigation (parent/children) active/mouse over
  • and customizing each of the 6 heading tags (H1...H6)

Our sites start with a base CSS to work from and as long as you are not in conflict with the terms of use, most anything can be modified to fit your needs!

1.3. Sample Code

Sample CSS Customizations on TownLife

This page is designed to help with common CSS customizations/requests.

  • CSS to hide the frames around the photographs
    • .photo_gallery dt img{background:none!important;}
  • HTML Code "•" for a bullet dot
    • for example if you have a list of hyperlinks in the footer and put a * inbetween * each of * them

1.4. Wider Pages

Looking how to make your webpage the full width of your layout?

When you edit the page, simply add this code to the CUSTOM BANNER tab.

<style type="text/css">
#pageContent,
#leftColumn,
#rightColumn {
background: #fff;
border: none;
border-radius: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
}

.sidebarUniversal {
display: none;
}
</style>

This will change:

to this:

1.5. External Hyperlink Icon

External Link Icon

To help our visitors know when a link leaves the website to a different website we have integrated this icon.  It is standard process on many internet applications but can still be overwritten with custom css if you wish to stop this from happening/showing.

in main_style.css currently:

#main a[target="_blank"]{
background-image:url(/images/link_new_window.gif);
background-repeat:no-repeat;
background-position:right center;
/*background-attachment:fixed;*/
padding-right:16px;
}

custom css:

#main a[target="_blank"]{
background-image:none;
padding-right:0px;
}

OR

If you go into the HTML and just remove the target="_blank" in the a href code that external link image would not appear.

1.6. Latest Previews

Latest Previews

The latest previews are short pieces of code that will allow you to dynamically show content on your webpage.

  1. PREVIEW BOX
  2. ALL PREVIEWS
  3. DIRECTORY PREVIEW (only available if you have the business directory module enabled)

Preview Box

Allows you to display a specific NUMBER of items from a specific MODULE.

For example the code

  • [+LATESTEVENTS=10+] displays only the latest 10 upcoming events
  • [+LATESTBLOGS=7+] displays the latest 7 blog topics and comments
  • [+LATESTPHOTOS=5+] displays the most recent 5 photos uploaded to the photo galleries

All Preview

Inserts the code [+LATESTALL=10+] which would display the latest 10 Blogs & Photos & Events. This code is often found on the home page.

Directory Preview

Inserts the code [+DIRECTORY=200+] which would dynamically output the entire directory category 200 (which happens to be public libraries). This is useful when you have a business directory but you want to display a listing of a specific business category within a webpage, like accomodations etc.

2. TownLife Advantages

2.1. Why Blog?

Start Blogging Today!Using the TownLife blog (discussion) module you have to power to launch your business ahead of your competition!

The following are some great articles:

3. Inserting Information

3.1. Email Addresses

It is important that you do not insert your email address into a webpage.If you make a page that says

“Please contact support@townlife.com for more information.” You are inviting spam into your email box.  The proper method is to do something like “Please email support for more information.” where support would have link to the email address. 

 

The ultimate email protection is to NOT put any email address or link with an email address anywhere online, this forces your visitors to use the email us form and becomes extremely safe. 

Please note once you reply to someone’s message that has been sent from the “email us” form on your website they have your email address and communication can continue normally through any email program.  What we are trying to do is protect that first point of contact so that only your trusted friends, customers, or members have your email address.

3.2. Making TITLES look IMPORTANT

Remember to use the Heading Tags

Within the TownLife Community Website Builder we have inplemented and editor that allows the users to enhance their documents and strengthen your Search Engine Optimization (SEO).

If you have an important

HEADING

then remember to use the H1,H2,H3,H4,H5, or H6 tags - this tells search engines like Google what is important on your webpage and allows standard and consitent formatting for your entire website.

It is important to NOT use random colours, as this creates a very unprofessional website and makes it almost impossible to maintain.

If you wish to have your headings be a different colour (for example the H3's to be blue instead of black, this can be changed in 1 line of code in your Custom CSS)!

3.3. Adding Map Icons

The interactive map module on TownLife allows you to create categories to help group your locations, there is an excellent selection of icons from famfamfam that you should definately check out.

This assortment of icons is free and can be used for any category you desire, enjoy!

3.4. Adding Trademark and Copyright Symbols - Using ASCII

How to Insert Trademark or Copyright Symbols is easy...

if you know the ASCII code. All typed characters are represented by a numeric value from the ASCII table.

Hold down the ALT key plus the ASCII code to get:

  • Trademark 0153
  • Registered 0174
  • Copyright 0169
  • Double Left Arrows 0171
  • Double Right Arrows 0187
  • ♥ Heart 3
  • ▲ Triangle 30
  • ♦ Diamond 4
  • ♣ Club 5
  • ♠ Spade 6
  • ♂ Men 11
  • ♀ Women 12
  • ♪ Music Note 13
  • ♫ Double Music Notes 14
  • Degree 167
  • Cents 155
  • etc...

To see this appear in your sentence simply hold the ALT key and use the right number pad on your keyboard to enter the code whereever you type!

Note:

This only works with programs which accept an ASCII input, on a laptop you may need to use ALT + Fn, and then the little blue numbers on these keys to get the same effect.

HTML Code

Browser View

HTML Code

Browser View

HTML Code

Browser View

HTML Code

Browser View

HTML Code

Browser View

&copy; &#33; ! &#95; _ &#157; &#219;
&reg; &#34; " &#96; ` &#158; &#220;
&nbsp; &#35; # &#97; a &#159; &#221;
&quot; " &#36; $ &#98; b &#160; &#222;
&amp; & &#37; % &#99; c &#161; &#223;
&lt; < &#38; & &#100; d &#162; &#224;
&gt; > &#39; ' &#101; e &#163; &#225;
&Agrave; &#40; ( &#102; f &#164; &#226;
&Aacute; &#41; ) &#103; g &#165; &#227;
&Acirc; &#42; * &#104; h &#166; &#228;
&Atilde; &#43; + &#105; i &#167; &#229;
&Auml; &#44; , &#106; j &#168; &#230;
&Aring; &#45; - &#107; k &#169; &#231;
&AElig; &#46; . &#108; l &#170; &#232;
&Ccedil; &#47; / &#109; m &#171; &#233;
&Egrave; &#48; 0 &#110; n &#172; &#234;
&Eacute; &#49; 1 &#111; o &#173; &#235;
&Ecirc; &#50; 2 &#112; p &#174; &#236;
&Euml; &#51; 3 &#113; q &#175; &#237;
&Igrave; &#52; 4 &#114; r &#176; &#238;
&Iacute; &#53; 5 &#115; s &#177; &#239;
&Icirc; &#54; 6 &#116; t &#178; &#240;
&Iuml; &#55; 7 &#117; u &#179; &#241;
&ETH; &#56; 8 &#118; v &#180; &#242;
&Ntilde; &#57; 9 &#119; w &#181; &#243;
&Otilde; &#58; : &#120; x &#182; &#244;
&Ouml; &#59; ; &#121; y &#183; &#245;
&Oslash; &#60; < &#122; z &#184; &#246;
&Ugrave; &#61; = &#123; { &#185; &#247;
&Uacute; &#62; > &#124; | &#186; &#248;
&Ucirc; &#63; ? &#125; } &#187; &#249;
&Uuml; &#64; @ &#126; ~ &#188; &#250;
&Yacute; &#65; A &#127; ? &#189; &#251;
&THORN; &#66; B &#128; &#190; &#252
&szlig; &#67; C &#129; &#191; &#253;
&agrave; &#68; D &#130; &#192; &#254;
&aacute; &#69; E &#131; &#193; &#255;
&aring; &#70; F &#132; &#194;
&aelig; &#71; G &#133; ... &#195;
&ccedil; &#72; H &#134; &#196;
&egrave; &#73; I &#135; &#197;
&eacute; &#74; J &#136; &#198;
&ecirc; &#75; K &#137; &#199;
&euml; &#76; L &#138; &#200;
&igrave; &#77; M &#139; &#201;
&iacute; &#78; N &#140; &#202; ?
&icirc; &#79; O &#141; &#203;
&iuml; &#80; P &#142; &#204;
&eth; &#81; Q &#143; &#205;
&ntilde; &#82; R &#144; &#206;
&ograve; &#83; S &#145; ' &#207;
&oacute; &#84; T &#146; ' &#208;
&ocirc; &#85; U &#147; " &#209;
&otilde; &#86; V &#148; " &#210;
&ouml; &#87; W &#149; - &#211;
&oslash; &#88; X &#150; &#212;
&ugrave; &#89; Y &#151; &#213;
&uacute; &#90; Z &#152; &#214;
&ucirc; &#91; [ &#153; &#215;
&yacute; &#92; \ &#154; &#216;
&thorn; &#93; ] &#155; &#217;
&yuml; &#94; ^ &#156; &#218;

3.5. Adding Facebook Content

Enable Facebook Like

The facebook LIKE and share options are managed under the SETTINGS - SOCIAL choices.

Embedding Facebook Pages/Faces etc

If you have a facebook page and wish to put a feed or faces information onto your TownLife website you need to just copy and paste the facebook generated HTML, see the facebook help pages for the specific code.

Note facebook groups are not currently supported.

Step 1: Connecting to your Facebook Page

To connect your website to facebook, simply paste the following code (in HTML mode) in SETTINGS - SOCIAL (or ask our helpdesk for assistance).

<div class="fb-page" data-href="https://www.facebook.com/YOURNAME/" data-width="200" data-height="500" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="true">Facebook</div>

Make sure the data-href address of "http://www.facebook.com/YOURNAME" is actually YOUR facebook website page address.

Step 2: Enable Facebook for your Website* (required)

Under SETTINGS - SOCIAL make sure your facebook like is enabled (this code is required to make any facebook plugin work).

More Facebook Options

All instructions are on your Facebook page once you have the HTML code, then just copy and paste that into their TownLife website by clicking EDIT PAGE, click the HTML button to switch views and copy paste the HTML code from facebook into their website!

3.6. Social Images (Facebook/Twiiter/Google)

Most sites use a default social image from TownLife when posting your information to facebook, twitter or google.

If you would like to customize this image follow these instructions:

  1. Go to SETTINGS - Meta Tags
  2. Add
    1. <meta property="og:image" content="http://path_to_your_image"/>
    2. <meta itemprop="image" CONTENT="http://path_to_your_image"/>
  3. Where "http://path_to_your_image needs to be a valid path to your new social image

Need to test your new Facebook image?

Technical Details on Facebook Image Sizes = https://developers.facebook.com/docs/sharing/best-practices#images

Twitter Post Image Changes

Would you like to create a custom twitter image? Best modify the meta tag:

3.7. Embed Pinterest

How To Embed Pinterest Pins And Boards On Your Website

3.8. Paypal Integration

Shopping Carts

Integration of a total e-commerce is a major project and should only be undertaken if your business has a process to handle this. If you have 50+ products then you will need to look at a full e-commerce integration (like ECWID).

What is Paypal?

Paypal 101: How PayPal Works

Paypal is very trusted online bank. You can send invoices, collect payments, and initiate billing with this service. The great thing is that people can pay you via paypal using their credit card and they do NOT need to create an account. The only time an account is required is when you are receiving funds. As with most banking services they charge you a percentage for each transaction depending on the type of account you have setup.

Paypal integration options include adding a BUY NOW button, integration a simple shopping cart, even collecting reoccuring funds.

Applicable Use Cases

4. Tools

4.1. Measuring Your Popularity

How Popular is my Website?

On Urladex, the number of hits per million users according to Alexa determines the potential price of the site's share. Unfortunately you need to appear in the top list of sites for Urladex to appropriately grade you, but Alexa is a great tool for seeing your website popularity measured, especially vs competitors.

Another fun way to measure popularity is to see how many times you have been measured in the media.  
Trendio is a stock exchange where words from the news are the stocks. The value of the words is calculated according to their presence in the media.

4.2. Converting Files to PDF

Viewing a PDF (for FREE)

When you are uploading a document to your website the Internet standard is to use PDF format.

To view this file most computers already have the viewer installed, or it can be downloaded for FREE directly from www.adobe.com.

By utiltizing this internet standard you ensure that people can read your information easily and that your information is presented in a clear consistent fashion.

Creating a PDF (for FREE)

Portable Document Format (PDF) is the de facto standard for the secure and reliable distribution and exchange of electronic documents and forms around the world. CutePDF Writer (formerly CutePDF Printer) is the free version of commercial PDF creation software. CutePDF Writer installs itself as a printer subsystem. This enables virtually any Windows applications (must be able to print) to create professional quality PDF documents with just a push of a button.

Create professional quality PDF files from almost any printable document. FREE for personal, commercial, gov or edu use! No watermarks! No popup Web ads! Now supports 64-bit Windows.

Any document, spreadsheet, file can be converted to a PDF for FREE, simply download www.cutePDF.com.

4.3. Firefox Loading Files Badly

Downloading Files Failing in Your Web Broswer (Firefox or Internet Explorer)?

Problem:

While putting up a new Excel file today, I noticed an issue with Firefox. When I go to open the file, it opens a new tab and displays a bunch of garbage. In IE, it opens up in a new window and then asks to save or open (as it should). Know anything about this?

Solution:

This is a browser issue.. basically could be any browser.. that happens when the browser doesn't know how to handle file extension that is opened. Basically in this example your firefox doesn't have the excel plugin installed. Often this happens with PDF's and then the solution is to install the latest Adobe reader.

Usually if you browser doesn't know what to do with the file it will just dump it as a file to your downloads directory.

Check http://kb.mozillazine.org/File_types_and_download_actions for more information.

 

4.4. RSS Feeds

RSS on TownLife

After monitoring the use of RSS feeds on TownLife we have disabled this service. If you still require an RSS feed please use a tool such as http://page2rss.com/ to achieve the same result.

For more information about RSS Feeds see Online Definitions.

4.5. FTP

FTP: File Transfer Protocol

There is no FTP access to any TownLife information. Our content management system is indexed and stored in a database. If you would like to mass add or remove files please login to manage your website.

5. Process

5.1. Goals of a Good Website

THE GOALS OF A GOOD WEBSITE

The true test of a website is if it accomplishes these goals:

  • Does the website attract new visitors regularly?
  • Does the website keep these visitors exploring the content for several pages?
  • Do these visitors come for repeat visits?
  • Do website visitors become customers?

Good website design is subjective and depends on what appeals to the target market you are trying to attract. Start by determining why you have a website in the first place. Most businesses should have an online presence...

Start by creating a plan that describes what you want your website to accomplish.

  • Do you want it to provide enough information for people to
  • o Visit your business
  • o Call for reservations
  • o Sign up for a newsletter to receive more information in the future from you?

When planning your website keep your target audience in mind. A visitor should have a clearunderstanding of the experience you are offering within the first 20 seconds of visiting your site. Most people never get past the first page of a website; so first impressions are critical.

Everything on your website should help them make the decision to select your business for their trip. It's important that information on the site is information that's of interest to your target audience.

When you're creating your plan, think about navigation and usability. Navigation refers to the way a website visitor moves around a website. Navigation is one of the biggest challenges websites are faced with. The issues are:

  • What pages of the website are most important to your visitor? In other words, where do you them to go after they've seen your homepage?
  • How do you get visitors to take the first action and click deeper within the website?

Usability refers to the way people use your website. Can the content be easily read? Effective use of colors, graphics and layout can help improve usability but the key is to build your website so that it does what people expect it to do. Slow download times, overwhelming design, and over use of colors can frustrate people and potentially cause them to leave your website.

Content is one of the most important elements of your website. Content goes beyond the words on the site, but also includes: images, graphics, tables, fonts, and font size. Regardless of keywords, search engine results, advertising, navigation, etc. if your site does not have high quality content that is written and displayed well, visitors will not stay on the site nor will they return to it.

Here are some suggestions on how to write effective content for your website:

  • People scan content to find what they are looking for. Use strong headlines to capture their attention.This will break up the text on the page and help the reader navigate the content.
  • Keep the most important information on the top portion of the page so the visitor does not have to scroll down to see it.
  • Be sure to put the answers to frequently asked questions can be easily be found (ie. Admission cost, hours and dates of operation etc.)
  • Avoid too much text. Limit your pages to approximately 200 words.
  • Limit the use of PDF's.Try to restrict the use of PDF files that are intended to print. These can be difficult for visitors to read online.
  • Select photos that will download quickly. To reduce download time use images in a jpg format that have a file size of 100K or less.
  • Use a high resolution imagethat you can resize as a smaller image but still maintain the quality.

Great information created by Travel Alberta to help websites succeed online!

5.2. Storing Municipal Minutes

Power of Search

In TownLife we are very happy to include a universal search. This allows users to type a term and have results returned from webpages, photos, modules, and even inside PDF documents.

For this search to be able to index the PDF documents tey must be converted straight from word (.doc) files into PDF. If the document is printed out.. signed and then scanned back it can still be saved as a PDF document but to the computer it is just like a photograph. Essentially the letters and words become unsearchable.

PDF with No Signatures

As an industry example of how the signatures are not included I invite you to see
a) the Alberta Legislature http://www.assembly.ab.ca/net/index.aspx?p=han&section=doc with a sample PDF http://www.assembly.ab.ca/ISYS/LADDAR_files%5Cdocs%5Chansards%5Chan%5Clegislature_28%5Csession_3%5C20141210_1930_01_han.pdf
OR
b) the City of Edmonton http://www.edmonton.ca/city_government/urban_planning_and_design/edc-minutes-and-agendas.aspx with sample PDF
http://www.edmonton.ca/city_government/documents/EDCMinutesJanuary21.pdf

You will see with both of these examples I can search the text.


But when we look at minutes with handwriting stored with them this powerful feature is disabled because it was not saved directly as a searchable PDF.

6. Widgets

6.1. Ecwid: E-Commerce Shopping Cart

Ready for a new breed of shopping cart software?

Ecwid offers the performance and flexibility you need, with none of the hassles you don't.

  • Works with your existing site
  • Takes less than 5 minutes to set up
  • Web, Facebook and mobile devices

(See all plans available...)

  • Once you sign up, you will get access to the Ecwid Control Panel and HTML integration code.
  • Paste the Ecwid code
    As soon as you add the code to your site, a full-featured store will appear there right inside your pages.
  • Configure your store
    Add products, set up payment gateways and shipping methods, customize the look and feel of your store.
  • Start Selling!

Ecwid. Getting Started. from Ecwid Team on Vimeo.

6.2. Quote of the Day

If you are interested in including a quote of the day, simply find a website feed that includes the code to copy/paste into your TownLife website. A great example is from BrainyQuote.

more Quotes


or

Visit BrainyQuote for more Quotes

6.3. Start an Online Petition

Company Overview

Care2 is a trusted social action network that empowers millions of people to lead a healthy, sustainable lifestyle and support socially responsible causes.

Care2's content offering includes original stories, blogs and syndication partners covering a wide range of healthy lifestyle areas, and causes ranging from politics to human rights and animal welfare. By integrating relevant content with action opportunities such as petitions, pledges and daily actions, Care2 builds a deeper level of passion and engagement with its users. The Butterfly Rewards member loyalty program is a "currency for good" for Care2 members to earn points and support nonprofit projects worldwide.

Start a Petition Online!

6.4. Add a Suvey

Survey Addons

The easiest way to put a survey online is to use a free tool like www.wufoo.com or www.surveymonkey.com, once the survey is created it will generate a short HTML clip of code, and you just copy and paste that into TownLife.

We do have custom survey solutions, but they are more for complicated conditional questins/answers and 100+ questions which sounds like over kill for this project.

For more information see:

7. Recommended Tools

7.1. Website / HTML / CSS Training

Are you looking for more training?

There are many great resources available online including videos, slides, and web searches.

We have choosen to share some value-filled resources:

  1. http://www.codecademy.com/tracks/web

7.2. Custom Editing Photographs

Looking for Free and Light Image Editors?

See the article http://vandelaydesign.com/blog/design/light-and-free-image-editors/

8. Sharepoint

8.1. Sharepoint Video Help Tutorials

Microsoft Sharepoint is a great Intranet tool for your Microsoft Exchange users.

Intranet's are meant for your internal staff and council members.

For more information and help, check out these resources:

9. Banner Ad Manager

9.1. OiO Publisher Ad Manager

Interested in Adding a Banner Ad Manager to your Website?

OiO Publisher instructions:

  1. Signup as an affiliate.
  2. Check out this short tutorial, to help you get the basics.
  3. Now it's time to go through OIO'ssettings and configure your ad zones.
  4. Finally, remember to place thead code on your web pages, to start displaying ads.
  5. If you require any further help, please take a look at ourtutorials or ask on the forum.
  6. Convince users to buy an ad on your website!

To show your ads on your website, we recommend the default banner location, just insert the following html code:

<script type="text/javascript" src="http://demo.oiopublisher.com/standalone/oiopub-direct/js.php?type=banner&align=center&zone=X"></script>

where "X" is your zone number.

Copyright © - TownLife by Econolution Inc.