Part 3 - CodingIn 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 BasicsEvery 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}>" />
<!-- RMV: added 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 HeaderYou 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 ANYMORETodays 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-family: Verdana;
color: #BBB;
background-color: #383838;
margin: 0;
padding: 0;
font-size: 10px;
}
hr {
color: #BBB;
height:1px;
}
a {
color: #777;
text-decoration: none;
font-weight: bold;
background-color: transparent;
}
a:hover {
color: #BBBBBB;
}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul {
margin: 0px;
padding: 0px;
list-style: square inside;
text-align: left;
color: #BBB;
line-height: 18px;
}
li {font-family: Verdana;
color: #BBB;
}
li a{font-family: Verdana;
font-size: 9px;
}
textarea, select, input {
font-family: Verdana;
background-color: #383838;
color: #BBB;
font-size: 9px;
border-top: 1px solid #000000;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #000000;
border-bottom: 1px solid #FFFFFF;
margin-top: 1px;
}
textarea {
width: 100%;
overflow: auto;
}
textarea:hover, input:hover {
font-family: Verdana;
background-color: #BBB;
color: #000;
font-size: 9px;
border-top: 1px solid #000000;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #000000;
border-bottom: 1px solid #FFFFFF;
margin-top: 1px;
}
table {
width: 100%;
}
TR, TD {
font-family: Verdana, Tahoma, Arial;
font-size: 9px;
color: #BBB;
padding: 0px; vertical-align: top;
}
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 TogetherUsing 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;
width: 80%;
height: 20px;
text-align: center;
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 {
width: 140px;
font-size:9px;
background-color: transparent;
padding-right: 5px;
}
td#leftcolumn div.blockTitle {
font-family: halflife;
font-size: 12px;
color: #FF9436;
text-align:right;
font-weight: bold;
background-color: #383838;
padding-right: 2px;
border-bottom: 1px outset #FF9436;
}
td#leftcolumn div.blockContent {
width: 100%;
background-color: #383838;
color: #BBB;
padding-top: 2px;
padding-bottom: 4px;
}
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!