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 |
Tag Archives: design
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”~} |
General Designer Help Sheet
Name | Code |
---|---|
Current Year | {~$smarty.now|date_format:”%Y”~} |
Members – Logged In | {~if $user.valid~} Text Here {~/if~} |
Members – Logged Out | {~if !$user.valid~} Text Here {~/if~} |
Page Title | {~$title~} |
Site Name | {~$conf.name~} |
Site Path | {~$conf.path~} |
Template Path | {~$conf.pathTemplate~} |
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:
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.
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.
![]()
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):
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.
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):
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’:
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):
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)]
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:
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):
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
(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):
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):
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):
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
Designing a ShiftCode GPT Site from the Beginning 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):
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’:
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):
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)]
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:
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):
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)
(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))
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)
Site Design and Coding Considerations & 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)