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:

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

       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;

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

border-radius: 5px;


border-radius: 30px;

rounded corner box