Tag Archives: design

Pages Designer Help Sheet

Name URL
468 x 60 Banner Advertising Off-Site on Earn.GoTop100.com Top Site List /banner_ad_a
Banner Rotation – Buy /banner/index.php
Catalog /catalog/index.php
Contact /contact/index.php
Contests – Paid to Click /contests/ptc.php
Contests – Paid to Click – Past Winners /contests/past/ptc.php
Contests – Paid to Signup /contests/pts.php
Contests – Paid to Signup – Past Winners /contests/past/pts.php
Contests – Referral /contests/ref.php
Contests – Referral – Past Winners /contests/past/ref.php
Downloads /downloads/index.php
Downloads – View /downloads/view.php
Games /games/index.php
Games – {~$game.title~} /games/view.php
Help System /help/index.php
Homepage /home
Instant Gift Cards /giftcards/index.php
Instant Gift Cards – Codes /giftcards/codes.php
Members – Account Balance /members/balance.php
Members – Account History /members/history.php
Members – Locked Funds /members/locked.php
Members – Paid to Signup – Jackpot – Past /members/pts/jackpot/past.php
Members – Unsubscribe /members/unsubscribe.php
Members – {~$config->get(‘pointsName’)~} History /members/points/history.php
Members – Advertise /members/advertise.php
Members – Advertising Stats /members/stats.php
Members – Banner Rotation – Buy Impressions /members/addBanner.php
Members – Banner Rotiation – Edit /members/editBanner.php
Members – Banner Rotiation – Stats /members/statsBanner.php
Members – Change E-mail Address /members/email.php
Members – Change Password /members/password.php
Members – Confirm Your E-mail Address /members/confirm.php
Members – Converter /members/points/converter.php
Members – Edit Account /members/editAccount.php
Members – Edit E-mail Alerts /members/alerts.php
Members – Forgot {~$find|capitalize~} /members/forgot.php
Members – GPT Tracker /members/pts/gpttracker/index.php
Members – Home /members/index.php
Members – Inbox System /members/inbox/index.php
Members – Inbox System – View Message /members/inbox/view.php
Members – Inbox System – {~if $action==’reply’~}Reply{~else~}Send Message{~/if~} /members/inbox/post.php
Members – Internal Funds /process/internal.php
Members – Login /members/login.php
Members – Logout /members/logout.php
Members – Loyalty Bonus – Request /members/loyalty/request.php
Members – Loyalty Bonus – View Request /members/loyalty/view.php
Members – Loyalty Bonus – {~$folder.name~} /members/loyalty/requests.php
Members – Loyalty Bonus{~if $level~} – Level {~$level~}{~/if~} /members/loyalty/index.php
Members – Paid to Click /members/clickPTC.php
Members – Paid to Click – Buy /members/buyPTC.php
Members – Paid to Click – Buy – Timer /members/pts/frameBreakTop.php
Members – Paid to Click – Buy – View /members/ptc/frameBreak.php
Members – Paid to Click – Buy Hits /members/addPTC.php
Members – Paid to Click – Edit /members/editPTC.php
Members – Paid to Click – Stats /members/statsPTC.php
Members – Paid to Click – Timer /members/timerPTC.php
Members – Paid to Click – View /members/viewPTC.php
Members – Paid to Signup /members/signupPTS.php
Members – Paid to Signup – Approve /members/approvePTS.php
Members – Paid to Signup – Buy /members/buyPTS.php
Members – Paid to Signup – Buy Signups /members/addPTS.php
Members – Paid to Signup – E-mail Offer /members/pts/email.php
Members – Paid to Signup – Edit /members/editPTS.php
Members – Paid to Signup – Jackpot /members/pts/jackpot/index.php
Members – Paid to Signup – Report /members/pts/report.php
Members – Paid to Signup – Requests /members/pts/requests.php
Members – Paid to Signup – Security /members/pts/click.php
Members – Paid to Signup – Stats /members/statsPTS.php
Members – Paid to Signup – View Signup /members/pts/view.php
Members – Pixel – Edit /members/editPixel.php
Members – Pixel – Stats /members/statsPixel.php
Members – Promotional Codes /members/promo.php
Members – Quiz /members/quiz/index.php
Members – Refer a Member /members/refer.php
Members – Register /members/register.php
Members – Rewards /members/points/index.php
Members – Rewards – Request /members/points/request.php
Members – Rewards – Requests /members/points/requests.php
Members – Rewards – View Request /members/points/view.php
Members – Side Panel – Edit /members/editSide.php
Members – Side Panel – Stats /members/statsSide.php
Members – Signatures /members/signature/index.php
Members – Telephone Verification /members/telephone/index.php
Members – Tell a Friend /members/tell.php
Members – Terms /members/terms.php
Members – Thank You /members/points/return.php
Members – Transfer Balance /members/transfer.php
Members – Trouble Ticket /members/ticket.php
Members – Trouble Ticket – View /members/ticket/view.php
Members – Upgrade /members/upgrade.php
Members – Welcome /members/welcome.php
Members – Withdraw /members/withdraw.php
Members – Withdraw – Requests /members/withdraw/requests.php
Members – Withdraw – View Request /members/withdraw/view.php
Members – Your Referrals /members/downline.php
Members – {~$config->get(‘pointsName’)~} Payment /process/points.php
News /news/index.php
News – {~$news.subject~} /news/view.php
Order #{~$order.id~} /orders/view.php
Orders /orders/index.php
Payment – Select Method /process/index.php
Payment – {~$method.name~} /process/custom.php
Pixel – Buy /pixel/buy.php
Pixel – Home /pixel/index.php
Pixel – Purchase /pixel/pay.php
Pixel – Reserve Pixels /pixel/reserve.php
Pixel – Select Your Pixels /pixel/select.php
Pixel – Stats /pixel/stats.php
Pixel – Terms /pixel/terms.php
Polls – Past /polls/past.php
Rewards /members/points/rewards.php
Select a reward! /members/points/register.php
Shopping Cart /cart/index.php
Shopping Cart – Payment /cart/methods.php
Shopping Cart – Shipping /cart/shipping.php
Shoutbox /shout/shout.html
Shoutbox – CSS /shout/shout.css
Shoutbox – Fullscreen /shout/fullscreen.php
Shoutbox – {~if $act==’emoticons’~}Emoticons{~else~}Rules{~/if~} /shout/info.php
Side Panel – Buy /side/index.php
Template Preview /templates/preview.php
Thank You /process/return.php
Thank You /cart/show.php
Withdraws /members/withdraw/list.php
{~$form.name~} /forms/index.php
{~$form.name~} – Requests /forms/requests.php
{~$form.name~} – View Request /forms/view.php

Includes Designer Help Sheet

ID Name Code
_addressForm Address – Form {~include file=”_addressForm”~}
_banner_rotater Banner Rotation {~include file=”_banner_rotater” group=”” unique=0~}
_banner_stats_top Banner Rotation – Stats – Top {~include file=”_banner_stats_top”~}
_bonus_activity Bonus – Acitivity {~include file=”_bonus_activity”~}
_bonus_ad Bonus – Ad {~include file=”_bonus_ad”~}
_cart_count Shopping Cart – Number of Items {~include file=”_cart_count” url=0~}
_cart_show Shopping Cart – Show Items {~include file=”_cart_show”~}
_cart_top Shopping Cart – Top {~include file=”_cart_top”~}
_catalog_search Catalog Search Form {~include file=”_catalog_search”~}
_cat_route Catalog Route {~include file=”_cat_route”~}
_countdown Display Countdown {~include file=”_countdown”~}
_counter Counter {~include file=”_counter”~}
_downloads_viewers Downloads – Viewers {~include file=”_downloads_viewers”~}
_errors Errors {~include file=”_errors”~}
_fileSize Get the File Size {~include file=”_fileSize”~}
_forms_top Forms – Top {~include file=”_forms_top”~}
_gameTokens_balance Game Tokens – User Balance {~include file=”_gameTokens_balance”~}
_happeningNow Happening Now {~include file=”_happeningNow” alert=””~}
_inbox_top Inbox System – Top {~include file=”_inbox_top”~}
_inbox_unread Inbox – User’s Unread Messages {~include file=”_inbox_unread” url=0~}
_jackpot_amt Jackpot – Amount {~include file=”_jackpot_amt” pot=0~}
_jackpot_past Jackpot – Past Winners {~include file=”_jackpot_past”~}
_jackpot_totalEntries Jackpot – Total Entries {~include file=”_jackpot_totalEntries” pot=0~}
_jackpot_userEntries Jackpot – User’s Entries {~include file=”_jackpot_userEntries” pot=0~}
_loyalty_top Loyalty Bonus – Top {~include file=”_loyalty_top”~}
_loyalty_user Loyalty Bonus – User’s Points {~include file=”_loyalty_user”~}
_members_addressForm Members – Address – Form {~include file=”_members_addressForm”~}
_members_advStats_top Members – Advertising Stats Menu {~include file=”_members_advStats_top”~}
_members_adv_top Members – Advertising Menu {~include file=”_members_adv_top”~}
_members_amts Members – Display Amounts {~include file=”_members_amts” trim=1~}
_members_count Members – Count {~include file=”_members_count”~}
_members_current Members – Current Earnings {~include file=”_members_current”~}
_members_link Members – Link {~include file=”_members_link”~}
_members_locked Members – User’s Locked Balance {~include file=”_members_locked”~}
_members_loginStatus Members – Login Status {~include file=”_members_loginStatus”~}
_members_online Members – Online Users {~include file=”_members_online”~}
_members_payments Members – Display Payment Amounts {~include file=”_members_payments”~}
_members_refEarnings Members – User’s Referral Earnings {~include file=”_members_refEarnings”~}
_members_refs Members – User’s Referrals {~include file=”_members_refs”~}
_members_targeted Members – Targeted {~include file=”_members_targeted”~}
_members_top Members – Top Menu {~include file=”_members_top”~}
_members_total Members – Total Earnings {~include file=”_members_total”~}
_members_user Members – User’s Balance {~include file=”_members_user”~}
_meta Meta Tags {~include file=”_meta”~}
_news News – Display {~include file=”_news” limit=10~}
_pager Pager {~include file=”_pager”~}
_payment_return Payments – Thank You Messages {~include file=”_payment_return”~}
_pixel_buy_top Pixel – Buy – Top {~include file=”_pixel_buy_top”~}
_pixel_display Pixel – Display {~include file=”_pixel_display”~}
_pixel_stats_top Pixel – Stats – Top {~include file=”_pixel_stats_top”~}
_points_completed Points System – Completed Amount {~include file=”_points_completed”~}
_points_display Points – Display {~include file=”_points_display”~}
_points_top Points – Rewards – Top {~include file=”_points_top”~}
_points_user Points System – User’s Points {~include file=”_points_user”~}
_poll Poll {~include file=”_poll” id=0~}
_poll_display Poll – Display {~include file=”_poll_display”~}
_ptc_count Paid to Click – Count {~include file=”_ptc_count”~}
_ptc_display Paid to Click – Display Advertisement {~include file=”_ptc_display”~}
_ptc_earnings Paid to Click – Earnings {~include file=”_ptc_earnings”~}
_ptc_stats_top Paid to Click – Stats – Top {~include file=”_ptc_stats_top”~}
_ptc_userClicks Paid to Signup – User Clicks {~include file=”_ptc_userClicks”~}
_pts_amts Members – Paid to Signup – Display Amounts {~include file=”_pts_amts” trim=1~}
_pts_count Paid to Signup – Count {~include file=”_pts_count” excludeCats=””~}
_pts_display Paid to Signup – Display Advertisement {~include file=”_pts_display”~}
_pts_earnings Paid to Signup – Earnings {~include file=”_pts_earnings”~}
_pts_lastAdded Paid to Signup – Last 10 Added {~include file=”_pts_lastAdded” horizontal=0 limit=10~}
_pts_lastCredited Paid to Signup – Last 10 Credited {~include file=”_pts_lastCredited” horizontal=0 limit=10 unique=0~}
_pts_mostCompleted Paid to Signup – Most Completed {~include file=”_pts_mostCompleted” horizontal=0 limit=10 days=0~}
_pts_stats_top Paid to Signup – Stats – Top {~include file=”_pts_stats_top”~}
_pts_top Paid to Signup – Top {~include file=”_pts_top”~}
_pts_userCompleted Paid to Signup – User Completed Count {~include file=”_pts_userCompleted” excludeCats=””~}
_securityForm Security Code Form {~include file=”_securityForm”~}
_shout Shoutbox {~include file=”_shout”~}
_side_display Side Panel {~include file=”_side_display” horizontal=”0″~}
_side_stats_top Side Panel – Stats – Top {~include file=”_side_stats_top”~}
_signature Signature {~include file=”_signature”~}
_sorter Sorter {~include file=”_sorter”~}
_success Success {~include file=”_success”~}
_ticket_top Trouble Ticket – Top {~include file=”_ticket_top”~}
_withdraw_completed Withdraw – Completed Amount {~include file=”_withdraw_completed”~}
_withdraw_form Withdraw – Form {~include file=”_withdraw_form”~}
_withdraw_pending Withdraw – Pending Amount {~include file=”_withdraw_pending”~}
_withdraw_top Withdraw – Top {~include file=”_withdraw_top”~}
_withdraw_user Withdraw – User’s Completed Amount {~include file=”_withdraw_user”~}

Available Design / Code Resources and Documentation (Reference Help Sheets)

This is one subject where I can start by saying that most all of the ‘action’ is located in the ShiftCode Admin Panel in the ‘Files & Templates’ box.  This section is located in the lower right side of the admin panel as seen below:

Files & Templates

Designer Help Sheet:  (under the ‘Templates’ sub-section) In this area you will find most all of the common code variables (value placeholders) that are used throughout the ShiftCode script, its ‘Includes’, and ‘Pages’.  Notice this area has three parts that are accessible by way of the three buttons marked ‘General’, ‘Includes’, and ‘Pages.

Download as CSV (option):  Notice that there is the option to ‘Download as CSV’ which means all of the information covered in this section is available for you (or your designer / coder) to download in one neat and tidy file package (each of three) as a ‘CSV’ (meaning a comma separated format) type file.  CSV type files since they contain only regular text are viewable in any text file viewer /editor though they are best viewed opened by any standard spreadsheet application such as Microsoft Excel. Note: It’s not really necessary to download the CSV file versions of the information as you can just as easily view them in your web browser!

General (tab): The image below shows the very basic benign ‘General’ display variables (pretty much anywhere on your site where you need to display any of the values contained in any of the general variables then refer to these Designer Help Sheets in your admin panel and place the variable sought in the form of code within a page, include, or script.

deshelpsheet

Includes (tab): What is an ‘Include’?  (center tab in above image a sample of the page seen in the below image) Assuming you know little about (‘SMARTY’) type PHP coding then when you see the term ‘include’ then know that it’s almost exactly what you may think of when saying the word ‘include’  Includes are smaller neat and tidy packages of code designed to perform a specific function only instead of repeating the code over and over wherever that function is needed in the main or secondary scripts then includes allow the coder to have only one copy of the code to do that function set aside in an include where all he needs to do is reference that include file by name anywhere in the script and it will perform that function as if all of that code (for the function) was typed in.includes smple short list (see your GPT admin panel for the entire list)

Pages (tab): Pages are fun for professional designers and complete novices alike because they are less code-like and more text-like and they can be edited using the ShiftCode built in WYSIWYG (what you see is what you get) word processor for page.  Note that when you click on the right side (of the Designer Help Sheet image (above)) then what you see will be a comprehensive list of the default pages that come with your ShiftCode GPT site.

Yes, the above mentioned it’s a very helpful list (and it describes what the default pages are named and where they are located) but if (when) you actually want to actually start working with, creating, and editing your site’s pages then you’ll want to actually click on ‘Pages’ directly from the Files & Templates menu (located in the lower right corner as seen again below):Files & Templates Menu (Aiming for the 'Pages' Selection)Assuming you followed my suggestion and actually clicked on the ‘Pages’ selection on the Files & Templates menu (as seen above) then you got a sneak peek at the WYSIWYG page editor that you’ll be seeing a lot more of in other areas of this documentation site.

Now, getting back on track to where we were (exploring the ‘Templates’ selection) please click on the ‘Logos’ menu selection (as seen above)

Site Design & Coding Considerations and Options

The Options:  I fully realize though that there are many aspiring GPT site admins out there that either have already thought things through well and may have a professional web site designer standing by (smart), have purchased a pre-made template design, those who plan to ‘generate’ a basic template and expand upon that by using the relatively simple built in template designer part of the script, those who plan to edit the default gray template called ‘UltimateGPT Template v2.0’ that comes pre installed, or those who plan to go it alone and design their own design template from scratch.

For me, this is where the most exciting parts start – designing my own GPT site from drab to fab!  I’ve been designing my own web sites from code (scratch) for over a decade now and I consider this creative process fun.  The last ShiftCode GPT design template I designed for my own GPT turned out very satisfying by me simple editing the default gray ‘UltimateGPT Template v2.0’!

If your are comfortable with editing HTML, CSS, and some PHP code then this may be an option for you!  If you are already skilled in coding and design the I highly suggest going this route. On the other hand if you are the slightest bit squeamish or impatient with matters of computer coding or designing images then I highly suggest you choose the easier route by exploring the built in ShiftCode Template Generator (for novice designers)  You’d be surprised at the beautiful colorful and functional unique site design the total graphic design novice can manage to coax from the plain old default ShiftCode template (image below) [click images to see larger version]:

Running Through the Site Design Options One-By-One:

  • Design Your Own Site Design Template From Scratch Yourself: (or almost)  If you are relatively experienced in basic HTML, PHP, and you are also not really that bad at graphic design (creating, editing, manipulating, and images online) then here’s your chance to show off some design flair while enjoying the accolades when your site design is finished.  If you are considering this route then we’d highly recommend that you make backups of any/all default code (files) before you start tinkering.

    NOTE: The system is built using an alternate non-standard more secure version of the PHP coding language that is called SMARTY PHP.  A layman’s explanation on SMARTY is located here (Wikipedia) and a more technical primer is here.  Also, the vast majority of the code content (code core) is located out of reach and sight of all clients and the public to protect intellectual property as well as keeping the code as secure and hacker-proof as possible.  There are, however, certain script and ‘include’ segments of code available for modification for the purposes of site customization (though any code changes and modifications (MODs) are always at your own risk)

  • Create a New  Design Template with Help From the Built-in Template Generator / Editor: (or modify/edit the default template)

  • Professional Graphic Designer / Template Designer / Coder: If you don’t already a professional standing by to design you a custom site template (with optional custom coding enhancements) yet that is the direction you are leaning towards then we’d highly suggest that you ask fellow GPT site admins (in the ShiftCode Forum or the ShiftCode Facebook group) for a recommendation or Google the terms “gpt sites designs portfolio”.

    Note that there are a couple of levels in the form of your professional site design uniqueness, time, customization, and cost.  Some designers may offer pre-made (stock) one-size-fit’s-all solutions that you can pick from and order ready made to simply be applied (or imported) to your site.

    When contacting and evaluating a professional site designer then you may want to make sure that they have experience designing templates for ShiftCode sites – Ask them to see their portfolio.  Do they have references that you may contact?  Please know that hiring a professional for a custom design can be relatively expensive depending on the designer and the complexity you are seeking (it’s not unusual to be quoted prices exceeding $500-$700 for a custom design from a professional)  Another good way of finding a designer is to visit your favorite GPT site(s) and note any design credits (usually in the site footer)

TO BE CONTINUED

How to Quickly Identify Which Folder Your Current Design Template / Theme is Occupying

The original ShiftCode script coders were obviously aiming to make switching between design templates / themes (herein referred to simply as ‘template’) as quick and painless as possible by tucking away everything related to each template in its own totally separate web folder.  All the design related files including template specific images are all located in the template’s own folder or a subdirectory branching of that folder (like an /images sub-directory)

Your initial dilemma?  Which of the 5 or 6 similarly named (with two digit numbers) folders does the template I’m using now originate from?  Yes, I used to be quite confused and frustrated trying to figure this out until I ran across the simple answer while investigating something else in the code.

The Secret Mystery Solve:

Ok, all you need to do is surf on over to your site’s home page in pretty much any web browser and choose to view the page source code (which for me and my Google Chrome browser ends up being a right click on any portion of the web site and choosing ‘View page source” and I know that all other popular browsers to have a similar ‘view source code’ function)  When your source code view page open up then if you know what a <Head> section (towards the very top of the page code) is then look for a style.css (main styling cascading style sheet file) reference that looks like this [<link type=”text/css” rel=”stylesheet” href=”/templates/55/style.css” />] (without the square brackets “[“)
If you don’t know where to look for the <Head> section of the page source code then simply look for the opening <Head> tag that starts off the section at the top of the page with an opening head statement that looks like this <Head> (letter case does not matter here) – That is where your <Head> section begins.  On my source code then my opening <Head> tag occurs on code line #3 just after the <html> tag.

Now look further down (maybe 10-20 lines down) for a closing head statement that looks like this </Head> (with a slash through before the word signifying in coding language that it’s an end to a statement or section)  In my own case then my closing </Head> tag occurs by itself on code line #24 (Yes, you also should have found it by now – it’s easy!  if you are still having issues finding your <Head> sections then I suggest you Google it (explaining that further would be beyond the scope of this article))
Anyways, everything (all the code) between the opening <Head> tag and the closing </Head> tag is referred to as the head section.

Ok, now in the head section then look for a statement that has a ‘style.css’ file referenced in it.  My code looks like this [<link type=”text/css” rel=”stylesheet” href=”/templates/55/style.css” />] (without the square brackets “[“) and whatever number occurs after the ‘/template/‘ part is the number of the folder that your currently active default design template is using (“/templates/55/“) In this case my template is in the “55” folder off of the “template” folder.

Now you can go poke around in that folder at will in the File Manager (on the lower right menu under ‘Files & Templates’)  You may also want to write down this location until you have it memorized.

Theme Folder in the ShiftCode File Manager

Designing a ShiftCode GPT Site from the Defaults – Step-By-Step

This whole section was included just to walk you through step-by-step how I (myself) go about designing a ShiftCode GPT from the beginning defaults.  It’s a hybrid combination of design options previously described in this site.  Please note that I have over a decade of web site development, coding, and intermediate graphic design experience but if you can keep up with me then I’d say this is truly the best way to go about the whole ordeal.  As previously mentioned here then I’m starting with the defaults which means that I’m currently showing this (below) as my new ShiftCode GPT site (click to enlarge):

defaultgreytemplate

At this point then we will presume that you have made backup copies of any / all code that you will soon be modifying.  If not then please stop now and surf on over to our ‘Make Complete Backups of the Default Code First: (Crucial!)’ post and follow the instructions – don’t be sorry you didn’t make backups!  As you’ll find, it’s WAY TOO EASY to lose track of this or that piece of code while you are editing and know that something as simple as using a comma instead of a period, or forgetting to close a <DIV> statement can instantly bring your site to its knees and it’s not uncommon for a coder to search for hours trying to figure out what’s wrong.  If you don’t have an earlier backup to fall back on then it’s really easy to cause a problem that may take half-a-day to solve (when instead you could have just simply restored a backup if you had only paid attention here)

It’s no accident that ShiftCode has provided us with a modern style structured default template that contains examples of most all of the needed features which essentially teaches you how they are implemented.  Having examples of functions and how they are called is much better than having to constantly be referring to some code reference book and far superior to taking weeks to learn what’s going on in the code and where.

Creating and Placing Your Site Logo:  If you already have made a logo image for your site then you are already ahead of the game and you may skim through this section until we get to the part where we are placing the logo on the site.  We will be aiming to place the logo in the upper left side of the very top (header area) of the site where it currently likely is showing a text placeholder which says ‘Your Logo Here’:

logohere1

In this design we will be replicating the default grey template provided (UltimateGPT Template v2.0) and adding a new template that is identical to the old default template (code wise) but we will be making it our own by renaming the template and then telling the site to use the new template as the default.

While logged in to your ShiftCode GPT Admin Panel then find the ‘Files & Templates’ navigation section in the lower right side of the panel (as seen below):

fandtemplates01

In that section then click on ‘Templates’  Now you should be seeing this (below) content in the larger center section of your admin panel where I’d like you to notice the template ‘Name’ ‘UltimateGPT Template v.2.0’: [LAST WARNING: Again it has been assumed here (and it’s in your best interest) that you have already made backups of the recommended files (enough said – enough warnings already)]

tempcont01

Now click on ‘UltimateGPT Template v.2.0’ to reveal its contents.  You should then see an upper section of code titled ‘Main Header’ and a lower section of code titled ‘Main Footer’  If you’ve ever wondered what the code that comprises the site’s functionality looks like then know that what you are looking at in that upper and lower section is only a very small part of that code.

Ok, getting back to making and placing a logo on your site.  No doubt you’ve noticed the text saying ‘Your Logo Here’ on the very top of the default template showing on your site.  That’s the place we’ll be aiming for when we install your logo.  If you already have a logo made (either yourself or by a professional designer) that you like then feel free to skip ahead while I try to cover all the bases below in explaining how to make a nice looking compelling and desirable logo to new GPT admins of all types and graphic design skill levels.

Generate a Basic Logo Easily: (with the built in tool) If you are a total novice at creating a logo for a web site then don’t worry, ShiftCode has already thought of you and know that there is a very basic Logo Generator built in to your admin panel.  In the ‘Files and Templates’ navigation section (lower right menu) please find and click on the ‘Logos’ selection under the ‘Templates’ heading.  You then should see two ‘Generated’ logos that came as default examples of what a generated logo potentially looks like.  They also can serve as a starting point for your designing your own logo just by editing what’s there (or, you can of course start from scratch in generating your logo.  I’ll describe starting from scratch first.

Just above and slightly towards the left of those two already generated example logos you’ll find a text link that simply says ‘Generate Logo’ – click on it. You’ve just discovered the built in Logo Generator and you should be seeing thing on your screen:

Logo Generator

If you just relax and take a little bit of time to read each field of the Logo Generator then you’ll likely quickly discover how very basic this tool is and if you just spend a little more time thinking about how potentially powerful it is as well.  Also, to the right please do notice the the seven layer tall stack of white question marks located in blue circles (next to the ‘Main’ navigation menu on the right):

qmarkstack01

Now hover over the top question mark with your mouse cursor (don’t click it – just hover over it)  Very quickly (it takes only fractions of a second) you should see a line or paragraph of help text that we’ll call ‘tool tips’ appear describing the field directly over on the left of it.  The question mark ‘tool tips’ are located liberally throughout the admin panel designed to provide you with handy help tips describing most every option that you have throughout the admin panel.

The first ‘ID’ field is an automatically incremented number that just keeps each generation of logo separate from the last and next generations.  The ‘Name’ field is likely blank when you first reach the page though you do have to assign your generated logo a unique name (totally of your own choosing) a name before the tool will allow you to save your creation.  I named my generated logo (in the image above) ‘yoursitenamelogo’ for the purposes of this discussion.

Next you’ll see that we have a field called ‘Background Color’ and it is exactly that (the background color of your generated logo)

TO BE CONTINUED

Designing an Enticing Landing Page (Optional)

NOTE: At this point I am going to declare that proceeding further requires some basic HTML skills and aptitude.  I will not be explaining HTML code elements from the ground up and if you already don’t know what a <DIV> statement is or does (you don’t have a clue) then I’d suggest STOPPING HERE, not going further until you 1) spend a good week or two heavily studying basic HTML design elements, or 2) you seriously consider NOT making a landing page (a nice extra step) and sticking with modifying the basic design template you’re given by default, 3) you invite a friend that knows a bit about HTML to help you, or 4) you hire a professional.

The reason this is optional is that rarely do I see a GPT site take advantage of this rare opportunity to really SELL your site’s visitors (prospective members)  Why have their first impression of your site be the remainder of the functions left over for them to see before they become a member?  Yes, you could make that work as well (and I have in the past) but I found that it’s just a whole lot of code that is unnecessary (trying to make one single page look good for both members logged in and visitors not registered yet)

Also think about it this way, this is likely your ONE (1) chance to make a good impression!  Why confuse the first time site visitor with random thoughts from random members in your shoutbox (chat area) and other functions and terminology they may not understand (or worse, some may pick up on a few terms that instantly equal ‘SCAM’ in their mind!)  What I suggest is a landing page with all that you can say to sell your site and close the deal towards visitors becoming members.

You may ask if we can extend the referral system to this extra landing page and the answer is a resounding YES! (as in – yes, your referring members will get credit for their potential referred visitors registering while first landing on the landing page.)  You may also ask if we can make this page the default landing page for all logged out people?  Yes!   I’ll show you how – first lets start planning the landing page.

Below is How I Planned and Built  My Own Landing Page:

Ok, we should think of a good one or two keyword rich page name that would induce a sense of excitement (or at least much better than naming it ‘LandingPage’)  Hmm, in this scheme then know that the name of this landing page will also become part of every member’s referral link so we’d want it short and to-the-point – hmmm…  You can call your page what you want but I’ve come to an epiphany that the words ‘Earn’, ‘Free’ used together may be best for my purposes (and yes, if you like that too then go ahead and use it)

[on an off note – I’ve been using these two very effective words for many years but if you really think logically then they are contradictions.  If you have to EARN something then it isn’t FREE (anyways, it’s worked for me)]

If you haven’t yet logged in to your ShiftCode GPT Admin panel yet then please do log in now.  Go to Files & Templates(lower right navigational menu) > Pages and you should be looking at a center section that lists all the various pages of your site coded in red and blue.  If you only have red items don’t worry because red means that the pages are default parts that have come with your site and blue means those pages that may have been custom created.  Our new landing page will be coded blue because it will be an added custom created page.

Before we dive right into things I’d suggest that you take a look around by clicking on a few pages just to get the hang of things (only I wouldn’t suggest clicking on the page save icon that looks like this Page Save Icon (a floppy disk) until you know exactly what you are doing)  For example this (below) page is normally the page that everyone (unregistered new visitors, logged out members, and logged in members) see by the default standard (which is a lot of circumstances for the code of one single page to handle):
Default Home Page for Everyone!
Why keep the code so complicated on one page?

Not only is it complicated for the coder to keep track of but it also takes up valuable site speed with a lot of conditional (is the viewer a member or not?, etc) code.  Why not just make a separate page for all people who are not logged in to come to – and that’s why this article is here.  Creating that landing page.

Actually Building the Landing Page

Click on the ”+ Add Page‘ link towards the top left of the center section.  You now should be seeing a page building area that looks similar to this (below):

Page Building

Getting right to the task let’s set our new ‘Path‘ to ‘earnfree‘ (I suggest all lowercase in this path – it IS case-sensitive) We’ll also go ahead and ‘Name‘ our landing page name to a descriptive title such as “Earn Online for Free” Yes, if you are going to name your path and landing page something else then that is fine here only replace each with your own ideas (though let’s be clear here that it is totally fine for you to use what I suggest if you so choose)

This (below) is what we’ll end up seeing (I’ll continue to explain each in turn below):

Page Creation

That Translates Into These Simple Choices

Path:

earnfree

“Path” really can be almost anything at all that you want to put there (some people simply use the word ‘home’ here)

Name:

Earn Online for Free

“Name” is the text that will become the page title (NOT the name of the file) so you would treat the ‘Name’ entry as needing a keyword rich description in words of your site (keeping it 128 characters or less is best)

Template:

None

“Template” entry you will want to change to ‘None’ or if you are advanced then you would design a separate template just for this landing page (not covered here)

I prefer not to design a whole template for just one page so I set the template for the page to ‘None’ and I code my design elements into the page itself.

Edit Mode:

WYSIWYG or Textarea
(depending on you & your confidence and skills)

“Edit Mode” will depend upon your skill and preferences.  ‘WYSIWYG’ stands for ‘What You See Is What You Get’ and this mode acts somewhat like an onscreen word processor (best for newbies and novices)

If you are a wiz at coding or if (like me) you prefer using an external application for designing your code (I use both the CodeLobster code editor (they have a free fully functional download version) and a really old (the last before Microsoft discontinued it) version of FrontPage HTML editor (no longer provided or supported)  I create and edit the code in the editor and then copy and paste it into the page editor in Textarea mode the ShiftCode admin panel and then I save the page.

Really any HTML and/or code editor (Google “code editor” or “html editor”) you prefer would do the trick here (if you are drawing a blank then go ahead and use the WYSIWYG mode)

Access:

Everyone

“Access” (Everyone, Members Only, Guests Only, etc.) in this instance should be set to ‘Everyone’ meaning everyone including non-registered guests, non-logged in members, and logged-in members will be able to surf to that page (you’ll see why later on in this article)

NOTE: Again, At this point I am going to declare that proceeding further requires some basic HTML skills and aptitude.  I will not be explaining HTML code elements from the ground up and if you already don’t know what a <DIV> statement is or does (you don’t have a clue) then I’d suggest STOPPING HERE, not going further until you 1) spend a good week or two heavily studying basic HTML design elements, or 2) you seriously consider NOT making a landing page (a nice extra step) and sticking with modifying the basic design template you’re given by default, 3) you invite a friend that knows a bit about HTML to help you, or 4) you hire a professional.

TO BE CONTINUED

(a) Make Complete Backups of the Default Code First (Crucial!)

Thoroughly Read This and Think Through It All in Your Head – Come to an Epiphany That You Will NO LONGER Take the Risk of Losing Hours, Days, Weeks, or Even Years of Hard Work Coding, Configuring, and Designing Your New Site When ShiftCode Has Made it So Easy for Us Site Admins to Perform Complete and Automated Backups!  It cannot be stressed enough that it is definitely necessary to make complete backups all the files that you have access to BEFORE you start tinkering (modifying any code or site template designs)

Though ShiftCode always has your back if you lose any of the default programming code or design template code you shouldn’t have to worry about having to ask anyone for the default files should you mess something up (which is surprisingly easy to do – even for professional coders and designers)  Not only is it embarrassing to ask (I’ve been in that situation quite a few times) but it has the potential to completely halt your site building process until your request is handled (yes, ShiftCode support is usually pretty prompt with such requests but you probably don’t want to be put in the position of awaiting a reply while you (or your designer and/or coder) is in the midst of the creative process)

Also note that as your site build out and customization starts to bloom and all through the entire creative process then it will be necessary to make backups of your customizations in code and design at various stages of the creative process.  Know that modifying web site script code is a very delicate process and only one simple mistake in the form of omitting or adding one single character or command in code can potentially bring your entire site down showing an error (though the error condition would be only temporary until you find and fix the error in code or you restore the file containing the erroneous code from a previous backup)

Resolve Now to Commit to Performing Regular Full Site Backups Well Into the Future:  (Yes, you can thank me sometime in the future for stressing the importance of regular full backups while also giving yourself a nice pat on the back just after that dreaded unrecoverable event happens (God forbid! – but YES they do happen to everyone at least once over time!) simple statistics predict data storage error and/or human error causing an unrecoverable failure at least once (though probably more) in the life of most all web sites (if it were not for your regular backups then you may have been instantly out-of-business should a hardware failure of a hard drive or other crucial data storage device (more common than you may think))

backup_your_site

Another point to make here is to remind you that you are dealing with other people’s money that they have earned on your site and they have the legitimate right to demand their money from you (even in the case of data loss) it’  I don’t need to remind you how even the most polite and kind (initially) people appear to be – if you start messing with their hard earned money people will get them to stand up, pay attention, and become very vocal if there is even the slightest hint that there is a discrepancy in their site account funds (even if it’s not your fault like a drive failure, database corruption, etc.) then you will instantly be put in an untenable position if your members claim you owe them yet you suddenly don’t have access to any recent records to competently dispute or award their claims (I’ve been there and done that and I can tell you that personally you feel like a complete idiot (all you had to do is make simple backups at least a week apart to still have some idea in what ballpark you owe specific people.  

OK, Enough Talking About Doing It – Let Me Show You How and Let’s Back Everything Up Now!

Prepare a Folder on Your PC or Device to Receive These Extremely Important Backups: I’d suggest that you make the new backup folder somewhere within the ‘My Documents’ or ‘Documents’ folders (one should already be present on your machine.  The reason why I suggest placing all backup folders within the Windows document area is that I know that whatever backup application you may have running (or eventually purchase in the future) will undoubtedly default to including common default areas where important documents are stored.  So, when you initiate any type of backup of the files on your PC then chances are your crucial GPT site  backups will be included by default.

What should you name your web site backups folder?  This is an area where it simply comes down to your own preferences.  I, myself, always like to have the backup folder name SCREAM at you with folder names I’m notorious for such as ‘DO_NOT_DELETE_THIS FOLDER_EVER – IT_CONTAINS_CRUCIAL_WEB_SITE_BACKUPS! – or the like (lol)