First, let me say that you are not going to learn how to write HTML or CSS or PHP pages here! If you don't know at least the basics of HTML, CSS and PHP: stop and go to
W3SCHOOLS for HTML and/or
W3SCHOOLS for CSS and/or
W3SCHOOLS for PHP. In my opinion, W3SCHOOLS is a good place to start learning the basics (
in spite of W3SCHOOLS actually being outdated) of HTML, CSS and PHP - An actual and updated site is "
Sitepoint - HTML Reference". But if it's not the case, lets go on.
We are NOT going to discuss about O-R installation! I assume you have successfully installed O-R and have your site running without problems. By the way, I have a suggestion about it: make a local installation at your personal computer! This is the best, safest and easiest way to learn and to start. My recommendation is to install the latest version of
WAMP5. Every single line of code I write, was and still is first tested at my local site. The ONLY program we are going to need is a text editor, like "Notepad". There is no need of any other program! If you have and know how to use "FrontPage" or "Dreamweaver" or other HTML editor, good - I use
Notepad2 all the time and Dreamweaver once a year. :)
O-R v.2.x places ALL template files inside a sub-directory of the "template" directory. The default installation of O-R gives you 2 sub-dir's: "vertical-menu" and "cms_integration" - inside these folders are the template files. Each one is a site template and each one have its own template files. Our atention will be only to the "vertical-menu" sub-dir and to all files inside it.
You want to personalize your O-R site and these are the ONLY files you will need to modify!
FIRST ACTION: make a copy of "vertical-menu" folder (also copy all files/dirs inside it) and rename the new folder to "test". We are going to work with these files and lets keep the original ones intact. After doing this, login as Admin, go to "Site Config", "Template" tab and at "Site Template" select "test" - save it and logout. Now your O-R site is using the folder you named as "test" (and all files inside it) as the site template. So now you have like the image (#02) at your right.
The first file we are going to work with is the
main.html file, inside your "test" folder. In fact, this is the main template file of your O-R site. But before saying more, this needs to be clear to you: EVERY website have a main page, a welcome page usually named "index.html" or "index.htm" or "index.php" or... It is the very first page that all websites displays when you access the site. O-R is not different, it has at the root of the installation an "index.php" file that will "say" to the software what to do and what to display - so the software (O-R core files) will search for one file at your site template folder:
main.html - this will be the very first file O-R will display when you access an O-R site. As an option... we can create another file named "page1_main.html" and this file would be read first, but lets talk about this option later and lets keep in mind the importance of the
main.html file. Once it is clear to you that
main.html file will be the welcome page, lets talk about its structure.
Please, take a look at the HTML source code of your
main.html file. Lets say this way: it has an "HEAD" section... an "HEADER" section... a "CONTENT" section... and a "FOOTER" section. We could also say a "MENU" section (horizontal and/or vertical), that can be inside the "HEADER" and/or inside the "CONTENT" and/or be a independent section. Anyway, lets start with the "HEAD" section:
HEAD SECTION:
Once we are talking about "templating", there is not much to say about this section. These are the default lines for this section:
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
{load_meta_keywords}
{load_meta_description}
{load_css_style}
{load_css_editor}
<title>{site_title}</title>
{load_js}
{license_tag}
<link rel="alternate" type="application/rss+xml" title="{company_name} - {lang_rss_lastmodified_link_title}" href="index.php?action=rss_lastmodified_listings" />
<link rel="alternate" type="application/rss+xml" title="{company_name} - {lang_rss_featured_link_title}" href="index.php?action=rss_featured_listings" />
</head>
Read
this page for better understanding the above template tags.
HEADER SECTION:
As you can see, we have a "div" with an "id=pagewidth" starting and opening this section - this "div" is the MAIN ONE, once inside it we will have the site as a whole. I mean: from now on, EVERYTHING is inside this "div". So if you wish to change the "width" of your site, this is the "div" you may change the settings at the stylesheet. By default its width is set to "100%", so your site will use all available area, but you could use a fixed width and having the site floated left or right or centered (not floated). The closing tag of this "div" is at the very end of the "main.html" file, after the FOOTER section.
The HEADER section is contained by the "div ID=header" and this "div" contains another three "div's": time_date, logo and slogan ("class" names):
<div id="pagewidth">
<div id="header">
<div class="time_date">
<!-- BY DEFAULT, HERE GOES THE JAVASCRIPT CODE FOR DATE -->
</div>
<div class="logo"></div>
<div class="slogan">OPEN SOURCE SOLUTION TO REAL ESTATE LISTINGS</div>
</div>
Take a look at your stylesheet and read the settings for these 4 div's ("div id=header" with 3 "children"). I bet it will be quite obvious the meaning of the settings you will read: the "div id=header" is the main container with a background image, the div "class=time_date" contains the JavaScript code present at your "main.html" file, the "div class=logo" prints a logo (image) as background and the "div class=slogan" contains a Slogan text present at your "main.html" file. That's all, could not be more simple. Play with those settings! Change the colors, font-size, padding's, etc. Build your own "logo" and replace it with the default one. Before changing anything else at your site, play with this section and make it look as you wish. You may find out the "relations" between those div's (and its background images) and you will learn how to handle their settings.
CONTENT SECTION (with a vertical MENU inside it):
...INCOMPLETE... THIS IS A WORK IN PROGRESS.
