Support Forums - XOOPS Web Application System


Report message:*
Confirmation Code*	1 + 4 = ? Input the result from the expression Maximum attempts you can try: 10

* = Required

Re: Some pointers on how to build a theme

Subject: Re: Some pointers on how to build a theme
by hsalazar on 2003/6/5 20:24:41

rabideau:

The .js files should be within the HEAD tags, and the javascript call goes at the end of the file, just before the closing BODY tag.

I've modified the look of my site so I don't have the horizontal menu anymore (now I have four vertical menus on the left side), but I'll share here the file theme.html I used to have. It'll be useful if you want to see the syntax for using Tigra Menu, but also to take a look at a page built mostly using DIV tags.

Here's the code, with the comments translated:


<!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="en" lang="en">

<head>

    <meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />

    <meta http-equiv="content-language" content="<{$xoops_langcode}>" />

    <meta name="robots" content="<{$meta_robots}>" />

    <meta name="keywords" content="<{$meta_keywords}>" />

    <meta name="description" content="<{$meta_description}>" />

    <meta name="rating" content="<{$meta_rating}>" />

    <meta name="author" content="<{$meta_author}>" />

    <meta name="copyright" content="<{$meta_copyright}>" />

    <meta name="generator" content="XOOPS" />

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

    <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}>" />



    <script language="JavaScript" src="<{$xoops_url}>/include/menu.js"></script>

    <script language="JavaScript" src="<{$xoops_url}>/include/menu_items.js"></script>

    <script language="JavaScript" src="<{$xoops_url}>/include/menu_tpl.js"></script>



    <script type="text/javascript">

    <!--

    <{$xoops_js}>



    function goToURL(page) { top.location = page }



    //-->

    </script>





</head>



<!-- Header -->

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">



<div id="logo">

    <a href="<{$xoops_url}>">

        <img src="<{$xoops_imageurl}>logo.gif" width="150" height="80" border="0">

    </a>

    </div>



<div id="banner"><{$xoops_banner}></div>



<div id="barra-superior-clara">

    <div style="float:left; width: 10px; height: 20px;"><img src="<{$xoops_imageurl}>ulc.gif" width="10" height="20" border="0"></div>

    <div style="float:right; width: 10px; height: 20px;"><img src="<{$xoops_imageurl}>urc.gif" width="10" height="20" border="0"></div>

</div>

<div class="boxclear"> </div>



<div id="barra-superior-oscura"> <!-- This is the bar that holds the login and the search form -->



<{if !$xoops_isuser}>

<!-- If NOT an user, you see login form; no search -->

<div align="left">

<form action="<{$xoops_url}>/user.php" method="post">

    <span class="navtextwht"> User: </span> 

    <input type="text" name="uname"  size="15" maxlength="20" class="formTextBox" />

    <span class="navtextwht"> Password: </span > 

    <input type="password" name="pass"  size="15" maxlength="20" class="formTextBox" />

    <input type="hidden" name="op" value="login" />

    <input name="btnEntrar" type="submit" id="btnEntrar" class="formButton" value="Enter" />

    <input name="btnRregistrarme" type="button" id="btnRregistrarme" class="formButton" value="Registrarme" onClick="goToURL('http://www.puntoflotante.com/register.php')"/>

</form>

</div>



<!-- If USER, display the search form -->

<{else}>

<div align="right">

    <form action="<{$xoops_url}>/search.php" method="post">

    <input type="text" name="query" class="formTextBox" />

    <input type="hidden" name="action" value="results" />

    <input name="btnBuscar" type="button" id="btnBuscar" class="formButton" value="Search" />&nbsp; 

    </form>

</div>



<{/if}>



</div>



<div id="envoltura">

<div id="bloque-izq">

<div class="leftcolumn"> 

    <!-- Start left blocks loop -->

    <{foreach item=block from=$xoops_lblocks}>

    <{include file="pf/theme_blockleft.html"}>

    <{/foreach}>

    <!-- End left blocks loop -->

</div>

</div>



<div id="bloque-der">

<div id="content">



<!-- Main table -->

<table width="590" border="0" valign="top" cellspacing="6" cellpadding="0">

<tr valign="top">



<!-- If there's no right column, display only this column -->

<td valign="top" class="contentbox">



<!-- Begin center display showing those blocks defined as center-center -->

<table width="100%" cellpadding="0" cellspacing="0" align="center">

    <tr> 

        <td class="centercolumn" valign="top">

        <div class="centercolumn"> 

            <!-- Start center-center blocks loop -->

            <{foreach item=block from=$xoops_ccblocks}>

                <{include file="pf/theme_blockcenter_c.html"}>

                <div class="box5"></div>

            <{/foreach}>

            <!-- End center-center blocks loop -->

        </div>

        </td>

    </tr>

</table>



<!-- Begin showing full-width center content -->

<table width="100%" cellpadding="0" cellspacing="0" align="center">

    <tr> 

        <td class="centercolumn" valign="top">

            <div class="content"> 

                <{$xoops_contents}>

            </div>

        </td>

    </tr>

</table>





<!-- And last, show the half-width center blocks, if any -->

<{if $xoops_showcblock == 1}>



<!-- This table holds the half-width center blocks -->

<table width="100%" cellpadding="0" cellspacing="0" align="center">

    <tr> 



        <!-- Center-left column -->

        <td class="centerLcolumn" valign="top"> 

            <div class="centerLcolumn"> 

            <!-- Start center-left blocks loop -->

                <{foreach item=block from=$xoops_clblocks}>

                    <{include file="pf/theme_blockcenter_l.html"}>

                <{/foreach}>

             <!-- End center-left blocks loop -->

            </div>

        </td>



        <!-- Center-right column -->

        <td class="centerRcolumn" valign="top"> 

        <div class="centerRcolumn"> 

            <!-- Start center-right blocks loop -->

            <{foreach item=block from=$xoops_crblocks}>

                <{include file="pf/theme_blockcenter_r.html"}>

            <{/foreach}>

            <!-- End center-right blocks loop -->

        </div>

        </td>

    </tr>

</table>

<{/if}>

<!-- Ends display of half-width center blocks -->

</td>



<!-- If there is a right column, we need to add a 10px wide column -->

<{if $xoops_showrblock == 1}>



<!-- This is the column -->

<!-- Taken out to use margins...

<td width="10">

</td>

-->



<!-- This is the actual right column -->

<td width="150" valign="top" align="right" class="rightcolumn">

<div class="rightcolumn"> 

    <!-- Start right blocks loop -->

    <{foreach item=block from=$xoops_rblocks}>

        <{include file="pf/theme_blockright.html"}><br />

    <{/foreach}>

    <!-- End right blocks loop -->

</div>

</td>



<!-- If there's no right content defined, there's no extra column -->

<{else}>

<{/if}>

</tr>

</table>

</div>



<div id="barra-inferior-oscura"><p> </p>

</div>



<div id="barra-inferior-clara">

    <span class="izq">

        <span class="copyright"><{$xoops_footer}></span>

    </span>

    <span class="der">

        <span class="copyright"><a href="http://www.puntoflotante.com/modules/impressum">¿Cómo se hace Punto flotante?</a></span>

    </span>

</div>

<div class="boxclear"> </div>

</div>

</div>

<script language="JavaScript">

    <!--

    new menu (MENU_ITEMS, MENU_POS);

    //-->

<!-- </script>



</body>

</html>

As you can see, I uploaded the .js files into the /includes directory. And of course, you still need to change the links and images to use your own.

I hope this is useful to you. I there's anything else you might want to ask, please do so.

Happy Xoopsing!

Login

Username

Password

Remember me

Search

Advanced Search

Donat-O-Meter

Stats
Goal:	$100.00
Due Date:	Apr 30
Gross Amount:	$0.00
Net Balance:	$0.00
Left to go:	$100.00

Latest GitHub Commits

{{ record.sha.slice(0, 7) }} - {{ record.commit.message | truncate }}

{{ record.commit.author.name }} {{ record.commit.author.date | formatDate }}

Login

Search

Recent Posts

Re: Rebuilding and Updating a 20 years old Xoops Website from 2.0.18? to 2.5.11

Rebuilding and Updating a 20 years old Xoops Website from 2.0.18? to 2.5.11

Re: NewBB v 5.1.0 b 6

Re: NewBB v 5.1.0 b 6

NewBB v 5.1.0 b 6

Re: XOOPS 2.5.11 search user is not working

Re: oledrion

Re: oledrion

Re: oledrion

Re: oledrion

Who's Online

Donat-O-Meter

Latest GitHub Commits

{{ record.sha.slice(0, 7) }} - {{ record.commit.message | truncate }}