| |
| |
| 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 |
|
|
| |
|
| |
| 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 software 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 has browsed to a specific LISTING Display
Page, the system knows to display the data for a particular listing
according to the location of the MAINBODY tag within the page's assigned
template...in this case the LISTING DISPLAY PAGE TEMPLATE. The only
thing the system needs to find out is "where" to display
the data. 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 LISTING DISPLAY
PAGE TEMPLATE and simply drops the results right there. |
| |
|
| |
 |
| |
|
| |
The dropped results... The Listing Display Page is a little
different than almost every other page of your site. This is because
instead of only using "one template" to display the entire
page's contents, it actually uses two templates in combination.
|
| |
|
| |
First, you have the LISTING DISPLAY TEMPLATE (i.e. BASIC PAGE TEMPLATE 1),
which contains the (!MAINBODY!)
tag, very similar to most of the other page templates of your
site.
Next, you have the LISTING DETAILS TEMPLATE,
which contains all of the individual tags representing the details of the listing (i.e. title, description, price, etc.). |
|
| |
|
| |
The image below shows how the two templates are used to build
a single Listing Display Page. We have called out each template, as well as, a couple of other tags
to show you how each tag is used within the Listing Details Template to display the listing's content. |
| |
|
| |
 |
| |
|
| |
As you can see in the illustration,
it takes the combination of many pieces to build the final
result of what your visitors see on the Listing Display Page.
|
| |
|
| |
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, it looks at the settings within
the LISTING SETUP MENU and the TEMPLATES MENU the admin
here: |
| |
|
| |
1) LISTING SETUP MENU [AND ALL SUBPAGES OF LISTING
SETUP MENU] |
| |
2) TEMPLATES > LISTING DETAILS TEMPLATE (i.e. "CLASSIFIEDS DETAILS TEMPLATE or AUCTION DETAILS TEMPLATE) |
| |
|
| |
1 ~ What should I display and how should
I display it?
As you will see on the LISTING SETUP pages, there are a variety
of on/off switches which will turn fields on/off from displaying,
as well as, determine how long a text box should be, etc.
Looking at the LISTING DETAILS TEMPLATE, you will find a variety
of tags that get displayed wherever they are called out within the details template. |
|
| |
|
| |
To answer # 2, it looks at the settings
within the PAGES MENU for that particular page, which in
this case is the Listing Display Page here: |
| |
|
| |
PAGES > SECTIONS >
BROWSING LISITNGS > LISTING DISPLAY PAGE |
| |
|
| |
|
2 ~ What should it look like?
On this page, you will see an [edit] link in the "Templates
used to build this Page", which will allow you to view
and edit each of the templates specified to display the "AD
DISPLAY PAGE" and the "AUCTION DISPLAY PAGE".
Also 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 the Listing Display
Page.
In addition to the [edit text] link on the PAGES > BROWSING
LISTINGS > LISTING DISPLAY 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? |
|
 |
|
