Create Your Own Theme

Published on February 2017 | Categories: Documents | Downloads: 51 | Comments: 0 | Views: 243
of 4
Download PDF   Embed   Report

Comments

Content

Xoops Tips - Themes - Create Your Own Multi-Themed Xoops Site

Page 1 of 4

Create Your Own Multi-Themed Xoops Site
Date 2005/5/12 11:20:33 | Topic: 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

http://xoops-tips.com/modules/news/print.php?storyid=89

10/21/2010

Xoops Tips - Themes - Create Your Own Multi-Themed Xoops Site

Page 2 of 4

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.

http://xoops-tips.com/modules/news/print.php?storyid=89

10/21/2010

Xoops Tips - Themes - Create Your Own Multi-Themed Xoops Site

Page 3 of 4

Example 2, Multiple Themes According to Seasons First modify and create your existing theme to show seasonal patterns and name them accordingly; then create the directing theme.html file with the following: <{php}> $Month = date('n'); switch($Month){ case '1' : $theme = 'theme_winter'; break; case '2' : $theme = 'theme_winter'; break; case '3' : $theme = 'theme_winter'; break; case '4' : $theme = 'theme_spring'; break; case '5' : $theme = 'theme_spring'; break; case '6' : $theme = 'theme_summer'; break; case '7' : $theme = 'theme_summer'; break; case '8' : $theme = 'theme_summer'; break; case '9' : $theme = 'theme_autumn'; break; case '10' : $theme = 'theme_autumn'; break; case '11' : $theme = 'theme_autumn'; break; case '12' : $theme = 'theme_winter'; break; default : $theme = 'default'; break; } $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"}>

You will have to play around to fit your own seasonal pattern as different regions have different patterns. The pattern shown is a typical Canadian season with winter being unbearingly looong! You can replace $month = date(‘n’); with time of the day pattern and assign the theme accordingly. If you are not sure, check PHP manual on the date function. Example 3 – Different Style Sheets for Different Modules If you click on Contact of our site, you will notice the different block title color (black vs white) and background color (light grey vs drak grey) of the left menu. How did we do that? We simply duplicated the style.css and created a new file called style-l.css We added the following to the top of our theme (red) <{php}> $mod = $GLOBALS['xoopsModule']; $dirname = (isset($mod) ? $mod->getVar('dirname') :'system'); if ($dirname =='liaise') { $this->assign('xoops_themecss', XOOPS_URL.'/themes/red/style-l.css'); } else { $this->assign('xoops_themecss', XOOPS_URL.'/themes/red/style.css'); } <{/php}>

http://xoops-tips.com/modules/news/print.php?storyid=89

10/21/2010

Xoops Tips - Themes - Create Your Own Multi-Themed Xoops Site

Page 4 of 4

This tells Xoops to use style-l.css for the module Liaise and style.css for all other modules. The control over style.css provides you many ways to subtly customize your theme. Hopefully, the two additional examples have shown you enough clues so that you can use as a guide to customize and dazzle your users! Credit Thanks go to Suin (http://xoops.suin.jp) for a monthly change theme TIP. Be sure to check out Suin’s web site for TIPs, Simplified URLs hack and many other great modules.

This article comes from Xoops Tips http://xoops-tips.com The URL for this story is: http://xoops-tips.com/article.php?storyid=89

http://xoops-tips.com/modules/news/print.php?storyid=89

10/21/2010

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close