smartfaq
SmartFAQ is developed by The SmartFactory (http://www.smartfactory.ca), a division of InBox Solutions (http://www.inboxsolutions.net)

How do I build a theme?
Requested and Answered by Carnuke on 2004/10/29 22:45:09 (68382 reads)
Edit the default theme

STEP ONE

Copy the default theme folder (themes\default) and rename it to e.g. "cool". Now you should have a new folder called "cool" with the same files as the default theme.

Open the theme.html in your "cool" folder and search for the following string

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

You see, that you have to edit the "default" to "cool" to reflect your new folder. After the changes the above string should look like this.

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

There were a few other includes, where you have to change the directory in this file!


STEP TWO

Now you have to clone the default templates, because the default templates can't be edited. Go to Administration > System Admin > Templates within your Xoops and clone the default templates. You should give the new template set the same name as you named your theme folder, in this case "cool".

Be careful what you do here. Incorrectly editting or modifying these templates can have disastrous results.


STEP THREE

Go to Administration > System Admin > Preferences > General Settings. Select "cool" as Default theme and as Default template set. Set "Update module template .html files from themes/your theme/templates directory?" to YES. This setting is important because it is the only way that Xoops will reload the 'new' css and html code, so you can 'test' your changes 'on the fly'.

You may modify and retest theme changes (STEP 4 below) as frequently as you find it helpful. Once you are satisfied with your results be certain to reset "Update module template .html files from themes/your theme/templates directory?" to NO.

Now your complete Xoops Installation uses your "cool" theme and no longer the "default" theme. You can edit this theme now to fit your needs. When anything goes wrong, you always have the possibility to switch back to the default theme!


STEP FOUR

This is the editing phase! Short description of the files

theme.html - controls the main layout of your website
theme_blockleft.html - controls the layout of the left blocks
theme_blockright.html - controls the layout of the right blocks
theme_blockcenter_c.html - controls the layout of the centercenter blocks
theme_blockcenter_l.html - controls the layout of the centerleft blocks
theme_blockcenter_r.html - controls the layout of the centerright blocks
style.css - stylesheet for your theme
styleMAC.css - some settings only for MAC's
styleNN.css - some settings only for Netscape

Within these files you can define what your website should look like! The appearance of the modules and every single block can be controlled through the templates (if they use templates!).


Designing a completely new theme

Normally a designer creates his website layout in graphic programme. After this designing process he creates a HTML site out of it! Important for this is to remember the 3-column layout of Xoops!

NOTE: If you are visually impaired, like some of us, and you have access to a tool like FrontPage, you may create layouts there. HOWEVER, be careful! The code generated by wysiwyg editers like FrontPage may not work 'perfectly' and will almost certainly require some clean-up before becoming fully operational.


lc = leftcolumn
cc = centercolumn
rc = rightcolumn


After you have your 3-column HTML template you only have to copy the important parts of the default/theme.html into your template. The first thing is the header stuff.


After this you copy the following code in your leftcolumn:

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

The <td></td> where you put in this code should get the id="leftcolumn" as in the default theme. This is needed for the css definitions.

This is the code for your centercolumn:


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

        <
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>
          <
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 -->

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

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

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


The <td></td> where you put in this code should get the id="centercolumn". In the right column you have to copy this code:

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


The <td></td> where you put in this code should get the id="rightcolumn". After this you have to correct the path to your images you have included in your theme.html. If every images is located directly in your themes folder, the <img> tag should look like this.


<img src="<{$xoops_imageurl}>logo.gif">

Otherwise the images won't display correctly when the theme is parsed through Xoops.

Remember this is only the basic stuff! You can move around the columns etc. as you like for your theme.

Also see Making of xoops theme part 1

and Anatomy of the default theme

and Incama's Theme building manual

Also this FAQ


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

 how do people edit the css

i was wondering if its easiest to edit the css as part of the html file and then strip it out when its ready to go.
Both Dreamweaver MX and Golive has real problems with the weirdly named file path to external css files (xoops code)
anyone got any hints?

 
  • Just can't stay away

 Re: how do people edit the css

I suggest you link the css file directly to the html file while you are working on it.

<link href="style.css" rel="stylesheet" type="text/css" />


When you're finished just remove the link.

 
  • Friend of XOOPS

 Template Contribution!

We are planning to contribute one template (not theme) for xoops.org community. To start with, we are looking for some XOOPS template design coding standards and guidelines. Where to found ?

Secondly, is there anyway we change design for Admin portion along with the frontend ? is there any help available?

Launch: 20th Feb 2005.

Thanks !

 
  • Just popping in

 ok but

Mambo has some nice flash tutorials and they have create an extension to create your own templates..
Xoops needs a similar tool..

 
  • Not too shy to talk

 Making of xoops theme part 1

Does anyone know where part 3 is of I have done part 2

http://www.grabageek.net/makingofgrabageek_part2.htm

 
  • Just popping in

 Re: Making of xoops theme part 1

Hi!

Came to same point than after searching found out that 3rd part was never written..so you will have to search on..same as me..

I belive that good tutorial for making a theme hasnt been written yet or at least I cant find it..

 
  • Just popping in

 Re: how do people edit the css

I advise you this Firefox extension

You can edit any website's CSS in WYSIWYG mode.
Give it a try, it's amazing.

PEACE.

 
  • Friend of XOOPS

 Center blocks on top...

Hi could you post the correct code in this example above to have the left and right center blocks on top of center? This way when we want to start a new theme we could just come here and cut and paste the way we want to layout our themes...

 
  • Just popping in

 Re: how do people edit the css

Quote:

Poster: djoloffman Posted: 2005/7/4 22:06:29

I advise you this Firefox extension

You can edit any website's CSS in WYSIWYG mode.
Give it a try, it's amazing.


Incompatible Extension or Extension No Longer Available
The extension you requested is either incompatible with the application selected, or the version of it is no longer available on Mozilla Update.

 
  • Just can't stay away

 Re: how do people edit the css

I guess he is talking about the WebDeveloper-Extension from Chris Pederick

EDIT: Other helpful extensions for debugging/editing are HTML-Validator and ColorZilla

 
  • Friend of XOOPS

 Re: how do people edit the css

I use a shareware Topstyle Pro. A lite version is available also Here. This is an excellent windows program for CSS editing by the original author of homesite.

 
  • Friend of XOOPS

 If you're looking for anatomy of a default theme...

The anatomy of the default theme document referenced above is available from the temporary docs page, until the official documentation page is restored.

 
  • Just popping in

 Re: If you're looking for anatomy of a default theme...

Hi,

I've got the firefox extension, but it's just working with default theme :(

If I use another theme, I lose all css code.

Maybe I could fix this if I could remove the line ointing to default css

example:
<link rel="stylesheet" type="text/css" media="all" href="http://localhost/xoops.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost/themes/xmt/css/styleNN.css" />

If I could lose firs part of code, maybe my firefox extension would allow me to edit xmt theme css?

 
  • Home away from home

 Re: If you're looking for anatomy of a default theme...

no...
You have to check styleNN content... I can use this FF-extension and get full CSS (for any theme)

 
  • Just popping in

 Re: If you're looking for anatomy of a default theme...

LazyBadger thx for the answer!

But could you be more specific on this matter?

I'm a beginner in CSS, I do understand what you're telling me, but I don't know how to do it :(

If I try to edit any other theme except default, I lose all the css code :(

Sorry for bothering :(

 
  • Just popping in

 Re: If you're looking for anatomy of a default theme...

Anyone???

 
  • Quite a regular

 Re: If you're looking for anatomy of a default theme...

helo piroman
the problem may be in the styles names.
4e #leftcolumn.content in the default theme may be called #leftcolumn.inside etc

Any theme use it's own style.css with it's names. where can U check thone names of specific part of code? Go to the system admin > preferences and there put the theme, U want to edit, go into your brownser, an see a root code. It will be in a html, but there U will see the names of the specific styles uset in this theme. That ist the fastest way 4 U.

I hope it helps.

 
  • Just popping in

 Yep, Thanks for the guidence

Thanks carnuke, I was editing a customised theme that I had to move to another domain with a newer version of XOOPs, after the kick in the right direction I was able to quickly locate where the background images were put...

Thanks again

Fungus

 
  • Just popping in

 Re: If you're looking for anatomy of a default theme...

The correct location for this is under " Documentation"...it's now a complete manual of it's own.