1
hsalazar
Some pointers on how to build a theme
  • 2003/4/11 1:11

  • hsalazar

  • Just popping in

  • Posts: 78

  • Since: 2003/2/6 1


Hi. This is, in essence, an answer I wrote recently for the spanish forum, about theme building. It might be useful here, so I made this translation. I added some stuff, the text between brackets [].

1) XOOPS2 does actually ease the handling of themes because, unlike other systems, which assemble pages using page segments (the header and the left navigation in one file, the right navigation and the footer in another, and the content modules in the center), in XOOPS2 you have a single HTML file (theme.html), and you write inside the code variables and conditional tags to define what's displayed to the final user. Having the theme page in a single file certainly makes the job easier.

2) Let me see if I can "define" the difference between templates and themes. We might say the theme is something like a "skin", that is, a theme conveys the visual solution of a site. On the other side, a template solves the relation between the theme and the data kept in the database: the template defines what variables to get under what conditions. In XOOPS2 RC3 this is assembled as follows:

a) The theme (basically, the theme.html file, the global images and the stylesheets) are kept in a folder, to facilitate their modification and upgrading.

b) The templates, that also exist physically as files, are kept in the system within the database. I've found that in order to change a template, the best way to do it is to try your changes in an external file. Once you've solved the basic stuff, look forthe template file (as administrator), paste the template code in the textarea, run tests and then work in the fine detail until things display the way you want.

c) The system has other files, more tied to the programming logic than to the presentation, but sometimes you have no other choice but to open them. Basically they're PHP files that configure the assigning of variables (remember, this works with Smarty) and the access to the database. The less you mess with this files, the better.

3) Editing a theme is absolutely easier if you have in your PC a web server. That's the way I do it: I have a complete environment with Apache friend's WAMPP (Apache, PHP, MySQL, etc.) and I run everything locally first. Once you complete your theme, you export it to a tar.gz file, and you can upload that file to your public web server. Obviously there are things to arrange (watch for paths, images and other included files), but as a general rule it's easier to develop locally and upload once you have ironed out most of the bugs. NOTE: Most of the nice things you won't be able to see using Dreamweaver (or GoLive, or FrontPage), because of the simple fact that pages are built dinamically; this means you can see the skeleton of your theme, but not the actual output with real content. [This is particularly true if you design your pages using positional CSS, because all of these tools do a poor job when rendering DIVs.]

4) You've been told about the difference between the various stylesheets. I'll just add the fact that having three files allows you to be very precise in the display for three very different worlds: the generic world of MSIE and other like browsers, the new Netscape world (versions 6.2 and above; nothing here applies for versions 4.76 and before), and the world of Macintosh computers.

5) To develop a theme, I'd guess the most useful strategy --or at least the one I'd recommend-- is to take a very deep look at an existing theme of your choice [and everyday the paper boy brings more...], let's say the default theme or the X2T theme. Once you grasp how the page is made, you'll understand why I say: want a theme? Create it from zero --but using your favorite theme as a guideline.

6) And last but not least, the difference between modules and blocks is fundamental. A module is a complete subsystem that deals with the management and display of one type of content. For instance, the FAQ module lets you manage the frequently asked questions (add, edit, delete) and also lets you define the way the FAQs will display within your site. A block is like the expression of a module in the site. This expression comprises both the data shown and the styling used to display the data. So, we might say that both modules and blocks are programmed. not designed; you design the theme to describe, at the very least the general displaying frame used in the site; then, and this is optional, you extend your design philosophy to whatever templates you'd like to change.

I know these are generic answers, but I hope they at least point you in the right direction.

Greetings from México.


BTW: if you want to see what I have done following the steps described here, take a look at the beta of my site in Punto flotante.

2
zgobum
Re: Some pointers on how to build a theme
  • 2003/4/13 19:13

  • zgobum

  • Just popping in

  • Posts: 1

  • Since: 2003/4/13


Awesome! Your site looks very cool. Not something i would be able to do sad to say. I just started learning about PHP. Those drop down menues(i.e. noticias, documentos) did you do them on your own or with XOOPS setting? Also on my page in my front page i know i can edit the footer but how do i change the XOOPS image like you and add a gif or flash? Also i wanted to change xoop support and zoop faq to somethign else where could i edit this?

3
hsalazar
Re: Some pointers on how to build a theme
  • 2003/4/14 16:33

  • hsalazar

  • Just popping in

  • Posts: 78

  • Since: 2003/2/6 1


Mmmm. My guess would be that after a very short while you'll be able to build a site the way you like it.
As to the drop down menus, I'm using a commercial product called Tigra Menu Pro (it only costs 29 dollars), because it gives me a lot of options. If you want something a little less powerful, they have Tigra Menu, which is absolutely free. Look for them in Soft Complex.

To change the images, put an animated GIF or a Flash file, all you have to do is edit the theme.html file and make sure everything points in the right direction.

And to change the options included in the top tabs, it's a matter of changing the table that comes in the header, also in the file theme.html.

My suggestion for anyone interested in developing a theme would be to clone a theme and then start changing little things in the theme.html file, just to get the feeling of it.

Another good exercise is to change things (one at a time) in the style.css file. Look in the Xoops Wiki the logic of the selectors' names.

Good luck in your playing with XOOPS. You'll find it a very rewarding experience.

4
nuffy
Re: Some pointers on how to build a theme
  • 2003/4/24 8:41

  • nuffy

  • Just popping in

  • Posts: 1

  • Since: 2003/4/21


As a newebie to php, mySQL and XOOPS2, I was having a little trouble understanding a few things. BUT, your message was fantastic and a great help to me!

THANK YOU!!!!!!

5
mCity
Re: Some pointers on how to build a theme
  • 2003/5/14 7:27

  • mCity

  • Just popping in

  • Posts: 52

  • Since: 2003/3/31


Thanks for your hardwork on docs for themes and templates.

However, I still couldn't decide how to place the main, login, and user menu to header as dropdown menus without modify the core php code. That is the limitation of template.

mCity

6
Ace_Armstrong
Re: Some pointers on how to build a theme

I've been trying to figure out how to create a theme using Dreamweaver, netobjects Fusion, and a couple of other apps, and for some reason I just can't get them to work. It seems to me that it should be pretty straightfoward: create the look of the site as you want, make sure it has a three-column table, and then just insert the "<foreach>" code for each column (left, Center-center center-left center-right, and right), and adjust the CSS files. Right?

Unfortunately, it doesn't seem to be working that easily for me. What step am I missing here?

7
hsalazar
Re: Some pointers on how to build a theme
  • 2003/5/23 1:50

  • hsalazar

  • Just popping in

  • Posts: 78

  • Since: 2003/2/6 1


1. More than the "<foreach>", you need to pay close attention to the "<if>", because they decide what parts of the HTML are omitted when generating the pages.

2. The design of the page isn't as straightforward as you think. First you have a general table with narrow columns on the sides: these are de left column, the main column (the widest), and the right column (which should be optional, enclosed in an "<if>" declaration: "<{if $xoops_showrblock == 1}>...<{/if}>").

3. Then you tackle the main column. There you have three possibilities: 1) the main content area, displayed using this variable: "<{$xoops_contents}>"; 2) the half-width columns (center-left and center-right), and 3) the full-width column (center-center).

As long as you take care of opening and closing correctly the "if" declarations as well as the "foreach" declarations, you should have no problem.

Happy Xoopsing!

8
rabideau
Re: Some pointers on how to build a theme
  • 2003/6/5 13:57

  • rabideau

  • Home away from home

  • Posts: 1042

  • Since: 2003/4/25


As always your insights are exceptional. Thank you for the useful advice

Along the lines of editting html, php files, I have a great deal of difficulty (probably because I'm old... ) visualizing my work (the hand code, view, edit process is difficult for me--). Are there any tools that are available to assist with this problem (which is especially problematic with themes)?

In the past, I have used tools like Dreamweaver, FrontPage, etc. to make the work more WYSIWG oriented. I have even stooped to trying that with some of my php/html efforts-- with only limited success.

9
rabideau
Re: Some pointers on how to build a theme
  • 2003/6/5 19:41

  • rabideau

  • Home away from home

  • Posts: 1042

  • Since: 2003/4/25


Hello Horatio,

I downloaded some of the items you suggested from tigra. I built a set of menu items I'd like to add to my site (banner at the top). I've dug around the various XOOPS files looking for where I should place the new js... and succeeded in getting lost

Can you provide some pointers as to where I might look? I'd love to incorporate these on the site... but for now, I don't know where they should go.

Thank you in advance.

10
hsalazar
Re: Some pointers on how to build a theme
  • 2003/6/5 20:24

  • hsalazar

  • Just popping in

  • Posts: 78

  • Since: 2003/2/6 1


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 useryou see login formno 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 
USERdisplay 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 definedthere'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

Who's Online

200 user(s) are online (122 user(s) are browsing Support Forums)


Members: 0


Guests: 200


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits