Login
Username:

Password:

Remember me



Lost Password?

Register now!
Main Menu
Site Info
Webmasters
admin
admin

Who's Online
5 user(s) are online (4 user(s) are browsing XOOPS Docman)

Members: 0
Guests: 5

more...

Chapter 2. HTML Files

The XOOPS default theme contains 6 HTML files: theme.html, theme_blockleft.html, theme_blockcenter_c.html, theme_blockcenter_l.html, theme_blockcenter_r.html and theme_blockright.html.

Each file will be discussed in detail.

2.1. theme.html

Undoubtedly, the theme.html is the most important HTML file in all XOOPS themes. This file dictates the overall design, structure and layout of your site.

2.1.1. Diagram of the Default Theme

Below is a diagrammatic representation of the basic layout of the theme.html of the Default theme. It has 3 main tables for the header, content and footer and 1 nested table for the center blocks. Take note that there are actually no spaces in between the tables once displayed on the browser.

With a basic understanding of HTML, it is possible to manipulate the Header table, the Content table and the Footer table independent from each other.

Basic Layout

Figure 2.1. Basic Layout

2.1.2. DOCTYPE

Line 1-2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<{$xoops_langcode}><meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">" lang="<{$xoops_langcode}>">

Each HTML document should have a Document Type Definition. XOOPS themes adhere to XHTML 1.0 Transitional. XHTML is a family of current and future document types and modules that reproduce, subset, and extend HTML 4

[Tip]Theme-Building Tips
  • The DOCTYPE format adheres to recommended standards. There are very few reasons to change this.

  • Keep it in mind when custom-coding or editing themes and templates. This is important for HTML validation.

2.1.3. Meta Tags

Line 3-12:

<head>
<meta http-equiv="content-type" content="text/html;
charset=<{$xoops_charset}>" />
<meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="XOOPS" />

The Meta tags form the first part of the head of the HTML and are mostly generated from Smarty tags. It should not be edited directly within the theme.html file. Meta information should be changed from the System Admin > Preferences > Meta Tags and Footer.

[Tip]Theme-Building Tips
  • Initial XOOPS installation automatically populates the database with XOOPS-specific Meta Tags. Revise the Meta Tags before the site goes public.

  • Choose Meta Tags wisely. With the current XOOPS theme system, meta tags are implemented site wide. Meta-tags cannot be implemented per page.

2.1.4. Title

Line 13:

<title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>

There are 2 Smarty tags in the title:

  • <{$xoops_sitename}> - This is the Site name entered in the System Admin > Preferences > General Settings. This Smarty tag can be used anywhere in the theme.html or template files where the name of the site is needed.

  • <{$xoops_pagetitle}> - This is a dynamically derived Smarty tag that will change as the page changes. The default content of the Smarty tag is the Site Slogan from System Admin > Preferences > General Settings. If a module is specified as the front page, or when browsing the site within a module, the module name will be used and displayed instead of the Site Slogan.

[Tip]Theme-Building Tips
  • <{$xoops_sitename}> is an important Smarty tag to remember when building custom themes and editing templates. They can be used where the Site Name is needed and can be embedded within HTML tags for formatting.

2.1.5. Links

Line 14-18:

<link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />
<link rel="stylesheet" type="text/css" media="all"
href="<{$xoops_url}>/xoops.css" />
<link rel="stylesheet" type="text/css" media="all"
href="<{$xoops_themecss}>" />
<!-- RMV: added module header -->
<{$xoops_module_header}>

This is the part where the favicon.ico and Cascading Style Sheets are linked. This is the first instance where the important <{$xoops_url}> Smarty tag is used.

  • <{$xoops_url}> - This is the site URL as defined in the mainfile.php. This Smarty tag can be used anywhere in the theme.html or template files where the site URL is needed.

  • <{$xoops_themecss}> - This Smarty tag defines the location of the specific style.css of the theme chosen as default. It has little use within the body part of the theme.html.

[Tip]Theme-Building Tips
  • <{$xoops_url}> is an important Smarty tag to remember when building custom themes and editing templates. They can be used where the Site URL is needed and can be embedded within HTML tags for absolute path calls (images and links) and formatting.

2.1.6. JavaScript

Line 19-23:

<script type="text/javascript">
<!--
<{$xoops_js}>
//-->
</script>
</head>

This part loads the XOOPS JavaScript functions.

2.1.7. Header Table

Line 24-34:

<body>
  <table cellspacing="0">
    <tr id="header">
      <td id="headerlogo"><a href="<{$xoops_url}>/"><img
src="<{$xoops_imageurl}>logo.gif" width="150" height="80" alt="" /></a></td>
      <td id="headerbanner"><{$xoops_banner}></td>
    </tr>
    <tr>
      <td id="headerbar" colspan="2"> </td>
    </tr>
  </table>

The header table forms the first part of the body of the HTML. It contains the site logo, space for banners and the image bar separating the header from the content. The formatting of the table and each table cell is handled by the style.css of the default theme.

Aside from <{$xoops_url}>, two Smarty tags are found:

  • <{$xoops_imageurl}> - This Smarty tag represents the path to your default theme directory, e.g. http://www.yoursite.com/theme/default/. This Smarty tag can be used anywhere in the theme.html or template files where the path to the theme directory is needed.

  • <$xoops_banner}> - This Smarty tag retrieves the banners from System Admin > Banners

[Tip]Theme-Building Tips
  • <{$xoops_imageurl}> can be used to define paths for images and files found within your theme directory. It is not exclusive for images. Also remember that it already has the trailing slash in it.

2.1.8. Content Table - Left Column

Line 36-45:

<table cellspacing="0">
    <tr>
      <td id="leftcolumn">
        <!-- Start left blocks loop -->
        <{foreach item=block from=$xoops_lblocks}>
          <{include file="default/theme_blockleft.html"}>
        <{/foreach}>
        <!-- End left blocks loop -->

      </td>

This piece of code starts the all-important Content Table. This is where all block and module contents are displayed. The Content Table tag opens at Line 36 and closes at Line 106. There are many codes in between that will dictate the look of the site.

The Content Table has only 1 row with 3 cells. The first cell contains the left column contents. The layout is controlled by the style.css using the id “leftcolumn”.

Within that table cell are Smarty tags that calls a loop and displays the different blocks for the Left Column. The layout and structue of each left column block is handled by the theme_blockleft.html file and the style.css.

Specific details on the left column blocks is provided in the theme_blockleft.html section.

[Tip]Theme-Building Tips
  • You can totally eliminate the use of a different HTML file for the left blocks by copying the code inside the theme_blockleft.html file and pasting them inside the <{foreach}> Smarty loop.

  • If you plan to continue using the theme_blockleft.html file using the <{include}> Smarty tag, remember to change the directory to suit your theme folder. The default directory in the tag is the “default” folder, i.e. default/theme_blockleft.html. If your theme folder is “mynewtheme”, then the include function should state mynewtheme/theme_blockleft.html.

2.1.9. Content Table - Center Blocks

Line 47-50:

<td id="centercolumn">

        <!-- Display center blocks if any -->
        <{if $xoops_showcblock == 1}>

The second cell within the Content Table is the Center Column. The layout and format settings are controlled by the style.css using the id “centercolumn”.

The Smarty tag <{if $xoops_showcblock == 1}> checks if there are center blocks to be displayed. If there are, the HTML and Smarty code in between the conditionals will be called, i.e. the center blocks will be be displayed.

Line 85:

<{/if}>
        <!-- End display center blocks -->

The <{if}> Smarty tag is closed at Line 85 with an <{/if}> Smarty tag. This part ends all calls made to the different center blocks.

Remember that there are 3 types of center blocks: center-center, center-left and center-right. Specific details on these types are provided below.

2.1.10. Content Table - Center-Center Blocks

Line 52-63:

<table cellspacing="0">
          <tr>
            <td id="centerCcolumn" colspan="2">

            <!-- Start center-center blocks loop -->
            <{foreach item=block from=$xoops_ccblocks}>
              <{include file="default/theme_blockcenter_c.html"}>
            <{/foreach}>
            <!-- End center-center blocks loop -->

            </td>
          </tr>

The center blocks are all contained in a nested table inside the Center Column (<td id="centercolumn">). The nested table, let’s call it the Center Blocks table as opposed to the Center Column table, has 2 rows.

The first row has one cell (<td id="centerCcolumn" colspan="2">) whose layout is done through the style.css. This row contains the Smarty tags that call the Center-Center blocks through the <{foreach}> Smarty loop tag.

Notice that in include function calls the theme_blockcenter_c.html file. This file dictates the look and layout of the center-center block, specifically how the block title and content are displayed.

[Tip]Theme-Building Tips
  • You can totally eliminate the use of a different HTML file for the center-center blocks by copying the code inside the theme_blockcenter_c.html file and pasting them inside the <{foreach}> Smarty loop.

  • If you plan to continue using the theme_blockcenter_c.html file using the <{include}> Smarty tag, remember to change the directory to suit your theme folder, as mentioned before.

  • The td style id “centerCcolumn” acts on the cell that “houses” the center-center blocks, and not the center-center blocks themselves. For changes on the center-center block layout, edit the theme_blockcenter_c.html file.

2.1.11. Content Table - Center-Left Blocks

Line 64-71

<tr>
            <td id="centerLcolumn">

            <!-- Start center-left blocks loop -->
              <{foreach item=block from=$xoops_clblocks}>
                <{include file="default/theme_blockcenter_l.html"}>
              <{/foreach}>
            <!-- End center-left blocks loop -->

The second row of the Center Blocks table has 2 cells. The first cell contains the Smarty loop that calls on the Center-Left blocks. The cell layout is managed through td style id “centerLcolumn”. As with the center-center blocks, a Smarty include tag calls on a separate file, theme_blockcenter_l.html, for the layout of the center-left blocks.

[Tip]Theme-Building Tips
  • Check Theme-Building Tips (Theme-Building Tips) for the center-center blocks. They should be very similar.

2.1.12. Content Table - Center-Right Blocks

Line 73-83:

</td><td id="centerRcolumn">

            <!-- Start center-right blocks loop -->
              <{foreach item=block from=$xoops_crblocks}>
                <{include file="default/theme_blockcenter_r.html"}>
              <{/foreach}>
            <!-- End center-right blocks loop -->

            </td>
          </tr>
        </table>

The second cell of the second row of the Center Blocks table contains the Smarty loop that calls on the Center-Right blocks. The cell layout is managed through td style id “centerRcolumn”. As with the center-center blocks, a Smarty include tag calls on a separate file, theme_blockcenter_r.html, for the layout of the center-right blocks.

In summary, the Center Blocks table, which is a nested table, has this basic layout.

Center-Center Blocks
Center-LeftCenter-Right
[Tip]Theme-Building Tips
  • Check Theme-Building Tips for the center-center blocks. They should be very similar.

  • Understanding the layout of the Center Blocks table allows you to do some basic XOOPS theme customizations by manipulating the table layout.

2.1.13. Content Table - Module Contents

Line 88-91:

<div id="content">
          <{$xoops_contents}>
        </div>
      </td>

This short HTML code, a div, is a very important part of the theme. This dictates where your module contents are displayed in relation to the center blocks. The default placement is below the Center Blocks table.

Example of module contents are the news articles in the News Module, the Forum table of the NewBB module, and the Contact Form of the Contact Us Module.

[Tip]Theme-Building Tips
  • Just cut and paste this div on top of the Center Blocks table, or more specifically above the conditional that calls the Center Block table, if you want the blocks to be below the module contents.

2.1.14. Content Table - Right Column

Line 93-106:

<{if $xoops_showrblock == 1}>

      <td id="rightcolumn">
        <!-- Start right blocks loop -->
        <{foreach item=block from=$xoops_rblocks}>
          <{include file="default/theme_blockright.html"}>
        <{/foreach}>
        <!-- End right blocks loop -->
      </td>

      <{/if}>

    </tr>
  </table>

This HTML code displays the Right Blocks. It starts with a conditional: if you have right blocks to show ( <{if $xoops_showrblock == 1}> ), then create a cell for that ( <td id=”rightcolumn”> ), start the Smarty tag loop and include the theme_blockright.html file.

As with the Left Blocks, the included file dictates the layout of the Right Blocks.

[Tip]Theme-Building Tips
  • Check Theme-Building Tips for the Left and Center blocks. They should be very similar.

2.1.15. Footer Table

Line 108-114:

<table cellspacing="0">
    <tr id="footerbar">
      <td><a href="http://www.xoops.org/" target="_blank"><img
src="<{$xoops_imageurl}>poweredby.gif" alt="" /></a></td>
    </tr>
  </table>
</body>
</html>

The footer table ends the body of the HTML and the theme.html file

[Tip]Theme-Building Tips
  • Customize the table as you wish. Add more details (copyright information, contact details) that are relevant to your site.

  • Take note that the footer table contains an image (poweredby.gif) and not text. The default theme does not use the Footer information from the XOOPS Admin Control Panel. The Footer information can be called and placed in the theme by using the Smarty tag <{$xoops_footer}> within the Footer Table.

The comments are owned by the author. We aren't responsible for their content.

Author Thread
dalong
Published: 2006/11/16 8:00  Updated: 2006/11/16 8:00
Just popping in
Joined: 2006/11/16
From:
Comments: 2
 Re: xo-002 http://www.apachefriends.org/en/xampp.html
very good!
I like here!

Author Thread
dalong
Published: 2006/11/16 10:13  Updated: 2006/11/16 10:13
Just popping in
Joined: 2006/11/16
From:
Comments: 2
 Re: xo-002 http://www.apachefriends.org/en/xampp.html
thank for your work!

Author Thread
huqilong
Published: 2006/11/20 2:50  Updated: 2006/11/20 2:50
Just popping in
Joined: 2006/11/16
From:
Comments: 3
 Re: xo-002 http://www.apachefriends.org/en/xampp.html
I hava a question ,when I have installed phpeclipse,I can't user the button for the apache in the Eclipse IDE,how shoud I do?

Author Thread
huqilong
Published: 2006/11/20 3:10  Updated: 2006/11/20 3:10
Just popping in
Joined: 2006/11/16
From:
Comments: 3
 Re: xo-002 http://www.apachefriends.org/en/xampp.html
dddd

Author Thread
Mark_1900
Published: 2006/11/18 11:05  Updated: 2006/11/18 11:09
Just popping in
Joined: 2006/11/18
From:
Comments: 2
 Alias Permission Problems
For an Alias I also had to add a Directory tag to the httpd.conf, otherwise I had permission problems accessing the files... <br /> [code] Alias /wiki "C:/Documents and Settings/Me/wiki"<br /> <Directory "C:/Documents and Settings/Me/wiki"><br /> Options Indexes MultiViews<br /> AllowOverride None<br /> Order allow,deny<br /> Allow from all<br /> </Directory><br /> [/code]<br /> Oh and all these editing tags seem broken!!

Author Thread
Mark_1900
Published: 2006/11/18 11:21  Updated: 2006/11/18 11:32
Just popping in
Joined: 2006/11/18
From:
Comments: 2
 Getting the correct php_dbg.dll
I want a debugger. I downloaded the latest XAMPP 1.5.4a and noticed that it comes with PHP 5.1.6 & PHP 4.4.4, and neither are supported. The debugger module only supports a subset of these major versions from 5.1.0 to 5.1.2 and 4.4.0 to 4.4.2 (http://dd.cron.ru/dbg/downloads.php). I think right at the beginning you should specify which versions to download to get a debugger Version "XAMPP 1.5.2" would be fine.

Author Thread
huqilong
Published: 2006/11/30 6:28  Updated: 2006/11/30 6:28
Just popping in
Joined: 2006/11/16
From:
Comments: 3
 Re: xo-002 http://www.apachefriends.org/en/xampp-windows....
I want to know how to use phpeclipse with eclipse detailly!

Author Thread
thierrybo
Published: 2007/2/3 16:19  Updated: 2007/2/3 16:21
Just popping in
Joined: 2007/2/3
From:
Comments: 1
 Re: xo-002 ch02s03.html Workspace Method 2
I do not agree with the suggested method 2: Quote:
For example you have set up XAMPP and your “document root” path is the XAMPP default:
C:Program Filesapachefriendsxampphtdocs
Quote:
,then your appropriate workspace path should be one level less:
C:Program Filesapachefriendsxampp
If htdocs is your document root, then each folder inside IS a new project and you should set workspace directory as Document Root directory. With suggested method, all your web projects are managed with ONE big PHPeclipse project.

Author Thread
dafydd
Published: 2007/4/3 6:01  Updated: 2007/4/3 6:01
Just popping in
Joined: 2007/4/3
From:
Comments: 2
 Re: xo-002 ch01.html
Trying this out on a Mac. J2SE 1.5.0_07-164 installed. 1.5.0_06 is what's available on the download site. However, it would almost certainly be updated with Software Update.

Author Thread
dafydd
Published: 2007/4/6 1:00  Updated: 2007/4/6 1:00
Just popping in
Joined: 2007/4/3
From:
Comments: 2
 Re: xo-002 ch01s04.html
Second question: How do we point the XAMPP start/stop buttons in the Eclipse toobar to where we put XAMPP?

dafydd

Author Thread
dysmas
Published: 2007/8/4 14:18  Updated: 2007/8/4 14:18
Just popping in
Joined: 2007/8/4
From:
Comments: 1
 Debugging standalone PHP applications
Thanks hundred times for all the detailed explanations here !!

And especially for the note which explains why debugging a CLI application does not work in 1.1.8 version and only in 1.1.9. (wrong port, as I guessed, but I have been looking for this information for some hours before coming here). Unfortunately this 1.1.9 CVS version does not work in the last 3.2.0 Eclipse version I just got. Let us hope the stable version is going quickly.

Author Thread
Mercyful
Published: 2007/9/10 14:46  Updated: 2007/9/10 14:46
Just popping in
Joined: 2007/9/10
From:
Comments: 1
 Re: dbg is not working
I want using eclipse3.2 with php-plugin and for debugging i want using dbg.
I'm using xampp 1.6.3a with php 4.4.7. and php_dbg.dll-4.4.x
After step by step installation
http://docs.schuetzengau-freising.de/ ... =xo-002&file=ch01s05.html
the debugger dbg will not work.
When i called phpinfo() there is no section dbg shown.
Who have any ideas?
Thanks a lot!
Regards Mercyful

Author Thread
keryx
Published: 2007/9/26 22:59  Updated: 2007/9/26 22:59
Just popping in
Joined: 2007/9/26
From:
Comments: 1
 Re: xo-002 ch04.html
A section about verrors should be nice. I get the following:


<terminated, exit value: 0>PHP C:\Program\PHP\php.exe : <path>/<fil>.php

I've googled like crazy but to no avail. And yes - it does not stop at breakpoints and "variables" are empty. DBG is working:

if (function_exists ("DebugBreak")) {
DebugBreak ();
echo "debugging started!<br />\n";
}

Outputs "debugging started!" And DBG is reported on phpinfo().

Author Thread
koski
Published: 2007/10/19 3:55  Updated: 2007/10/19 3:55
Just popping in
Joined: 2007/10/19
From:
Comments: 1
 Re: xo-002 ch01s03.html
Hi,

Seems that the mentioned link for cvs:

http://phpeclipse.sourceforge.net/update/cvs

is out of date or wrong.

Author Thread
andybruk
Published: 2007/11/18 1:11  Updated: 2007/11/18 1:11
Just popping in
Joined: 2007/11/18
From:
Comments: 1
 Re: xo-002 index.html
I've been searching for a PHP debugger for ages. This is the only one I can find that works perfectly, thanks very much for providing this documentation.<br /><br />I doubt if I could ever get it to work on Windows, but it works so well with Ubuntu Linux and Eclipse 3.1.<br />
Powered by XOOPS 2.0 © 2001-2005 The XOOPS Project