1
ccczone
Slicing images
  • 2006/9/21 13:17

  • ccczone

  • Just popping in

  • Posts: 13

  • Since: 2006/3/20


I have read all the tutorials i could find on creating a theme from scratch. But i'm still unsure how to create one with sliced images. Normally, when i create a site with sliced images, it's in Dreamweaver. So it's fairly easy for me.

What i am working on is a site for a group of people. I have created the entire design in Illustrator, then sliced it up in Photoshop like normal. It's going to be a three column layout like most themes.

But what i'm unsure of is, when creating my theme, the grpahics i have running down the side of the page, should they be the brackground of the main table or the background on the left and right blocks?

Is there a book or an exstensive tutorial that shows step by step how to create themes in different layouts? This is something i'm more then happy to pay for.

Once i get the stuff uploaded today, i'll post a link of the uncut image as well as what i have currently. Sorry i couldn't get itup right now.

2
Will_H
Re: Slicing images
  • 2006/9/21 13:32

  • Will_H

  • Friend of XOOPS

  • Posts: 1786

  • Since: 2004/10/10


bg of the main table.

Borders can be tricky, things like <tr> can really drive ya nuts.

The easiest way to see the code more clearly is to break it up and use <{include}> to pull it into theme.html.

doing thiis with header and footer alone will make the theme file less overwhelming.

3
ccczone
Re: Slicing images
  • 2006/9/21 20:06

  • ccczone

  • Just popping in

  • Posts: 13

  • Since: 2006/3/20


I'm getting really frustrated over here. I have taken the default theme. And for some ungodly know reason, it can't get it to display the images. There is no banner ad on this site or one logo. Just one large banner on the top.

Here is the image i'm trying slice to use for the theme for the site...
http://i27.photobucket.com/albums/c187/rrice05/complete.jpg

If need be, i'll pay someone to turn this image into a theme. I have moded a few themes before and never had this amount of trouble.

Anyone willing to help me turn this into a working theme?

4
Bassman
Re: Slicing images
  • 2006/9/21 21:53

  • Bassman

  • Friend of XOOPS

  • Posts: 1272

  • Since: 2003/5/23


OK here's a few tips: First of all, just slicing your image in Dreamweaver won't work in the traditional sense. Best way to do it is to edit a theme so it looks like what you want.

First of all, since you're making a fixed width theme, everything between <html> and </html> should be in a div. Call the div whatever you like, and set the width in style.css (I assume you know how to do this). Take a section of your image that's full width and high enough that when it repeats it looks like your image but without the columns or header showing (ie just high enough to show one of the stars at left, with half the space in between above but not below the star).
Then you can put your header image into a table at the top (just change what's in the theme to suit) but don't forget that images need to be called as below:
Quote:

<img src="<{$xoops_imageurl}>logo.jpg" width="765" height="60" border="0">


If you get stuck, let me know. I can make it into a theme for a small fee.

5
ccczone
Re: Slicing images
  • 2006/9/22 1:44

  • ccczone

  • Just popping in

  • Posts: 13

  • Since: 2006/3/20


Bassman,
Thank you. I just may take you up on that offer. It took all day to get what i got, and i even modified the graphics some what. But it's still not working right.

Here's another question, isn't it possible in the theme, to just use the normal html img src= tag? I tried it a few times in a table, but the image wouldn't show up.

Reason im asking is, the image of where the user can click to find their local chapters, was going to be an image map. The whole image being clickable. But calling it via the XOOPS code, i don't see how to do that.

this is what i was able to pull together so far. But it doesn't look right. especially without the stars.

http://www.payd.checkmywebpage.com/

6
Bassman
Re: Slicing images
  • 2006/9/22 2:27

  • Bassman

  • Friend of XOOPS

  • Posts: 1272

  • Since: 2003/5/23


no, you have to use <img src="<{$xoops_imageurl}> or it won't work. If you do this, it will look for images in the theme's root folder.

If you want to see an image map in a XOOPS theme, download musical notes from my site and take a look. I did the map in that with Dreamweaver.

7
Will_H
Re: Slicing images
  • 2006/9/22 2:54

  • Will_H

  • Friend of XOOPS

  • Posts: 1786

  • Since: 2004/10/10


One thing I have found to be very useful in theme'n is get the template looking right before you try to add in XOOPS codes.


When you export a sliced template that html is good to go, your job is to try and fit the XOOPS codes in as nicely as possible.

Ultimately it takes practice.

Like for example your border issues.

Try to view it this way.

When you define a table

Quote:
<body>
<table width="100%" cellspacing="2">


This is your main table. every table tag you open from this point on will lie inside of this table. So if you were trying to create a leftborder it would be in this main table. Well before you would create or open the table that would contain your XOOPS codes.

Also, anytime you define images in the actual html it can get tricky. <tr> tags out of place can whack out the whole thing. Heres an example of a simple spanning left border.

Quote:
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="-1">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr valign="top">
<td width="10" valign="top" background="<{$xoops_imageurl}>images/leftBG.gif"><img src="<{$xoops_imageurl}>images/leftBG.gif" width="20" height="2" border="0"></td>
<td width="165" background="<{$xoops_imageurl}>images/mainBG.gif" valign="top">
<!-- Start left blocks loop -->
<{foreach item=block from=$xoops_lblocks}>
<{include file="theme/theme_blockleft.html"}>
<{/foreach}>
<!-- End left blocks loop -->
</td>


that <tr> tag does not get closed until just before the footer, where I want the images to sync up.

8
ccczone
Re: Slicing images
  • 2006/9/22 13:35

  • ccczone

  • Just popping in

  • Posts: 13

  • Since: 2006/3/20


Thanks for all the help. I got the main banner to work right. But now i'm having issues slicing the sides to make everything even.Especially the right side. BEcause of the blue boxes over the red background.

I was able to get the left side up, but i'm having issues lining it up with the banner.

Looking at all the themes i have looked at, it's hard to see how things are really done. I mean by making a standard html page, i can put theimages in where i want them,etc. But in the theme.html file, all you really see is code. You don't see how images are sliced, or how closely they are aligned, etc. The stuff i'm really having issues with.

I've made simple modifications to themes for a few sites i did. But this is something a lot different, because i have to make it from scratch.

I found a document titled, the Anatomy of the Default Theme. Printed all 29 pages. I'm reading through it, i's helping me understand the basics. But i'm not seeming to get anywahere.

Let me ask this, Left side column: The main menu needs to go inside the red block on the left. Do i make the entire left side column in the theme with this background or would i just enter this into the css file as the td#mainmenu background? This leads me using the a table on the far left with the stars as the background image. Making the left column not line up with anything.

9
Will_H
Re: Slicing images
  • 2006/9/22 13:54

  • Will_H

  • Friend of XOOPS

  • Posts: 1786

  • Since: 2004/10/10


Yuu have to view the leftcoulmn as its own entity.

Remember when i said that the main <table> gets defined and everything else lies within it until it is closed.


I then gave you this example:

Quote:
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="-1">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr valign="top">
<td width="10" valign="top" background="<{$xoops_imageurl}>images/leftBG.gif"><img src="<{$xoops_imageurl}>images/leftBG.gif" width="20" height="2" border="0"></td>
<td width="165" background="<{$xoops_imageurl}>images/mainBG.gif" valign="top">
<!-- Start left blocks loop -->
<{foreach item=block from=$xoops_lblocks}>
<{include file="theme/theme_blockleft.html"}>
<{/foreach}>
<!-- End left blocks loop -->
</td>


Lets discuss what exactly you would see in theme_blockleft.html.

Quote:
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="64" valign="middle" style="background-image: url(<{$xoops_imageurl}>images/bt.gif)">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="bottom"><font class=content><b><{$block.title}></b></font></td>
</tr>
</table></td>
</tr>
<td width="200" style="background-image: url(<{$xoops_imageurl}>images/bm.gif)">

<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td align="left"><font class="content"><{$block.content}></font></td>
</tr>
</table></td>
<tr>
<td height="47"><img src="<{$xoops_imageurl}>images/bb.gif" border="0" alt="" width="200" height="47"></td>
</tr>
</table>
<br>




You can see that this is broken down into a couple differnet tables. Each table is a row of the ;eftblock frame. Essentially you slice the top, and define it from left to right. then in the next table you define the "row" just under the top.

So by now you should understand what I mean by tables, that are in tables.

Then in your css file you would nav to your td#leftcolumn lines and adjust acoordingly.

10
ccczone
Re: Slicing images
  • 2006/9/22 14:24

  • ccczone

  • Just popping in

  • Posts: 13

  • Since: 2006/3/20


Okay. SO what then goes into the main table in theme.html file then? Sorry for being hard headed, but i have built many static sites. nothing this complicated. So i am having troubles understanding all of this. But i need to and want to learn it.

What graphics would i put in the theme.html? Other then the logo.

here is the layout i just redid in dreamweaver to get re-started. From here i can enter the XOOPS code where needed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<
html>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
title>Untitled Document</title>
</
head>
<
center>
<
body>

<
table width="100%" height="544"  border="0" cellpadding="0" cellspacing="0">
  <
tr>
    <
td height="544" valign="top"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <
tr>
    <
td><img src="images/logo.gif" width="885" height="148"></td>
  </
tr>
</
table>
<
table width="885" height="392"  border="0" cellpadding="0" cellspacing="0">
  <
tr>
    <
td width="231" height="388" valign="top" background="images/left.gif">&nbsp;</td>
    <
td width="410" valign="top"><table width="100%" height="389"  border="0" cellpadding="0" cellspacing="0">
  <
tr>
    <
td>
     <!-- 
Display center blocks if any -->
        <{if 
$xoops_showcblock == 1}>
         <!-- 
Start center-center blocks loop -->
            <{foreach 
item=block from=$xoops_ccblocks}>
              <{include 
file="default/theme_blockcenter_c.html"}>
            <{/foreach}>
            <!-- 
End center-center blocks loop -->
    </
td>
  </
tr>
  <
tr>
    <
td><table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <
tr>
        <
td width="63%" height="95"><!-- Start center-left blocks loop -->
              <{foreach 
item=block from=$xoops_clblocks}>
                <{include 
file="default/theme_blockcenter_l.html"}>
              <{/foreach}>
            <!-- 
End center-left blocks loop --></td>
        <
td width="37%"><!-- Start center-right blocks loop -->
              <{foreach 
item=block from=$xoops_crblocks}>
                <{include 
file="default/theme_blockcenter_r.html"}>
              <{/foreach}>
            <!-- 
End center-right blocks loop --></td>
      </
tr>
    </
table></td>
  </
tr>
  <
tr>
    <
td height="171">&nbsp;</td>
  </
tr>
</
table>
</
td>
    <
td width="248" align="left" valign="top" background="images/right_boxs.gif">&nbsp;</td>
  </
tr>
</
table>





</
td>
  </
tr>
</
table>


</
body>

</
center>
</
html>


If it take the default theme file, i have a layout with nothing but XOOPS code showing. THis is where i'm getting lost. Because im not sure what goes where in what file.
I'm reading what your posting, but i'm not seeing the fit.

so this is what i am doing, please tell me wher ei'm going wrong...

step 1:
create table. inside i put the logo.

step 2:
create table under the logo table. Inside i then create a table with 3 columns. In the left column i put my images for the left side as the background. In the right column, i put my images for the right side as the background.

step 3:
In the center column i add a table. inside this table i put a nother table with 3 rows. In the upper row iput the code for the center-center blocks. in the second row, i add a table with 2 columns. these are for the center left and center right blocks. in the 3rd row i put the code for the module contents. And thenit throws the entire right side off and out of alignment.

So i know i'm messing up somewhere but where, i don't know.

Login

Who's Online

163 user(s) are online (104 user(s) are browsing Support Forums)


Members: 0


Guests: 163


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits