HOME TIPS FORUMS DOWNLOADS
   »»  Tips Archive |
Page (1) 2 »
Themes : Create Your Own Multi-Themed Xoops Site
Posted by tl001 on 2005/5/12 11:20:33 (15820 reads)
Themes

You may have noticed some Xoops users are using multiple themes on their sites. The themechanger module by suin will help you change themes per modules. This tutorial provides a different and simpler way of changing themes.

The best way of illustrating it is by showing an example. The following steps are what we did for our site.


Goal

In our example, we want to accomplish the following:
Main theme, let call it themeA, for the site
ThemeB, for the module newbb (Forums)

Users visiting our site will see ThemeA, and they will see ThemeB by clicking on Forums.


Create a Switching or Directing Theme

The theme to be used as default on our site should be able to tell Xoops to retrieve matching theme for the module selected.

With this in mind, we created a theme.html file with the following:

<{php}>
    $mod = $GLOBALS['xoopsModule'];
    $dirname = (isset($mod) ? $mod->getVar('dirname') :'system');
if ($dirname == 'newbb') {
   $theme='ThemeB';
  } else {
   $theme='ThemeA';
}

$this->assign('themename', $theme.'/theme.html');
$this->assign('xoops_theme', $theme);
$this->assign('xoops_themecss', XOOPS_URL.'/themes/'.$theme.'/style.css');
$this->assign('xoops_imageurl', XOOPS_URL.'/themes/'.$theme.'/');
<{/php}>
<{include file="$themename"}>



Create a New Theme

We created a new theme call Multi (you can name it to whatever you wish) under the theme directory - use either a FTP client or mkdir shell command.

We uploaded the newly created theme.html file into Multi theme directory. Also we uploaded the style.css file from ThemeA to the Multi directory.

Please note that style.css is not required to make your multiple themes work. Without it, all the java popup windows will not look very nice, as they can’t find a suitable style.css file under Multi theme. Javascript popup windows will only look for the style.css file under the default theme (Multi), and not under individual themes.


Enable Multiple Themes

We then went to Preferences and General Settings: selected Yes for updating theme files and selected Multi as the default theme.

Viola, we have a multi-theme site. If you have followed the steps and have not made typos and other mistakes, now you should have a multi-themed Xoops Site.


Little TIP in Testing New Themes
Open a new browser window and go into General Settings and keep browser open then go back to you previous working browser to change your theme. Once you have enabled the new theme, if something goes wrong and you can’t get back to the original theme, use the spare (backup) browser window to reverse back to your old theme.



Customization

If you don’t want to be as dramatic as we purposely show on this site, you could modify your main theme and use the modified versions for the modules of your choice. Things you can do: change header image, different style sheet (such different menu colors for different modules) … Your imagination is the limit on what you can do.

We will show two additional example you can do is to customize your themes.

Page (1) 2 »
Printer Friendly Page Send this Story to a Friend
The comments are owned by the poster. We aren't responsible for their content.
Poster Thread
SoccerDad
Posted: 2005/6/29 10:17  Updated: 2005/6/29 10:17
Just popping in
Joined: 2005/6/29
From:
Posts: 3
 Re: Create Your Own Multi-Themed Xoops Site
Hello!

Is there a quick way to apply this logic and have custom theme (automagic on login) on a per user or per group basis?

TIA!
SD
tl001
Posted: 2005/6/29 11:13  Updated: 2005/6/29 11:13
Webmaster
Joined: 2004/6/10
From:
Posts: 282
 Re: Create Your Own Multi-Themed Xoops Site
Theoretically, you could make it work, but it would require major hacks to at least two files:
edituser.php and header.php (just a guess)

You would have to set an option to let users choose a theme, then header.php (or a different file that loads theme at the startup) makes a theme switch when a user logs in by loading the user-theme.
SoccerDad
Posted: 2005/6/29 11:18  Updated: 2005/6/29 11:18
Just popping in
Joined: 2005/6/29
From:
Posts: 3
 Re: Create Your Own Multi-Themed Xoops Site
Thanx for the quick reply! One further thought: would it be easier if the administrator decided which theme applied to which group/user and not the user?

TIA,
SD
tl001
Posted: 2005/6/29 15:29  Updated: 2005/6/29 15:30
Webmaster
Joined: 2004/6/10
From:
Posts: 282
 Re: Create Your Own Multi-Themed Xoops Site
As a group based theme-change, you may want to check this thread from Xoops.org forums:

GroupID and Smarty

If you can make the GroupID work, then the multi-theme should work.
SoccerDad
Posted: 2005/6/29 18:05  Updated: 2005/6/29 18:05
Just popping in
Joined: 2005/6/29
From:
Posts: 3
 Re: Create Your Own Multi-Themed Xoops Site
Thank-you muchly for your time and I'll post back here if I can get things going.

Be well, SD
tl001
Posted: 2005/6/29 22:40  Updated: 2005/6/29 22:40
Webmaster
Joined: 2004/6/10
From:
Posts: 282
 Re: Create Your Own Multi-Themed Xoops Site
SD: glad I can be of help. Please do post and share with us if you manage to get it working. tl
yerres
Posted: 2006/3/15 6:09  Updated: 2006/3/15 6:09
Just popping in
Joined: 2006/3/15
From:
Posts: 6
 Re: Create Your Own Multi-Themed Xoops Site
Quote:
Things you can do: change header image, ...

Interesting ... but how exactly do I move the Indication of the header image into style.css ?
The header image is usually specified directly in theme.html.
I tried in vain ...
tl001
Posted: 2006/3/15 8:39  Updated: 2006/3/15 8:39
Webmaster
Joined: 2004/6/10
From:
Posts: 282
 Re: Create Your Own Multi-Themed Xoops Site
Not sure what exactly you are asking or trying to do.

<img src="<{$xoops_imageurl}>HEADER.GIF" alt="" />

shoudl take care of the header image in each switching theme.

Or in each switching theme's style.css you could specify header image.
yerres
Posted: 2006/3/15 13:18  Updated: 2006/3/15 13:29
Just popping in
Joined: 2006/3/15
From:
Posts: 6
 Re: Create Your Own Multi-Themed Xoops Site
yes that's it: 'switching header image within the style'. but how is it done?
more detailed: I'd like to change the header image for some modules. I thought this could be done by assigning a new style.css. e.g. style-1.css for the module news - with a different logo than the rest of the site.

Is there a way to do this using your solution of multiple styles ??
if yes, how? by indicating a background-image in style-1.css like this:
background-image:'<{$xoops_imageurl}>logo.gif'; ?
tl001
Posted: 2006/3/15 13:50  Updated: 2006/3/15 13:55
Webmaster
Joined: 2004/6/10
From:
Posts: 282
 Re: Create Your Own Multi-Themed Xoops Site
Quote:
Is there a way to do this using your solution of multiple styles ??
if yes, how? by indicating a background-image in style-1.css like this:
background-image:'<{$xoops_imageurl}>logo.gif'; ?


You can not use xoops_imageurl in style.css

you would need to specify the image to be used

let's say you want to use style1.css for news module, then you could use 

background-image: url (news.gif);


in style1.css to show news.gif as your new header image. You then could specify the image in other style sheets.

Hope this answers your questions.
yerres
Posted: 2006/3/15 16:55  Updated: 2006/3/15 17:02
Just popping in
Joined: 2006/3/15
From:
Posts: 6
 Re: Create Your Own Multi-Themed Xoops Site
hey good - works! ... but only for one module!
only the final module (mylinks) switches style. when removing 'mylinks' and 'tinyD', its 'news' that takes the new style ...
I dont find the error, maybe you do: 
<{php}>
    $mod = $GLOBALS['xoopsModule'];
    $dirname = (isset($mod) ? $mod->getVar('dirname') :'system');
  if ($dirname =='news') {
$this->assign('xoops_themecss', XOOPS_URL.'/themes/default/style-news.css');
} 
  if ($dirname =='tinyd') {
$this->assign('xoops_themecss', XOOPS_URL.'/themes/default/style-tinyD.css');
} 
  if ($dirname =='mylinks') {
$this->assign('xoops_themecss', XOOPS_URL.'/themes/default/style-mylinks.css');
} else {
$this->assign('xoops_themecss', XOOPS_URL.'/themes/default/style.css');
}
<{/php}>

I tried as above and with 'else'-declaration for every module.
tl001
Posted: 2006/3/15 17:49  Updated: 2006/3/15 17:50
Webmaster
Joined: 2004/6/10
From:
Posts: 282
 Re: Create Your Own Multi-Themed Xoops Site
The If/Else routing is not properly structured (two style sheets are much more manageable). You way want to try the following to see if it works

<{php}>
    $mod = $GLOBALS['xoopsModule'];
    $dirname = (isset($mod) ? $mod->getVar('dirname') :'system');

$this->assign('xoops_themecss', XOOPS_URL.'/themes/default/style.css');

  if ($dirname =='news') {
$this->assign('xoops_themecss', XOOPS_URL.'/themes/default/style-news.css');
} 
  if ($dirname =='tinyd') {
$this->assign('xoops_themecss', XOOPS_URL.'/themes/default/style-tinyD.css');
} 
  if ($dirname =='mylinks') {
$this->assign('xoops_themecss', XOOPS_URL.'/themes/default/style-mylinks.css');
}
<{/php}>
yerres
Posted: 2006/3/16 14:15  Updated: 2006/3/16 14:15
Just popping in
Joined: 2006/3/15
From:
Posts: 6
 Re: Create Your Own Multi-Themed Xoops Site
just perfect. helped me a lot. thank you!
tl001
Posted: 2006/3/16 14:50  Updated: 2006/3/16 14:50
Webmaster
Joined: 2004/6/10
From:
Posts: 282
 Re: Create Your Own Multi-Themed Xoops Site
Glad it worked for you.

Just a thought - if you are only switching header images, then you may want to consider assigning the images in the theme.html file, this way you would cut down the maintenance of the several similar style sheets.
yerres
Posted: 2006/3/19 6:36  Updated: 2006/3/19 6:36
Just popping in
Joined: 2006/3/15
From:
Posts: 6
 Re: Create Your Own Multi-Themed Xoops Site
That's what I thought as well; would be easier.
Do you have a solution ?? I found this one:
----
<{php}>
$mod = $GLOBALS['xoopsModule'];
$dirname = (isset($mod) ? $mod->getVar('dirname') :'system');
$GLOBALS['xoopsTpl']->assign( 'xoops_cmod', $dirname );
<{/php}>

<img src="<{$xoops_imageurl}><{$xoops_cmod}>.jpg" alt="" title="" />
---
tl001
Posted: 2006/3/19 8:47  Updated: 2006/3/19 8:53
Webmaster
Joined: 2004/6/10
From:
Posts: 282
 Re: Create Your Own Multi-Themed Xoops Site
I would assign the images according to modules and use a default one at the beginning, just as the way I would do with multiple css'.

something like 
... ...

$this->assign('custom_logo', XOOPS_URL.'/themes/default/site_logo.jpg');
  if ($dirname =='news') {
$this->assign('custom_logo', XOOPS_URL.'/themes/default/news_logo.jpg');
} 

... ...


then you could use the Smarty variable custom_logo as the the logo of the site.
yerres
Posted: 2006/3/20 11:21  Updated: 2006/3/20 11:21
Just popping in
Joined: 2006/3/15
From:
Posts: 6
 Re: Create Your Own Multi-Themed Xoops Site
excellent. thanks again for your helpful tips!
jaketess
Posted: 2006/11/3 3:09  Updated: 2006/11/3 3:09
Just popping in
Joined: 2006/11/3
From:
Posts: 1
 Re: Create Your Own Multi-Themed Xoops Site
Hello,

I am really really new to hacking xoops. I have no background (yet) on PHP. That's why I enjoy reading posts on forum as I find good tips in them.

I really like to do this, make changeable theme. I already tried this but nothings seems to work.

So I need to ask some questions to clarify things up:

1. Where would I put the code in my theme.html file? In the body? or before the body?

2. Does this mean that I will only use one theme folder which I will make default and then create my CSS there that will corresponds with the modules I will use?

Thanks poeple!!
tl001
Posted: 2006/11/3 10:51  Updated: 2006/11/3 10:52
Webmaster
Joined: 2004/6/10
From:
Posts: 282
 Re: Create Your Own Multi-Themed Xoops Site
As explained in the tutorial, you must first create a brand new theme/directory and use the theme file as specified. The theme.html would have nothing but the php codes.

If everything is done as per described, Xoops at startup will look for the default theme called "Multi", from there, look for specific theme files under different theme directories according to the module selected.

Hope this clarifies things.
dckngai
Posted: 2006/11/23 21:17  Updated: 2006/11/23 21:17
Just popping in
Joined: 2006/11/23
From:
Posts: 2
 Re: Create Your Own Multi-Themed Xoops Site
This is a good script that can help us a lot. thanks a lot for your contribution. Following your instruction, I could switch 2 different themes. However, I would like to assign 4 different themes according to modules, but in vein.

I used if..elseif...else as the following:

<{php}>
    $mod = $GLOBALS['xoopsModule'];
    $dirname = (isset($mod) ? $mod->getVar('dirname') :'system');
if ($dirname == 'newbb') {
   $theme='dream_on';
elseif ($dirname == 'news') {
   $theme='sunshine';
elseif ($dirname == 'mylinks') {
   $theme='imago06';
  } else {
   $theme='7dana-rose';
}

$this->assign('themename', $theme.'/theme.html');
$this->assign('xoops_theme', $theme);
$this->assign('xoops_themecss', XOOPS_URL.'/themes/'.$theme.'/style.css');
$this->assign('xoops_imageurl', XOOPS_URL.'/themes/'.$theme.'/');
<{/php}>
<{include file="$themename"}>


Would you please help look into the matter? Thanks in advance for your help.
dckngai
Posted: 2006/11/23 21:34  Updated: 2006/11/23 21:34
Just popping in
Joined: 2006/11/23
From:
Posts: 2
 Re: Create Your Own Multi-Themed Xoops Site
I think I made it works. There was something wrong with my coding, and now it was changed to:

<{php}>
    $mod = $GLOBALS['xoopsModule'];
    $dirname = (isset($mod) ? $mod->getVar('dirname') :'system');
if ($dirname == 'newbb') {
   $theme='dream_on';
  } elseif ($dirname == 'news') {
   $theme='sunshine';
  }elseif ($dirname == 'mylinks') {
   $theme='imago06';
  } else {
   $theme='7dana-rose';
}

$this->assign('themename', $theme.'/theme.html');
$this->assign('xoops_theme', $theme);
$this->assign('xoops_themecss', XOOPS_URL.'/themes/'.$theme.'/style.css');
$this->assign('xoops_imageurl', XOOPS_URL.'/themes/'.$theme.'/');
<{/php}>
<{include file="$themename"}>


Thanks again for your instructions!