| |
| The above graphics give you an idea of the options you have
with each of the default BASIC PAGE TEMPLATES that we have given to you
when setting up the pages of your site. |
| |
| Header Area |
 |
| |
| We will start with header and work our way down page
identifying every little nook and cranny for you. |
| |
 |
| |
Logo - So, how
is the "MyListingsSite.com" logo being displayed? Real simple.
We have inserted an image directly into the (!LOGGED_IN_OUT_HTML!)
module. The image is called "header_a.gif". You
have two options in replacing this image. First, you can open
up the "images" folder in the software files on
your server and replace the image with an image of your own, giving
it the same name of "header_a.gif". This will automatically
replace our logo image with yours on on the site. Or, you can
open up (!LOGGED_IN_OUT_HTML!) module and replace the
"header_a.gif" image with your own image's name. Here is
where you will find the this module in the admin:
|
PAGE MODULES > VIEW MODULES > HTML > LOGGED_IN_OUT_HTML |
|
| |
| Top Menu Bar |
|
| |
 |
| |
| Top Menu Bar - So, how
is this menu bar being displayed? Well, you won't find "Browse"
or "Search" or any text like that within the template. But,
you will find a Module called (!LOGGED_IN_OUT_HTML_2!).
This is the module that displays the Top Menu Bar. To edit any of
the text, or add/remove a tab, you will need to access this module
in the PAGE MODULES section of the Admin Control Panel. You can find
it here: |
| |
| PAGE MODULES > VIEW MODULES > HTML > LOGGED_IN_OUT_HTML_2 |
| |
| Logged in/out modules have two display states, and
for obvious reasons...the module will display one set of html when
the user is logged out, and then another set of html after
the user has logged in. |
| |
| Tabs - Each
tab is being displayed by using a combination of text (such as "Browse") and css class tags (to display the tab's images). We used css tags to call out the images so that we could reference display the tab with background images using the css stylesheet. This allowed us to create several css stylesheets for you to easily swap out and change the color genre of your site...all of this without you having to swap in and out the tab images. If you look at the LOGGED_IN_OUT_HTML_2 module html you will see for example class="box_head_1_left", which is the class tag that makes a call to the CURRENT "geostyle.css" file located at the root of your software's installation on your server. This class tag displays the background image for the left end of the tab using the specified image indicated in that particular stylesheet. So, if you want to change between colors, simply swap out the "geostyles.css" file at the root of your installation with one of the others we have provided you with. |
| |
|
| |
| Submenu Bar |
|
| |
 |
| |
| Submenu Bar - How is this
menu bar being displayed, you ask? It's actually using the same method
as the Top Menu Bar described above. If you look in the FRONT PAGE
TEMPLATE, you will find a Module called (!LOGGED_IN_OUT_HTML_3!).
This is the module that displays the Submenu Bar. To edit any of the
text, you will need to access this module in the PAGE MODULES section
of the Admin Control Panel. You can find it here: |
| |
| PAGE MODULES > VIEW MODULES > HTML > LOGGED_IN_OUT_HTML_3 |
| |
| As previously mentioned, logged in/out modules have two display states. The
module will display one set of html when the user is logged out, and
then another set of html after the user logs in. For this module,
we used the different html for each state, so when the user
is logged out he/she will see one set of links and after the user is
logged in he/she will see a different set of links. |
| |
| Welcome: Guest
- As you browse through the (!LOGGED_IN_OUT_HTML_3!)
module's html, you will find "Welcome:" text. Just
after this text, you will see the (!DISPLAY_USERNAME!)
module. This module has been "embedded" inside of the (!LOGGED_IN_OUT_HTML_3!)
module. "Embedded" simply means that we are using the html of one module
to call out another module...in other words, they are working "together"
to display the content within your template. Knowing this, you can
determine that the (!DISPLAY_USERNAME!) module is what
displays "Guest" in the template. It displays "Guest"
however, only in the "logged out" state. When in the "logged
in" state, the module will display the user's: username, first
name only, last name only, first name and last name, or email address.
To specify which one you want displayed, simply access the (!DISPLAY_USERNAME!)
module at the following admin path: |
| |
| PAGE MODULES > MISC > DISPLAY USER IDENTIFIER |
| |
| If you browse through the (!LOGGED_IN_OUT_HTML_3!)
html you will see this tag called out as follows: |
| |
 |
| |
| This module has its own unique settings which allow
you to change the text from "Guest" to something else. You
can also designate something other than the user's first name to be
displayed if you want to by using these settings. |
| |
|
| |
| Left Column |
|
| |
 |
| Categories Box
- The categories box is displaying a list of categories
as shown because we have embedded a Category Navigation
module called (!MAIN_CLASSIFIED_NAVIGATION_1!)
whose tag is located in the (!LOGGED_IN_OUT_HTML_6!)
module. There are many category navigation modules to
choose from, all of which have their own specific settings.
To edit this Category Navigation module's settings you
can find it here: |
| |
| PAGE MODULES > VIEW MODULES > BROWSING
> CATEGORY NAVIGATION |
| |
| When you browse to the module by using
the above path and click the "edit" button,
you will be presented with many different options. You
will also notice that most of them are currently set to
"no". This is because we were wanting to get the
specific look that you see in the image to the left. You
will also see that we checked "yes" to display
the NEW icon. This icon will display only in those categories
that the NEW status applies. To view/edit the settings
for the NEW icon please access the following page: |
| |
| SITE SETUP > BROWSING SETTINGS |
|
|
| |
|
| |
| Right Column |
|
| |
| Site Stats Box
- The "Site Stats" box is being displayed within
the html of the FRONT PAGE TEMPLATE. If you look at the
html for this box within the FRONT PAGE TEMPLATE you will
see that the "live users" feature is being displayed
by the (!MODULE_TOTAL_LIVE_USERS!).
The "registered users" feature is being displayed
by the (!MODULE_TOTAL_REGISTERED_USERS!)
module. Both of these modules and their properties can
be accessed through the following admin page: |
| |
| PAGE MODULES > MISC |
| |
| Login
- The login box that you see in the image to the right
is being displayed through a the (!LOGGED_IN_OUT_HTML_7!)
module located in the html of the FRONT PAGE TEMPLATE.
Why? Because after the user logs in, you don't want for
them to still see the login box, right? We have chosen
to use the (!LOGGED_IN_OUT_HTML_7!)
module which can be found on the following page of the
admin: |
| |
| PAGE MODULES > HTML |
| |
| When accessing this module, you will see
that there is some html in the "logged out"
box, but none in the "logged in" box. This tells
you that after the user logs in, they will no longer see
the html that is displayed in the "logged out"
box. The "logged out" box html contains your
typical html table tags, etc. along with a simple login
form that we created using html. |
| |
| Design
Flexibility - The html for this box
is being displayed directly in the TEMPLATE html,
not in a module. |
|
|
|
| |
|
| |
| Main Body Area (!MAINBODY!)
tag |
|
| |
|
| |
MAINBODY tag - The
(!MAINBODY!) tag is used within
nearly every html TEMPLATE of every page on your site. Here's how
it works... The GeoClassifieds system recognizes every page that the
visitor is currently browsing and therefore specifically looks for
the MAINBODY tag to display the appropriate information for that page.
So, if the visitor is browsing the categories, the system knows to
display the current category's ad results table (see image below for
"Automobiles" ad results table). The only thing the system
needs to find out is "where" to display the table. So, it
looks through the html code of the template assigned to the current
page being viewed until it gets to wherever you placed the MAINBODY
tag in your BASIC PAGE TEMPLATE and simply drops the results right
there. |
| |
|
| |
 |
| |
|
| |
This same basic MAINBODY tag principle
applies to all of the pages using the BASIC PAGE TEMPLATE. Something
you may be wondering is "how do I change the colors, text,
and properties that the MAINBODY tag is displaying?" Well,
it's really not too complicated. Let's take a look at the above image
and figure out what's controlling what. From there, you should be
able to figure out most of the other subpages of your site.
Okay, as we have mentioned, the MAINBODY tag is responsible for displaying
the currently viewed page's data. So, where does it pull the data
from? It actually looks to a couple of different places. If the software
could actually think it would probably ask itself the following when
determining what content to display for the MAINBODY tag: |
| |
| |
| 1 ~ What should I display and how should
I display it? |
| |
| 2 ~ What should it look like? |
|
| |
|
| |
To answer # 1, the software looks at the settings
within the SITE SETUP MENU of the admin here: |
| |
|
| |
SITE SETUP > BROWSING SETTINGS |
| |
|
| |
1 ~ What should I display and how should
I display it?
As you will see on the SITE SETUP > BROWSING SETTINGS page,
the very first item is "display category navigation".
By default, it should be set to "on". However, if
you wanted to remove the "Current Category: Main > Automobiles"
navigation from displaying (in the above image), you would change
it to "no". The same thing applies to the rest of
the switches on the page. You can turn them on or off and how
much or little of something should be displayed. |
|
| |
|
| |
|
| |
To answer # 2, it looks at the settings
within the PAGES MENU for that particular page, which in
this case is the Browse Categories Page here: |
| |
|
| |
PAGES MANAGEMENT >
SECTIONS > BROWSING LISTINGS > BROWSE CATEGORIES |
| |
|
| |
2 ~ What should it look like?
On this page, you will see a [edit text] link, which will allow
you to access all of the text being displayed on the page. Go
ahead and give it a click. You'll see all of the different text
that gets displayed on all of the site's browsing pages, including
the text within the image above, including "Current Category:",
"Featured Classifieds in", etc. IMPORTANT:
Whenever you want to change the text for an actual category
name, this is done through the CATEGORIES MENU.
In addition to the [edit text] link on the BROWSE CATEGORIES
page, you will see a "fonts management" link. Click
this link and you will be able to control the font styles and
colors for the same pieces of text you just saw after clicking
the [edit text] link. Note that not every single piece of text
has its own font. Some text will share a font style. |
|
| |
|
| |
The MAINBODY tag is the single most important
tag you will use on your site. That is because this single tag is
smart enough to recognize which page the visitor is browsing, make
a call to the database and display the appropriate fields that you
have turned on/off, the text you have designated, and the font for
that text. This is all done based upon the steps described above. |
| |
|
|
| |
| Footer Area |
|
| |
 |
| |
| Footer - Okay, we're almost
done with the FRONT PAGE TEMPLATE. So, how is this footer being displayed?
By now you may be figuring out that we like to use modules. Modules
can save you an enormous amount of time, because you only have
to edit the html code in one place instead of every template. Scrolling
all the way to the bottom of the FRONT PAGE TEMPLATE, or CTRL-F "footer",
you will find a Module called (!LOGGED_IN_OUT_HTML_8!).
This is the module that displays the entire footer. So, if you want
to change the text links, logo, copyright information, or cc/PayPal
image, you will need to go directly to the html that controls this
module, which is located in the admin panel here: |
| |
| PAGE MODULES > VIEW MODULES > HTML > LOGGED_IN_OUT_HTML_8 |
| |
| Logged in/out modules have two display states, and
for obvious reasons. The module will display one set of html when
the user is logged out, and then another set of html after the user
logs in. For this module, we simply used the same information for
both states, so whether the user is logged in or out the same menu
bar will display. |
| |
|
|
| How it works...CSS
file (COLORS) |
|
|
| |
This software version is an html template based
program. So, if you know html (and you should as a website owner), CSS control
should be old hat to you. You probably already know how "class"
tags work and how you can choose to reference these fonts in one of two
ways...internally, which means the CSS controls for each class tag
are referenced in between the <HEAD> tags of each html template...or,
externally, which means all class tags are referenced on a single
.css document somewhere on your server. This document is then referenced
by a "rel=" path within the html template. We chose externally,
because who has the time to open every single html template and change a
class tag when all you really need to do is open one .css file and change
it there?
So, for most of you, you can just go to town and change the CSS at will.
For the rest of you who love to see things spelled out (no worries, we're
in the same boat), keep reading...
In the <HEAD> area of every single page template, including this BASIC
PAGE TEMPLATE(S), you will see a line of code that references a "geostyle.css"
file. The actual file itself is located in the root directory of your software
installation on your server (same place as your software's "config.php"
file). This means that the template is looking to this particular .css file
for the correct information to display the text and/or background colors,
background images, etc. Go ahead and ftp to your server right now and see
if you can find it. |
| |
| KEEP IN MIND:
The .css file is ONLY controlling the elements (fonts/background
colors/background images) for each template. The .css file does NOT
control those elements that are dynamic (pulled from the database)
for each MODULE and PAGE. A good rule of thumb is that, if you look
in the html template, or in one of the LOGGED IN/OUT HTML MODULES
(where you'll find more html), and see a "class" tag, then
you can be pretty certain that its' properties are controlled by the
"geostyle.css" file. |
|
| |
|
With all of that said, let's take another look at the
BASIC PAGE TEMPLATE(S), but this time from a CSS perspective...
|
| |
|
Let's say you want to simply change the colors to match
one of the colors schemes we advertised on our site:
|
| |
| Step 1: |
On your PC should be the distribution
files for the software. If not, FTP to your server and save
those files somewhere on your PC. You should see a folder
called "themes". Inside that folder are subfolders
with various color schemes. Open one of the folders (on your
PC). You should see a .css document called "geostyle.css",
which is identical (in name only) to the existing file located
at the root of your installation files. |
| Step 2: |
Open an FTP connection and ftp
this file to replace the existing .css file located at the root
of your software's distribution. |
| Step 3: |
Refresh the your site and you should
see the new stylesheet take affect. |
| Step 4: |
Your done...only three steps. How
long did that take? 20, 30 seconds...? if that? |
|
 |
|
