Creating Themes with XOOPS

From ThemesWiki

Jump to: navigation, search
Building websites with XOOPS
Official Page
Project Documentation
Download
Source Book
200px-1904811280.jpg
ISBN 978-1-904811-28-2
Publisher Packt Publishing
Author(s) Steve Atwal

Many themes are available from various sources for XOOPS. To pick one, you just need to decide the type of website you wish to have.

We will look at what a theme is, how to install one, and then take a two-pronged approach to creating our own themes:

  • Modify an existing theme to create a customized version suitable for your website
  • Create a brand new theme

Contents

[edit] What is a Theme?

A theme defines the general look and feel of a XOOPS site. The theme, or skin, allows the separation of code that runs in the background of the site from the way information is presented to the user. The benefit of this is that an administrator (or user with sufficient privileges) can easily change the look of a site by simply selecting a new theme and then applying it.

From a developer's perspective, a XOOPS theme consists of a set of files in a theme folder where XOOPS is installed. The following screenshot shows the basic structure of this folder:

As you can see, the folder has an images folder that contains the images used by the theme, plus a few key files such as style.css (that will control the layout and format of the various elements of the theme, e.g. fonts), theme.html (that controls the overall layout and structure of the theme, e.g. whether to use a header, footer, left block, right block, center block, or all), as well as files for the various blocks of the theme that will be used.

The following diagram shows graphically the parts of the page that are changed by these files:

The header and footer sections can be changed using the main theme.html and style.css files.

Note that in XOOPS, templates are not the same as themes. Themes define the structure and layout of the entire site, and common elements in all pages, such as page colors, banners, width of left column, and if a header or footer bar exists. Templates control the design and layout of page elements, such as blocks (e.g. Main Menu, User Menu, and Recent Topics), custom blocks, and module content (e.g. index page of News). In addition, themes are changed using an HTML editor and FTP client, such as Filezilla. Templates are changed inside the XOOPS admin control panel.

Some Useful Information

Testking 70-294 Testking 70-293 Testking E20-001 Testking 650-177 Testking 642-873


A visit to the XOOPS website shows that a few themes are more popular than the rest. For example, the top themes as of this writing are 4whitebusiness (mostly designed for business), 7dana-clean, alightFC, 4thefort, imago06, 7dana-Xred, aqua-um, 4colorbiz, blue_lagoon, and EADJ2.1.

You can try any of these by simply downloading them, uncompressing the files, and copying them into your themes folder on your website. Selecting a theme that is suitable for your particular website is a matter of both personal taste and functionality, e.g. do you wish to display information on your website in two columns, or do you have so much information that a three-column theme is necessary? Do you like a particular color scheme, or do certain fonts seem more suitable for your website?

As you can see, at some point in time, you will have the urge to change the look and feel of your website. Since XOOPS uses themes, you can accomplish this by finding a suitable theme online, either free or from a commercial vendor specializing in creating themes.

Following are the screenshots of some of the themes mentioned here to give you an idea of the variety that is available for free download and use. You will have to determine if any of them meet your particular requirements.
The 7dana-clean theme

The alightFC theme

The 4thefort theme

The imago06 theme

[edit] Installing a New Theme

XOOPS comes with several themes that allow you to change the look and feel of your new website with a few mouse-clicks. We will use our demo website xoopsbook.steveatwal.com to demonstrate how to change the theme and show the changes.

To change the theme, we will download the Blue Shine theme from the website at http://www.xoopsdesign.com/modules/PDdownloads/viewcat.php?op=&cid=1.

Please note that you cannot download this theme until you first register at this website by creating a user ID and password, responding to the email you receive after Computer Recycling registration, and then logging into the website with your new user ID and password.

At this point, we will assume that you know how to unzip a file using zipGenius (or WinZip) and use Filezilla to upload the uncompressed files to your website. So, unzip the Blue Shine theme and upload the entire blue_shine folder (located inside the xoops_theme_blue_shine\XOOPS theme folder when you unzip the Blue Shine theme file) to the location /public_html/xoopsbook/themes/ on your website. This is assuming, of course, that XOOPS for our website http://xoopsbook.steveatwal.com is installed in /public_html/xoopsbook/.

Note that you can also upload the template files using the XOOPS administration menu at System Admin | Templates as long as the file is of the format tar.gz or .tar.

Once the folder has been uploaded, select Shredding Company and activate the new theme from the XOOPS web-based administration interface as follows:

Navigate to System Admin | Preferences | General Settings.

Change Default Theme to blue_shine.

Optionally, also change Selectable Themes so that only blue_shine is selected. This prevents users from changing the theme to something else and is needed if you wish to allow only one common theme for your website.

Now, you should see something like the following:

At this point, you will notice that you need to change the following parts of the theme to tune it to your needs:

  • Menus across the top of the website, e.g. you may not need the Downloads menu or the Articles menu, if you do not wish to use the article or the WF-Downloads modules
  • Website logo across the top of the website, which may in fact, be composed of several smaller images.
  • Fonts and colors used, e.g. you may like the layout but might feel that a different font is to your liking.

To remove menus, edit the theme.html file located at /public_html/xoopsbook/themes/blue_shine/theme.html, and scroll down until you see the following code. We will remove the highlighted lines below, which will leave only the Home, News, and Forum menus: 

 <td id="headmenu"><a class="menuHead" href="<{$xoops_url}>/index.php">Home</a></td>
 <td class="separator"></td>
 <td id="headmenu" ><a class="menuHead" href="<{$xoops_url}>/modules/news/">News</a></td>
 <td class="separator"></td>
 <td id="headmenu"><a class="menuHead" href="<{$xoops_url}>/modules/wfdownloads/">Downloads</a></td>
 <td class="separator"></td>
 <td id="headmenu"><a class="menuHead" href="<{$xoops_url}>/modules/newbb/">Forum</a></td>
 <td class="separator"></td> <td id="headmenu"><a class="menuHead" 
 href="<{$xoops_url}>/modules/article/">Articles</a></td> <td class="separator"></td> 
 <td id="headmenu"><a class="menuHead" href="<{$xoops_url}>/modules/mylinks/">Links</a> </td>

Note that in the preceding code, there is one extra / after the <{$xoops_imageurl}>. However, this is how the developer coded this theme and we can remove that extra / ourselves if we want to ensure that the code is totally correct, but the image will still be displayed with the extra / there. An example of this theme can be seen from this blog bluray ripper

We will also remove the large XOOPS banner at the bottom of the page by navigating to System Admin | Banners and removing the Advertising Client named XOOPS. Now, you should see something like the following:

As a hint, you can edit files on your website using Filezilla by setting the options within it to open a file on the website host using your favorite text editor. To do this for Notepad, open Filezilla and select Edit | Settings | Interface Settings | File Viewing/Editing and set Default program to view or edit a file as C:\WINDOWS\NOTEPAD.EXE; then, when you connect to your website using Filezilla, simply right-click on the file /public_html/xoopsbook/themes/blue_shine/theme.html and select View/Edit, which will then automatically download a copy of theme.html and open it within Notepad.

When you are done editing the file, save it within Notepad (or, if you specified another editor, save the file within that program), close Notepad, and switch back to Filezilla, which will prompt you to upload the saved file back to the server; just select Yes to do so. The following screenshot shows the prompt we receive within Filezilla after removing the preceding lines of code from theme.html, saving the file within Notepad, and then closing Notepad.

Note that the changes you have made to theme.html and style.css may not be reflected on your site. This may be because in System Admin | Preferences | General Settings the value for Check templates for modifications ? may be No. I would recommend you keep this value set to Yes, until you have finished editing your theme, at which point set it back to No since it will improve performance. Changes to themes are reflected on your site only when the template file is updated.

Changing the logo is a matter of finding the logo image file used by the theme and uploading your own image file to replace it. Changing fonts and colors will be covered in the next section. The default logo image for this theme is located at /public_html/xoopsbook/themes/blue_shine/images/logo.gif and looks as follows:

All you need to do to change the logo is create an image of the same height and width, give it the same name and upload the file back to the same location on the website. Note that you need to save this file in the same file format, i.e. .gif in this case, as the original. You can use your favorite image-editing software for this; even the Paint program that comes with Microsoft Windows XP will suffice; however, you can also use Gimp (both on Windows and Linux).

Free and commercial themes can be downloaded from various places on the Internet, including the following websites:

[edit] Customizing an Existing Theme

We will take the most popular theme, as indicated on 640-802 the XOOPS website, namely 4whitebusiness, and show you how to customize it.

Navigate to the www.xoops.org website, and under Community select the Theme Library. Then click on Popular to see the list of most popular themes. Download the 4whitebusiness theme and extract the file using zipGenius (or WinZip). Then, we will:

  • Upload the 4whitebusiness folder to our /public_html/xoopsbook/themes/ folder.
  • Log into XOOPS on our website and then set the theme 4whitebusiness as the default to be used by visitors to the website.

We will now customize this theme to show you how to change common elements such as:

  • Site logo
  • Font
  • Colors
  • Layout

Following is a screenshot of the 4whitebusiness theme as it appears on our demo website http://xoopsbook.steveatwal.com before any modifications:

[edit] Changing the Site Logo

Before you can create a new site logo and before your turn on your pool heater, you must ensure that the logo has the same size, i.e. width and height. The best way to do this is open the existing site logo, located at /public_html/xoopsbook/themes/4whitebusiness/logo.jpg, in your favorite image viewer or image editor and check the size.

To accomplish this in the freeware software program IrfanView (downloadable from most freeware websites such as www.softpedia.com), select Image | Resize/Resample, which will show you the existing size of the image in pixels, and allow you to modify the size of the image to the campervan hire australia same dimensions as the original logo.jpg. You may have to tweak it a little by adding filler space. If you don't resize the image, the image may appear too large or too small to fit into the theme header, and the rest of the theme elements will also not be aligned properly.

The logo for the 4whitebusiness theme has the following dimensions: Width: 400 pixels
Height: 100 pixels

The following screenshot shows the original logo image:

Then, use your favorite image editor to create another image of the exact size, shown as follows:

Now, using Filezilla:

  1. Navigate to the 4whitebusiness theme directory, i.e. /public_html/xoopsbook/themes/4whitebusiness.
  2. Upload the new logo.jpg image into the /public_html/xoopsbook/themes/4whitebusiness folder and overwrite the existing one (or rename the existing file first if you would like to revert back to it later). And that is all!

[edit] Changing the Font

After a while, you may start to get tired of the Verdana and Arial fonts combination you see everywhere. Modifying the fonts used by a theme is as easy as making a few changes to the theme stylesheet.

Typically, the main stylesheet will be called style.css. In this particular case, paragraph content uses Verdana while headers use Arial. Instead, we want to use Helvetica for content and Times New Roman for the headers. So, to accomplish this:

  1. Open style.css.
  2. Scroll down to the fourth line that starts with: table td {padding: 0; border-width: 0; font-family: Verdana,Tahoma, Arial, Helvetica, sans-serif;}
  3. Change this line so that the fonts listed after font-family are: font-family: Helvetica, Verdana, Tahoma, Arial, sans-serif;
  4. Scroll down to the line that starts with: th {color: #000000; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;}
  5. Change the fonts listed after font-family to: font-family: "Times New Roman",serif;

Now, because the content has been changed to Arial, it looks slightly too small. We will increase the font size to make it more legible. So, we scroll down to the following selectors and change the font-size property to 1.2em:

  • table td line: 
 table td {padding: 0; border-width: 0; font-family: Helvetica, Verdana, Tahoma, Arial,
  sans-serif;font-size:1.2em;}
  • th line: 
 th {color: #000000; padding : 2px; vertical-align : middle;font-family: "Times New Roman",serif;}
  • td#centerCcolumn</code> div.blockContent line: 
 td#centerCcolumn div.blockContent { padding: 3px;
 margin-right: 0px;margin-left: 0px; margin-bottom: 2px;
 font-size: 1.2em; line-height: 90%; text-align: left;}
  • td#centerLcolumn div.blockContent line: 
 td#centerLcolumn div.blockContent {padding: 3px; margin-left: 3px; margin-right: 2px;  
 margin-bottom: 2px; font-size: 1.2em; line-height: 120%;}
  • td#centerRcolumn div.blockContent line: 
 td#centerRcolumn div.blockContent {padding: 3px;
 margin-left: 2px;
 margin-right: 3px;
 margin-bottom: 2px;
 font-size: 1.2em;
 line-height: 120%;}
  • Then, we remove the font-size: x-small property from these columns, so that it doesn't conflict with the new font size that was defined (1.2em): 
 td#rightcolumn div.Blockcontent
 td#leftcolumn div.blockContent
 td#mainmenu a.<various elements>

[edit] Changing the Colors

You have now changed the site logo and altered the fonts to better fit the ideal look of your website. However, the colors still do not look quite right. Fortunately, the theme stylesheet will allow you to change the colors of your website also.

Let's say that you want to change the color of the left column to accent the header:

  • Find the td#leftcolumn selector.
  • Add the following property, which changes the color to blue-gray: background-color: #A2B2C1;

And then, to push people to read the center column, we'll subdue the right column by changing the color of the column partition to light-gray:

  • Find the td#rightcolumn selector.
  • Add the following property: background-color: #eeeeee;

[edit] Changing the Layout

As a result of modifying the font size, the box in the center-right column is making contact with the left column. It looks like the two columns are running into each other. We need more whitespace. To do this, we'll need to make some changes to one of the theme-layout files.

  • Open theme_blockcenter_l.html.
  • In the first </code> tag, add a style attribute to provide a wider margin: 
    style="margin-left: 4px;"
    • Thus, the second line in the file looks like:
    This will add some whitespace, making the template appear less cramped and more polished. Following is a list of all the layout files that you can modify, which correspond to the various sections of a page as shown in the graphical diagram earlier in this tutorial:
    • theme_blockleft.html
    • theme_blockcenter_l.html
    • theme_blockcenter_c.html
    • theme_blockcenter_r.html
    • theme_blockright.html

    Each of these template files is responsible for generating a part of the page. theme_blockleft.html and theme_blockright.html generate the left and right columns, while the center block templates (theme_blockcenter_l.html, theme_blockcenter_c.html, and theme_blockcenter_r.html) generate the left, center, and right portions of the center column. As a result, XOOPS actually uses a five-column layout.

    We have covered the basics of customizing a XOOPS theme. The XOOPS themes are designed to be easy to modify. We discussed changing the site logo, the fonts, the colors, and even the spacing. Delving deeper into this will allow you to drastically change XOOPS themes and make them closer to your ideal vision of your website.70-680

    [edit] Creating a New Theme

    We will now take you through creating a brand new theme. This is not as hard as it seems, and may be necessary to create a truly unique look for your website. We will show you how to create the major parts of a theme.

    However, we will put a twist to things; rather than just walk you through creating a new theme, step by step, we will convert the Mollio theme from www.mollio.org into a XOOPS theme. The reasons for this are:

    • It will give you the foundation to convert themes from other content management systems to XOOPS, and thus contribute to the XOOPS community if you decide to share these creations.
    • It will let you build new themes more easily, without having to reinvent the wheel.

    In the previous section, we showed you how to modify an existing XOOPS theme. Now, we will convert a non-XOOPS theme into a XOOPS theme.

    To get started, you will need to download the Mollio theme package file from http://www.mollio.org, or from our demo website at http://xoopsbook.steveatwal.com/mollio_version1.1.zip.

    The template is freely available, and modifiable, under several licenses: Creative Commons: http://creativecommons.org/licenses/by/2.5/ GPL: http://creativecommons.org/licenses/GPL/2.0/ CPL: http://www.opensource.org/licenses/cpl1.0.php

    Extract the theme package into a folder called Mollio, and decide which version of the template files to use. We have decided to use the Type C theme style, which has the following features: Type C: 3 columns Main, Left-hand navigation, and Right Sidebar

    The following screenshot shows what this theme looks like:

    Open the typec.html template file and remove all the content (it simply demonstrates the styles for each CSS class and ID). You will be left with basic page containers for:

    • Header
      • Site Name
      • Search
      • Horizontal Navigation
    • Content Wrap
      • Utility (left side bar)
      • Content (center column)
      • Sidebar (right side bar)
      • Footer (for content area)
      • Poweredby (Mollio logo that appears in the top-right of the page)

    To see the above visually, take a look at the following figure:

    Next, create a new folder called MX for your Mollio XOOPS theme. Then:

    • Copy typec.html into MX and rename it to theme.html.
    • Copy all stylesheets from the subfolder /css into MX.
    • Rename main.css to style.css.
    • Copy the following folders to the MX folder:
      • Images
      • Js
      • Wsimages

    Copy all images from the /css/images subfolder in the Mollio folder to the MX/images folder.

    [edit] Header

    Open the file theme.html, and place the following tags in the HEAD section: 

     <meta http-equiv="content-type" content="text/html; 
                                   charset=<{$xoops_charset}>" />
 <meta http-equiv="content-language" content="<{$xoops_langcode}>" />
 <meta name="robots" content="<{$xoops_meta_robots}>" />
 <meta name="keywords" content="<{$xoops_meta_keywords}>" />
 <meta name="description" content="<{$xoops_meta_description}>" />
 <meta name="rating" content="<{$xoops_meta_rating}>" /> 
 <meta name="author" content="<{$xoops_meta_author}>" />
 <meta name="copyright" content="<{$xoops_meta_copyright}>" /> 
 <meta name="generator" content="XOOPS" /> 
 <title><{$xoops_sitename}> - <{$xoops_pagetitle}></title> 
 <link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />

    Add references to your stylesheets and Mollio Js: 

     <link rel="stylesheet" type="text/css" href="<{$xoops_themecss}>" media="screen" />
 <link rel="stylesheet" type="text/css" href="<{$xoops_url}>/themes/MX/ print.css" media="print" />  
 <!--[if lte IE 6]>
 <link rel="stylesheet" type="text/css" href="<{$xoops_url}>/themes/MX/ie6_or_less.css" />  
 <![endif]--> 
 <script type="text/javascript" src="<{$xoops_url}>/themes/MX/js/common.js"></script>

    Display the site name in the template site-name div: 

      <div id="site-name"><{$xoops_sitename}></div>

    In the search div, change the form action to point to the XOOPS search script: 

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

    Populate the horizontal nav strip with links to XOOPS modules: 

     <ul id="nav">
 <li class="first"><a href="<{$xoops_url}>/">Home</a></li> 
 <li><a href="<{$xoops_url}>/modules/mydownloads/">Files</a></li> 
 <li><a href="<{$xoops_url}>/modules/xoopsfaq/">FAQ</a></li> 
 <li><a href="<{$xoops_url}>/modules/contact/">Contact Us</a></li>
 <li class="last"><a href="<{$xoops_url}>/modules/newbb/">Forums</a></li> </ul>

    In the content-wrap container, look at the utility div. Delete all of the content within the utility div and add the following to display left-side XOOPS content: 

     <{foreach item=block from=$xoops_lblocks}>
 <h4><{$block.title}></h4> 
 <{$block.content}> 
 <{/foreach}>

    The preceding code tells XOOPS to populate the HTML container with all the modules assigned to the left column of the page (therefore, it would make sense for this code to be in the left column of the HTML template). There is a corresponding block of code for each column in the template.

    As of version 2.0, XOOPS has been using the Smarty template engine, which means that themes will have Smarty tags embedded in the HTML code, as in the previous code. Smarty tags are delimited by <{ and }>. Thus, in the preceding code, following are the Smarty tags: 

    <{$block.title}>
<{$block.content}>

    One benefit of making use of Smarty tags is that they speed up site loading because content of these tags have already been processed and compiled. Thus, there is no need to create your own custom code to get the site URL, the theme folder, etc. Instead use a Smarty tag. To find out more about the Smarty template engine, visit the Smarty website at http://smarty.php.net, or refer to the book Smarty PHP Template Programming and Applications from Packt Publishing (ISBN 1-904811-40-X).

    [edit] Content

    In the content container, delete all the existing content (with the exception of the footer container), and add the following code to display XOOPS modules assigned to the center-center column. Note that in this modification of the Mollio template, only center-center content is displayed (no code has been included to show center-right or center-left content): 

     <{foreach item=block from=$xoops_ccblocks}>
 <h2><{$block.title}></h2> 
 <{$block.content}>
 <{/foreach}>

    In the footer container, add the following line: 

    <p><{$xoops_meta_copyright}> By <{$xoops_sitename}><br />All trademarks used are properties
of their respective owners. All rights reserved.</p>

    Content on the right side of the page appears within the featurebox class; mostly, because I think it looks pretty good, and differentiates it from the other content on the page. The XOOPS right-column content appears within this container, which is called sidebar in the Mollio template. The right-side content is displayed with this code: 

     <{foreach item=block from=$xoops_rblocks}> 
 <div class="featurebox">
 <h3><{$block.title}></h3> 
 <{$block.content}> 
 </div> 
 <{/foreach}>

    The last step requires us to make some additions to the style.css stylesheet. These additions will allow the left-side vertical menu to work as it does in the static HTML-based Mollio template: 

     #usermenu a:link, a.menuMain:link, a.menuTop:link, #usermenu a:visited, a.menuMain:visited,  
 a.menuTop:visited, #usermenu a:hover, a.menuMain:hover, a.menuTop:hover, #usermenu a:active,         
 a.menuMain:active, a.menuTop:active { 
 display: block;
 width: auto;
 padding: 0 0 0 25px;
 background: #fff url("images/sprites.gif") no-repeat 10px -695px; 
 text-decoration: none; 
 font-weight: bold;
 font-size: 0.9em; 
 line-height: 1.9; 
 color: #000; 
 border-top: 1px solid #fff; 
 border-bottom: 1px solid #ccc;}

 a.menuMain:hover, a.menuTop:hover {
 color:#c00;
 background: #fee url("images/sprites.gif") no-repeat 10px -695px; 
 text-decoration: none;}

 a.menuSub:link, a.menuSub:visited, a.menuSub:hover, a.menuSub:active {
 display: block;
 width: auto;
 margin: 0 0 0 23px;
 padding: 0 0 0 23px;
 background: #fff url("images/sprites.gif") no-repeat 0 -798px;
 text-decoration: none; 
 font-weight: normal; 
 font-size: 0.8em;
 line-height: 1.9; 
 color: #000;}
 a.menuSub:hover { 
 color:#c00; 
 background: #fff url("images/sprites.gif") no-repeat 0 -798px; 
 text-decoration: none;}

    So, we have just gone through converting a theme from Mollio to XOOPS. We have changed three key areas of the theme: header, content (including footer), and the "Powered by " logo. We have shown the site name, search, and navigation menu at the top of the page, as well as added left-column, right-column, and center-content areas. Following are some screenshots of the new theme in action:

    http://knowyourstrength.com After a user logs in, the login section on the left column will disappear as shown in the following screenshot: http://bestofmatrimony.com

    [edit] Additional Refrences

    For instructions on installing XOOPS, click here

    These themes when used for acnezine reviews and Нарды

    [edit] Source

    The source of this content is Chapter 5: Creating Your Own Themes of Building Websites with XOOPS by Steve Atwal (Packt Publishing, 2007). logo design by Kevin Josh 2010

    Executive Editor Sean Lopez own  : SEO Company and provider of Link Building Services and SEO Services and criar sites

    And Like Costumes and Halloween Costumes deliver flowers uk

    And Like The Global Information Network and Global Information Network

    Retrieved from "http://www.themeswiki.com/Creating_Themes_with_XOOPS"
Personal tools