xoops forums

Will_H

Friend of XOOPS
Posted on: 2007/9/24 16:03
Will_H
Will_H (Show more)
Friend of XOOPS
Posts: 1786
Since: 2004/10/10
#1

[tutorial] XOOPS Theme Dev. COMPLETE!

Part 1 - Preperation

The following is the first of 3 tutorials in transforming your PSD's into XOOPS themes.

This first part focuses on Preperation for the rest of the tutorial, and understanding the basics of Photoshop.

Let's make a XOOPS Theme

In this tutorial I will teach you how to take a PSD file from Photoshop, all the way to your XOOPS-powered Website.

Things you will need before we begin:

1) A PSD file

Resized Image

2) And of course.... Photoshop (any version).
I will be utilizing CS3, but will give you instructions for earlier additions as we go.

Let's Begin

Open your PSD and if in CS3, select the slice tool Resized Image

If you're using an earlier version of Photoshop please open your PSD in Imageready. If you are already have it loaded in Photoshop you can export it to Imageready and will begin from there.

When your PSD is ready select the slice tool Resized Image

To avoid confusion I like to Hide Auto Slices.

Auto slices are the program assuming what your next slice is going to be. It won't. So it's best to just not let it try and confuse you.

Before we begin slicing it is important to know how a basic XOOPS theme is constructed.

Header, composed of 3 images:

A left image
A center image (that usually repeats)
A right image

Imagine this:

<table width="100%"
<
tr
   <
td
      <
td><img src="L Image" alt="" /></td
      <
td><img src="C Image" alt="" /></td
      <
td><img src="R Image" alt="" /></td
   </
tr
</
table>


The first step in learning how to design themes is understanding how you will code it.

Your basic XOOPS Theme uses a tabled layout, which means that for every table there will be a row. Each row will span across from left to right. So we will need to slice our PSD using the same logic.

Resized Image

Part 2 -Slicing coming soon!

aph3x

Theme Designer
Posted on: 2007/9/24 16:09
aph3x
aph3x (Show more)
Theme Designer
Posts: 834
Since: 2004/12/26
#2

Re: [tutorial] XOOPS Theme Dev. 1 of 3

Lovely ,I'm not good at all at explaining procedures
Everything I'm not made me everything I am
The Themes

jeffgr

Quite a regular
Posted on: 2007/9/24 17:20
jeffgr
jeffgr (Show more)
Quite a regular
Posts: 263
Since: 2004/2/22
#3

Re: [tutorial] XOOPS Theme Dev. 1 of 3

Cool, I look forward to the rest of this tutorial!

Will_H

Friend of XOOPS
Posted on: 2007/9/24 19:05
Will_H
Will_H (Show more)
Friend of XOOPS
Posts: 1786
Since: 2004/10/10
#4

Re: [tutorial] XOOPS Theme Dev. 1 and 2 of 3

Part 2 - Slicing

This tutorial teaches you how to slice your PSD's and details that need to be focused on while you are doing so.

You will also learn to save your work!

Alright, lets pick right where we left off.

Resized Image

We have our PSD's open, and our slice tools selected, but how d owe break this image down?

It's simple and to illustrate how you should look at your template I will literally break my own down.

The Header

Resized Image

Alright, hele is my header. Which is we discussed in part 1 of the tutorial is broken down into 3 different images.

Q: How do we break them down?
A: You have to differentiate the important elements from the non-critical ones. Let me illustrate this with my first slice:

Resized Image

As you can see I did not slice all the way to the edge, I only gathered the important parts of the left side of my header. Background colors can be defined with CSS, so there is no reason to make the image bigger than it really needs to be.

Lets continue...

Resized Image

As you can see I have made three slices here.

The Left, the Right, and a piece in the Center.

I will use CSS to repeat the center piece across the whole header.

Let's Do the Whole Thing!

Resized Image

Here I have used the same technique that we discussed when doing the head, on the whole template. I have 11 Basic slices. Already I can see a problem, and now we will talk about it.

Decisions

Resized Image

My template uses a couple techniques that unfortunately conflict with each other.

There is both a gradient background and a drop shadow border.

There are ways to have both using CSS, but until you understand the basics of slicing the code, let's assume there is not.

Q: So how do we dedide which is best?
A: That the beauty of Photoshop! You can see for yourself. In the following examples I will show you what my template looks like with either or instead of both. We will look at both options and decide which is the best, then we will make any necessary adjustments and proceed to coding.

Gradient:

Resized Image

Borders:
Resized Image

This is certainly not a hard decision to make! The Borders version looks by far much better than the gradient only version. Now lets talk about why this was important.

Making it --> Fit <--

If you take a look back at the example I showed you with all of the slices present, you may notice that I said that there were 11 slices. However, only 9 are clearly visible.

Q: Where are the missing two slices?
A: These slices are the body Left and Right background images. They are not there in all themes, but they are in this one. Lets take a look at them.

Resized Image
Resized Image

Before we had gotten rid of the gradient the color changed about half way down the page which would have looked awful had we stuck with it. Now though, it looks the same all the way down the side of the page, and we can use a single piece and repeat it all the way to the footer.

Let's Save What We Have

Saving your work can be a little confusing, but there is a really easy way to do it.

FIRST OF ALL SAVE YOU PSD!

It is always wise to save your PSD often, Photoshop has a real nasty habit of crashing when you make something that took a long time, or is really nice. So save the PSD often.

NEXT:
If you are in CS3 simply click on File-> Save for Web & Devices and choose your formatting.

If you are in Imageready, File->Save Optimized As. You won't have as many options, and there are ways to get it to save to different formats, but for now go with the defaults.

Always select "User Slices Only" otherwise you will have to wade through all of the auto slices to find the good ones.

After you click OK, you will have both an HTML document and an image folder. You are ready to turn your work into a XOOPS Theme.

In Part 3 We will finally see our PSD actualized as a XOOPS theme.

Will_H

Friend of XOOPS
Posted on: 2007/9/25 20:52
Will_H
Will_H (Show more)
Friend of XOOPS
Posts: 1786
Since: 2004/10/10
#5

Re: [tutorial] XOOPS Theme Dev. 1 and 2 of 3

Part 3 - Coding

In this tutorial I will take you from Imageready to your XOOPS powered website. I will teach you the basics of laying out your theme, and tweaking css.

I will also teach you how to give your theme those nice borders!

This will be a tabled theme. However the same principles apply to tableless.

We have now covered how to get your template ready for XOOPSification. In this tutorial I will give you the basics that are required to turn your work into an actual XOOPS theme.

Right now you should have a folder called "images" and an HTML document.

The first thing you need to do is layout the goundworks for your theme.html

We will then move onto coding in your template, and finally refining with CSS.

The Basics

Every XOOPS Theme starts out th esame way for me, I create a file called "theme.html" then write in the following header code:

<!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="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<
head>
<
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" />
<{if 
$is_redirect == 1}>
 <
meta http-equiv="Refresh" content="<{$time}>; url=<{$url}>" />
<{/if}>
<
title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
<
link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />
<
link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" />
<
link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />
<!-- 
RMVadded module header -->
<{
$xoops_header}>
<{
$xoops_module_header}>
<
script type="text/javascript">
<!--
<{
$xoops_js}>
//-->
</script>
</
head>
<
body>


Now that we have our Header code in place, we can move onto coding the rest of our theme!

The Header

You my recall the following example from part 2 of this tutorial

<table>
<
tr>
   <
td>
      <
td><img src="L Image" alt="" /></td>
      <
td><img src="C Image" alt="" /></td>
      <
td><img src="R Image" alt="" /></td>
   </
tr>
</
table>


This snippet of code is all you need to know to bring your XOOPS theme to life. This is the fundamental base of all tabled themes. Open a table (<table>), start a now row (<tr>), and put data in your table (<td>). The most important is remembering to close your tags (</table> </tr> </td>).

Let's do our Header.

<table align="center" cellpadding="0" cellspacing="0" class="head_table">
      <
tr
        <
td align="left"><a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>images/head_l.jpg" width="120" alt="" border="0" /></a></td>
        <
td style="background-image: url(<{$xoops_imageurl}>images/head_c.jpg); background-repeat: repeat-x; width: 100%;"></td>
        <
td align="right"><img src="<{$xoops_imageurl}>images/head_r.jpg" width="230" alt="" border="0" /></td>
    </
tr>
</
table>


Class? CSS! HAZZAH!

Wondering why I snuck something new in? Think I wasn't going to explain it to you? Tsk Tsk.

If your images are the skin of your XOOPS website, and XOOPS is the skeleton, then CSS is the lifeblood.

Q: Why?
A: Before CSS all image based designs had to use things called space.gif's essentially you literally had to account for every single pixel that was going to be used in your design.

NOT ANYMORE

Todays design are lightweight, there is no longer a need for pages to take 30 seconds to load. With 11 images I can create a fully operational and graphic rich XOOPS powered website. Of course if you want graphic block frames the count goes up, but not by much.

Lets use the header code to teach you about CSS!

<table align="center" cellpadding="0" cellspacing="0" class="head_table">

CREATE A FILE CALLED "style.css"

There are some basics that need to be in every Stylesheet. You use Stylesheet to define redundant things like background colors, table heights, background-images. There are essentially and endless array of alternative things you can do with Stylesheets, but we will just cover the basics.

Right now our stylesheet should have some basic stuff in them.

Lets give you an example of an absolutely basic stylesheet.

body {
    
font-familyVerdana;    
    
color#BBB;
    
background-color#383838; 
    
margin0;    
    
padding0;    
    
font-size10px;
}

hr {
    
color#BBB; 
    
height:1px;
}

{
    
color#777; 
    
text-decorationnone
    
font-weightbold
    
background-colortransparent;
}
    
a:hover {
    
color#BBBBBB;
}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}


ul {
    
margin0px;
    
padding0px;
    list-
stylesquare inside;
    
text-alignleft;
    
color#BBB;
    
line-height18px;
}
li {font-familyVerdana;
    
color#BBB;
}
li a{font-familyVerdana;
    
font-size9px;
}


textareaselectinput  {
    
font-familyVerdana;
    
background-color#383838;
    
color#BBB;
    
font-size9px;
    
border-top1px solid #000000;
    
border-right1px solid #FFFFFF;
    
border-left1px solid #000000;
    
border-bottom1px solid #FFFFFF;
    
margin-top1px;
}

textarea {
    
width100%;
    
overflowauto;
}

textarea:hoverinput:hover {
    
font-familyVerdana;
    
background-color#BBB;
    
color#000;
    
font-size9px;
    
border-top1px solid #000000;
    
border-right1px solid #FFFFFF;
    
border-left1px solid #000000;
    
border-bottom1px solid #FFFFFF;
    
margin-top1px;
}

table {
    
width100%;
    
}
TRTD {
    
font-familyVerdanaTahomaArial;
    
font-size9px;
    
color#BBB;
    
padding0pxvertical-aligntop;
}


These are basic style classes that you must start with on pretty much every theme.

Right now if I uploaded my theme on XOOPS I would have a background color (Body {...}), and a header that is spanning the whole page. That's not what we want though, so lets look at how we can use stylesheets to get our header looking just right.

.head_table{
background-color:#383838;
width: 80%;
height: 120px;
text-align: center;
}


What I have defined here is this:

- My head table will have a background of #383838
- I want my head table to be 80% of the total page
- My head table is 120px tall
- Any text should be centereed

Lets Put it Together

Using the same process that I just showed you I am able to code in my Header, and my Submenu but how do we get those links in the submenu?

This is really simple actually, we just use our good ol' buddy the <a> tag. Below you will see exactly how to do it.

<table align="center" cellpadding="0" cellspacing="0" class="sub_table">
      <
tr
        <
td align="left"><a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>images/subhead_l.jpg" width="40" alt="" border="0" /></a></td>

<
td style="background-image: url(<{$xoops_imageurl}>images/subhead_c.jpg); background-repeat: repeat-x; width: 100%;">

<
a href="YOUR URL">YOUR LINK</a>

</
td>

        <
td align="right"><img src="<{$xoops_imageurl}>images/subhead_r.jpg" width="40" alt="" border="0" /></td>
    </
tr>
</
table>


And the CSS...

.sub_table{
    
background-color#383838;
    
width80%;
    
height20px;
    
text-aligncenter;
    
color#BBB;
}


So now you have two complete functional tables, you are doing a great job. You should be proud of what you have done.

Lets make it pretty with borders!

This is actually a really simple trick, that will always give you a nice outcome.

I am about to teach you about IN-Line CSS, basically this means that instead of using a stylesheet, you define the CSS right in your theme file.

So we have gotten all the way to the body and we know that it too is broken down into 3 parts. The left border, the center for the content, and the right border.

Q: How do we code our border graphics?
A: Just like this....

<table align="center" cellpadding="0" cellspacing="0" class="body_table">
<
tr>
              <
td width="1%" style="background-image: url(<{$xoops_imageurl}>images/body_l.jpg); background-repeat: repeat-y; background-color: #383838;"><img src="<{$xoops_imageurl}>images/body_l.jpg" width="20" height="1" alt="" /></td>
        <
td width="98%">
!!!!
ALL YOUR XOOPS CONTENT GOES HERE!!!!
                 </
td>
              <
td width="1%" style="background-image: url(<{$xoops_imageurl}>images/body_r.jpg); background-repeat: repeat-y; background-color: #383838;"><img src="<{$xoops_imageurl}>images/body_r.jpg" width="20" height="1" alt="" /></td>
</
tr>
</
table>


You may have noticed where it says "!!!!ALL YOUR XOOPS CONTENT GOES HERE!!!!"

There really is not much to getting your XOOPS content to show up in you theme. I will show you how to do one, and I want you to apply what you learn to the rest.

<table align="center" cellpadding="0" cellspacing="0" class="body_table">
<
tr>
              <
td width="1%" style="background-image: url(<{$xoops_imageurl}>images/body_l.jpg); background-repeat: repeat-y; background-color: #383838;"><img src="<{$xoops_imageurl}>images/body_l.jpg" width="20" height="1" alt="" /></td>
        <
td width="98%">
<
table align="center" class="main_table">
    <
tr>
        <
td>
<
table border="0" cellpadding="0" cellspacing="0">
    <
tr
    <{if 
$xoops_lblocks}>
        <
td rowspan="2" valign="top" id="leftcolumn"
<!-- 
Start left blocks loop -->
        <{foreach 
item=block from=$xoops_lblocks}>
                        <
div class="blockTitle"><{$block.title}></div>
                        <
div class="blockContent"><{$block.content}></div>
        <{/foreach}> 
<!-- 
End left blocks loop -->
        </
td>
    <{/if}>
!!!!
THE REST OF YOUR XOOPS CONTENT GOES HERE!!!!
                 </
td>
              <
td width="1%" style="background-image: url(<{$xoops_imageurl}>images/body_r.jpg); background-repeat: repeat-y; background-color: #383838;"><img src="<{$xoops_imageurl}>images/body_r.jpg" width="20" height="1" alt="" /></td>
</
tr>
</
table>


So we have a our Left Column in and you need a CSS example right?

td#leftcolumn {
    
width140px;
    
font-size:9px;
    
background-colortransparent;
    
padding-right5px;
}
td#leftcolumn div.blockTitle {
    
font-familyhalflife;
    
font-size12px;
    
color#FF9436;
    
text-align:right;
    
font-weightbold;
    
background-color#383838;
    
padding-right2px;
    
border-bottom1px outset #FF9436;
}
td#leftcolumn div.blockContent {
    
width100%;
    
background-color#383838;
    
color#BBB;
    
padding-top2px;
    
padding-bottom4px;
}


Here we have defined all of the information necessary for our leftcolumn to display just the way we need it to.

By now you should be able to apply these principles to get your entire template to render properly. You should understand how to create a table and give it a class, as well as define that class utilizing css. You are ready to apply these principles to your own work!

If along the way you encounter problems, post in the forums at Mr. Theme Designs or here, and I or someone else will do what we can to help you out.

Ultimately, it takes time to perfect these principles. However if you do it enough it will be second nature to you!

BOL!

Bassman

Friend of XOOPS
Posted on: 2007/9/25 22:03
Bassman
Bassman (Show more)
Friend of XOOPS
Posts: 1272
Since: 2003/5/23
#6

Re: [tutorial] XOOPS Theme Dev. 1 and 2 of 3

Excellent work. I wish I had something like this when I was starting out :)

script_fu

Friend of XOOPS
Posted on: 2007/9/25 23:04
script_fu
script_fu (Show more)
Friend of XOOPS
Posts: 1494
Since: 2002/12/27
#7

Re: [tutorial] XOOPS Theme Dev. 1 and 2 of 3

Very nice Will! Good job.

Will_H

Friend of XOOPS
Posted on: 2007/9/26 0:19
Will_H
Will_H (Show more)
Friend of XOOPS
Posts: 1786
Since: 2004/10/10
#8

Re: [tutorial] XOOPS Theme Dev. COMPLETE!

Thank ya gents.

Will_H

Friend of XOOPS
Posted on: 2007/9/26 14:03
Will_H
Will_H (Show more)
Friend of XOOPS
Posts: 1786
Since: 2004/10/10
#9

Re: [tutorial] XOOPS Theme Dev. COMPLETE!

I have added this tutorial to the Articles section of MrTheme.com

It may be easier for future users to view it there instead of having to dig in the forums.

Link

Mantooth

Friend of XOOPS
Posted on: 2007/9/26 18:08
Mantooth
Mantooth (Show more)
Friend of XOOPS
Posts: 189
Since: 2004/11/2
#10

Re: [tutorial] XOOPS Theme Dev. COMPLETE!

niiice... it's much appreciated.
...


I hate Mortal Kombat