Tag Archives: template

Designing and Coding a Site Footer

A web site page is generally divided into the header (uppermost section), the body (the middle area where most of your content goes), and the footer (the lowermost portion usually containing a banner rotator (for your advertising banner rotation), important links (such as important site areas, your privacy policy, and your site’s terms of service (TOS)), web site credentials (top site list badges, etc.), site credits, and a copyright notice.

On your genuine ShiftCode based get paid to site then the default template footer area looks like this (lowermost section):

screnshot#1557 - 'Paid To Site - Members - Register'

In the ShiftCode web site template editor (Files & Templates (lower right menu) > Templates) the header and the upper portion of the body content coding is contained in the upper editing portion called ‘Main Header’ while the lower portion of the body content and the footer coding is contained in the lower edition portion called the ‘Main Footer’ as seen below:

screnshot#1558 - 'Paid To Site - Admin - Templates - UltimateG_'

As you may know already, the main template contains code and doesn’t have a textarea (plain WYSIWYG (what you see is what you get) editing mode)  If you’re not that familiar with editing code then perhaps you should leave it up to your chosen design template designer and/or coder.  if you are going to be attempting to edit the footer yourself then we highly suggest that you make a backup of the entire template (both top and bottom) before you start modifying it.

The default template footer code starts in the bottom ‘Main Footer’ editing area beginning with the code <div id=”footer”> and ends with a closing </div> statement.  Your footer content typically goes between these two HTML statements.

Here’s a pretty universal copyright and disclaimer statement in code:

<p align=”center”>&copy;{~$smarty.now|date_format:”%Y”~} {~$conf.name~} – All Rights Reserved -<br>All product and company names
are trademarks&trade; or registered&reg; trademarks of their respective holders.<br>Use of them does not imply any affiliation
with or endorsement by them.</p>

This above code will yield this below statement
(though with your own site name and the current year):

©2016 Paid To Site – All Rights Reserved –
All product and company names are trademarks™ or registered® trademarks are their respective holders.
Use of them does not imply any affiliation with or endorsement by them.

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

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