Tag Archives: quick start

A Nice New Complete & Functional ShiftCode GPT Site Built from Scratch (Defaults) & Open for Business in the Least Possible Time Possible

Yes, I’ve come at this goal set forth in the title of this post in several different directions over the weeks I’ve been building the documentation.  Inevitably its ended falling way short of my own expectations. I’ve finally reached an epiphany that I should start from scratch with a whole different new promising concept and not stop until I’m open for business on my own test GPT site PaidToSite.com (only a test site now for the purposes of this documentation project but once done it will be a real live and open for business GPT site of my own!)

As mentioned earlier I’ve reset the site template back to defaults so that I’ll be starting just like you probably are now (if you are reading this)  Know that most of the decisions I make going forward are my own ‘judgment calls’ and you are expected to use your own creativity and ‘vision’ for what your own GPT site will look like, work, and offer.  There are a few decisions that are crucial (which I will point out) and its best that you stick with my suggestions with regard to them (you’ll know which these are when you see them.)

ShiftCode GPT UltimateGPT Template v2.0 (default)

Deciding Your ‘Brand’s Color Palette:  Where does one start with such a seemingly daunting project?  I know for myself it starts with deciding upon my color palette (I know the default grey, blue, and white simply wont cut it for me) Remember that you are building a new ‘brand’ of GPT site here.  What thoughts and emotions does your brand want to convey?  If you are totally stumped then perhaps start with researching (Googling) the ‘psychology of color’.  Then take a look at sites that you tend to prefer (feel ‘happy’ at) and consider the color palette they use.  If you are not intuitive with what colors tend to look good together that there are a myriad of sites out there where you can be assisted with what colors ‘go well with’ each other as not to clash.

I’m not happy with just a static color for my background though.  One could look on the web for free to use (explicitly stated – unless you wish to pay for their use) seamless background image tiles (when you add the small background tiles as your background then they can be set to repeat (or ‘tile’) – the reason you may want the ‘seamless variety is so that the background doesn’t end up looking like a tile floor – the images are designed to fit together imperceptibly (with no ‘grout’ between tiles) so as they make up a single image as a background)

For me (and this project) I’ve already decided (from past experience and personal preferences) that I will stick with a midnight blue background and add complimenting colors along the way.  I, myself, am bored with tiled image backgrounds so I’m going to go for what’s called a ‘gradient’ background which starts with one color at the top and then slowly ends up being another (lighter or darker) color at the bottom.

Making the Gradient Background:

The Image Based Approach:  You could start by looking for a gradient background image (usually manifesting as a single very long and very thin background image that will span the entire length of your site’s pages.  There are free gradient image generators that you can employ for this though know that the image should be very thin [10 pixels or so maximum] (so that the file size isn’t real large causing slow page load times while the image is loading) and very (extremely) long [multi thousands of pixels long – the longer the better] so as the image doesn’t end before the longest page on your site ends)

One may look for one of the gradient image generators by Googling the words “free online gradient image generator” (I usually choose the ‘dynamic drive’ based gradient image generator (a few results down the page) as a personal preference) Yes, there are issues with taking this image based approach.  Remember, your GPT site will tend to have very long pages filled with lengthy lists of offers and if the background image stops before the page does then there will be an abrupt stopping and starting of your gradient image leaving a sophomoric web designer impression and ‘look’ to your site.  Everything you’ll need to know about applying background images via your CSS is shown here.

The CSS Coding Based Approach:  (note that Internet Explorer 9 and earlier versions don’t support these coded gradients – but everyone should have updated to a newer version than IE9 years ago – right?)  If you haven’t already, you need to locate the web location of the CSS file your template is using. A way to locate where your CSS file will be (template ID# folder) is simply to look in your ShiftCode admin panel on the ‘Templates’ page (where you should already be by now)  The templates page is located under the lower right ‘Files & Templates’ menu (click on ‘Templates’)

On of the main advantages of using this CSS base coding approach is that your pages will load much faster if you’re not trying to display an image. Finding Your Template Number
Note on the right (above) which template has the ‘Yes’ in the ‘Default’ column.  On your site the default template may likely be the ‘UltimateGPT Template v2.0’ but on my own site I’ve been building and experimenting so my default template is actually named ‘My UltimateGPT Template v2.0.1’ which is only a copy of ‘UltimateGPT Template v2.0’ (so I have a copy of the original default)  What you want to notice is the ID number of your default template (in my case it’s 51)  That number is the number of the web folder location of all (or most) files associated with that template.

Now under the right side ‘Files & Templates’ menu click on the ‘File Manager’ and using the upper folder drop down then go to the ‘/templates/’ folder that ends in your default template ID number (as seen below)  You should see various files including your main Cascading Style Sheet (CSS) file for that template named ‘style.css’ – click on it to open up a viewing window (the large white window on the left below) – now click ‘Edit’ below that window to enable CSS file editing (in plain text)  Be careful as anything you change here could mess a few things up if you are messing around.File Manager CSS Access
The only section I changed was the ‘body’ section as such:

body
{
       background-size: auto
       background: #000016; /* not supporting gradients */
       background: -webkit-linear-gradient(#000016, #0000ff); /* Safari 5.1 – 6.0 */
       background: -o-linear-gradient(#000032, #0000ff); /* Opera 11.1 – 12.0 */
       background: -moz-linear-gradient(#000016, #0000ff); /* Firefox 3.6 – 15 */
       background: linear-gradient(#000016, #0000ff); /* Standard syntax (must be last) */
       margin: 0;
       padding: 0;
       font-family: ‘Verdana’;
       font-size: 12px;
}

Notice that I only changed (replaced/added) the ‘background’ statements to achieve this stunning blue gradient page body background:Blue Gradient Page Body Background Using CSS CodeThen if you take the same CSS code and reverse the colors and apply them to the #body_container then you end up with this (colors in the exact opposite direction – cool huh?):

#body_container
{
       clear: both;
       width: 1000px;
       background-size: auto
       background: #0000ff; /* not supporting gradients */
       background: -webkit-linear-gradient(#0000ff, #000032); /* Safari 5.1 – 6.0 */
       background: -o-linear-gradient(#0000ff, #000032); /* Opera 11.1 – 12.0 */
       background: -moz-linear-gradient(#0000ff, #000032); /* Firefox 3.6 – 15 */
       background: linear-gradient(#0000ff, #000032); /* Standard syntax (must be last) */
       margin: 10px 0 20px 0;
       border: 1px solid #8b8b8b;
       border-radius: 5px;
       box-shadow: 0 1px 2px #000, inset 0 1px 0 #e0e0e0;
       overflow: auto;
}

bodycontainegradient01 
If you like the rounded corners look then change this statement in #body_container to a higher number:

border-radius: 5px;

to

border-radius: 30px;

rounded corner box 

Securing and Maintaining Access to Your GPT Site Admin Panel

Your ShiftCode Admin Panel

Refer to any welcoming email message from ShiftCode staff you have likely already received after your ShiftCode licensing purchase.  Look for references to your ShiftCode Admin Panel URL (web location) and login (username and password)  Enter (or copy and paste) your ShiftCode Admin Panel URL into your browser and proceed to that web location.  If all things have gone well so far you should now be viewing a special admin-only page that looks like this (below):

scadminlogin

First things first, you may have noticed that your own special ShiftCode Admin Panel URL contains a series of what looks like gibberish letters and numbers (like this ‘63d130df7xbe167e2’)  This is called a security ‘hash’ (it’s basically a URL with an encrypted section added on) – it is unique to your own particular instance of the ShiftCode script and you should NEVER reveal that web location to anyone else (other than yourself)  The admin URL containing the hash is purposely made hard to guess by hackers or others that may have bad intent with regard to your site (yes, this hash code is changeable via a ShiftCode support ticket but rarely (if ever) is this needed)   We’d suggest that you take the time to write down and safely bookmark this URL as this is where most all functions of your site are configured and performed.

Next we’ll address your assigned admin username and temporary password.  Chances are that you’ve been assigned a relatively simple admin username and password.  You’ll want to change these to your own preferences as soon as possible (now?) for increased security purposes!

Use your given admin login to log in to your admin panel.  You should then see a seeming complicated (but really easy to navigate and powerful once you get used to it) screen that looks like this:

scadm1

Next find the ‘Main’ heading (link box) in the upper right corner of the admin panel just under the ShiftCode logo (as seen below)

scmain02

Click on Users & Groups.  Notice the top section of that page is for ‘group’ management (which are basically defining roles available to assign to admin(s), staff, and designers, etc)  What we’re interested in now is the ‘User’ management area just below the group management area.  Notice that your own administrator account is listed along with the ‘shiftcode’ admin user account (the shiftcode admin user account is for internal official ShiftCode staff and cannot be edited or deleted because it is necessary and mandatory)

Instead of editing your own administrator account (while also being logged into the same admin user account) then we feel it is much safer to create a secondary new admin account for the time being (after you’ve successfully logged into the newly created admin account then you can delete the original admin account)

Click on ‘Add User’.  Enter your desired new administrator Username and Password (we suggest a strong password that includes a mixture of upper and lowercase letters, at least one number, and at least one symbol character – though strong passwords are not enforced at this time then it is best for your own good)  Make sure that you’re not using a password you have ever used at any other site (past or present)  The new admin account you are creating will have ultimate access to all your sites functions including financial balances, etc. don’t shoot yourself in the foot by specifying an easy to guess or repeated password!

Specify that this new account is part of the ‘Administrator’ group (chances are that at this point you have no other options)  The Description field is totally optional / not crucial and will be explained at a later point in this documentation.   Leave the Description field blank.

Take a moment to write down your new username and password (now!) Click the ‘Add User’ button to finalize your new administrator Username account creation.  You should see a green headed ‘Success!’ message further stating  that ‘The user has been added’  At this point the User management area should be showing your old admin User, your newly created admin User, and the permanent internal ‘shiftcode’ admin user account.  Click on the ‘Logout’ button on the upper red bar on the upper left under the ‘ADMIN PANEL’ heading (as seen below):

logout01

Now log back into the admin panel using your new administrator account credentials.  Go back to the Main > Users & Groups  area (the area where you just created your new admin account)   Now click on the blue gear box at the right side end next to your old administrator user account and choose delete.  Confirm that you wish to delete that account and then this mission has been accomplished!  Give yourself a pat on the back safe in the knowledge that your new administrator account is safer than the previous default admin account assigned to you.

Incidentally, that ‘Users & Groups’ area is also the area where you can eventually add a new group of sub-admin privileged staff members or site template installers and when you add a new group you will be able to specify exactly the level of access each new group has.  It is NOT necessary to make any new groups at this point in time (continue the quick start guide and stay focused on the important steps we point out – you can go back and add groups etc. at a later point as needed)

Locating & Bookmarking Your ShiftCode GPT Admin Panel On Your Own Domain

AFTER, your site has started appearing on your own domain name (www.MyOwnGPTSite.com) as well as on the shiftcode.com subdomain (myowngptsite.shiftcode.com) then as a matter of preference (though it has practical benefits as well)

First, log-in as the administrator on your shiftcode.com sub domain (chances are you are already logged in.  Take a look at your browser’s URL bar.  Note everything that comes after the ‘shiftcode.com‘ part (starting with a slash (“/“), continuing with your unique hash code, another slash (“/“), and then ending with an index.php (select and copy all that to the clipboard)   Now open up a new browser tab (or window) and type in your domain name starting with the ‘www.’ part and then immediately after your domain then past everything you copied from your sub domain based admin panel URL and past it after your own domain name now – hit return (or enter)  You may be asked to -re-login to your admin panel.  Now once you are in to your admin panel on your own domain name then bookmark that URL and use that as your main admin panel access URL.  It will likely prove useful and have a few advantages over using your sub domain based admin panel (though bookmark both admin panel URLs just in case your domain name service is ever disrupted (rare))

New GPT Site Admin Quick Start Guide Home

Welcome to the ShiftCode New GPT Site Administrator Quick Start Guide and congratulations on your decision to go with licensing the ShiftCode PTS/GPT script.  This guide (this portion of this client support site) is intended exactly as a QUICK START guide designed to guide you through crucial initial steps and important configuration settings and options that will give you a boost towards getting your site(s) configured, functioning correctly at a base line level, and well towards your site grand opening day.

This quick start guide does not cover all aspects of site configuration – your attention to detail and common sense should still be forefront in your mind before going live with your site.  Yes, more topics in more detail will continue to be added to this support site over time.


 


Consult the New Admin Quick Start Guide Menu
to Proceed  —>