Tag Archives: coding

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:

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):


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)


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” really can be almost anything at all that you want to put there (some people simply use the word ‘home’ here)


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” 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, 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.