| |
| The above graphic gives you an idea of how valuable modules
are in displaying information on your site. Without them, you can see how
the page is really made up of very basic html. Next, we'll further analyze
each segment of the page, so that you will know exactly how each element
is being displayed. We will start with header and work our way down page
identifying every little nook and cranny for you. |
| |
| Header Area |
 |
| |
 |
| |
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. |
| |
|
| |
| Site Search Box / Browse Listings Box |
|
| |
 |
| |
| This section of the page is being displayed through
the following (!LOGGED_IN_OUT_HTML_4!) module.
We have simply created a couple of tables in html and inserted some text and modules
in each table to display the Site Search Box and the Browse Listings Box. |
| |
| Site Search Box - This data is being displayed
using a combination of some text we entered directly into the HTML module and the tag for
the Search Form: (!MODULE_SEARCH_BOX_1!).
|
| |
| Browse Listings Box - This data is being displayed
using a combination of some text we entered directly into the HTML module and the four tags
that are needed to display recently placed listings: (!NEWEST_ADS_LINK!) (!NEWEST_ADS_LINK_1!)
(!NEWEST_ADS_LINK_2!) (!NEWEST_ADS_LINK_3!).
|
|
| |
| 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 |
|
The Main Body area of the page is where you would typically display content
that is specific to the page that the user is viewing. As you will
see in the next section of this tutorial, a MAINBODY tag will be used to
display page specific content for each page, all the while, using the same
template across multiple pages. For example, if you wanted to, you could use the same
template for the search page as the registration page. The reason why is that the software
scans the template for the MAINBODY tag. Wherever it finds the MAINBODY tag, it
substitutes the MAINBODY content for that specific page. For the search page, it would display
the 'search form'. Likewise, for the registration page, it would display the 'registration form'.
We have taken a slightly different approach on the software's default Front Page Template,
however. In the Front Page Template we chose not to use the MAINBODY tag. Instead,
we decided to use a series modules so that we could position each feature exactly
where we wanted it to show up. Take a look at the image below. We have labeled
each feature with the tag that is being used to display that feature: |
| |
 |
| |
Featured Listings -
This text can be found directly within the html of the template.
Simply scroll down or CTRL-F for the "Featured Listings"
text and edit as necessary. The [more info]
link is also located as text within the FRONT PAGE TEMPLATE. We have
used one of the 20 available Extra Pages that can be found in the
Pages Management Menu of the admin and named it "Pricing".
We then pointed the [more info] link to this page. We thought you
may want a page to display your Pricing structure for customers who
place listings on your site. You can use this page to describe each
fee including what it would cost for them to place a Featured Ad.
The Featured Listing images (listings) themselves are being displayed
by the (!MODULE_FEATURED_PIC_1!) module.
You can access this module and change its settings in the admin through
the following path: |
| |
| PAGE MODULES > FEATURED > FEATURED MODULES -
LEVEL 1 |
| |
| Recently listed -
This text can be found directly within the html of the template.
Simply scroll down or CTRL-F for the "Recently listed"
text and edit as necessary. The results table is being displayed by
the (!NEWEST_ADS_1!) module.
You can access this module and change its settings in the admin through
the following path: |
| |
| PAGE MODULES > NEWEST |
| |
Hottest Listings - This text can be found directly within the html of the template. Simply scroll down or CTRL-F for the "Hottest Listings" text and edit as necessary. The results table is being displayed by the (!MODULE_HOTTEST_ADS!) module. You can access this module and change its settings in the admin through the following path: |
| |
| PAGE MODULES > MISC. DISPLAY |
| |
|
| |
| 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 FRONT
PAGE TEMPLATE, 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
FRONT PAGE TEMPLATE, 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? |
|
 |
|
