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)