Hello All,

I have begun exploring the wonderful world of XOOPS theme editing :) Everything was going great untill I wanted to add a top and bottom graphic to a block to make it look more professional. I then wanted to change the background color of the block inbetween those two graphics. I want all content to be shown inbewteen those two graphics. Also, where it says Main Menu in text with default settings, I would like that to be replaced by the top graphic completely. Here is the code from the admin panel of editing the block for main menu. The code I added is in bold.
======
<table cellspacing="0">
<tr>
<td><img src="<{$xoops_imageurl}>/themes/images/phpkaox/block_top.gif" alt="" align="left" /></td>
<td id="usermenu">
<a class="menuTop" href="<{$xoops_url}>/user.php"><{$block.lang_youraccount}></a>
<a href="<{$xoops_url}>/edituser.php"><{$block.lang_editaccount}></a>
<a href="<{$xoops_url}>/notifications.php"><{$block.lang_notifications}></a>
<a href="<{$xoops_url}>/user.php?op=logout"><{$block.lang_logout}></a>
<{if $block.new_messages > 0}>
<a class="highlight" href="<{$xoops_url}>/viewpmsg.php"><{$block.lang_inbox}> (<span style="color:#ff0000; font-weight: bold;"><{$block.new_messages}></span>)</a>
<{else}>
<a href="<{$xoops_url}>/viewpmsg.php"><{$block.lang_inbox}></a>
<{/if}>

<{if $xoops_isadmin}>
<a href="<{$xoops_url}>/admin.php"><{$block.lang_adminmenu}></a>
<{/if}>
</td>
</tr>
</table>

============================
I am assuming this is wrong since when I press view, nothing happens and it reloads the page. It is using css from looks of it by the "<td id="usermenu">
<a class="menuTop" "
commands, but I am not sure which css file it is using. Maybe I need to edit the .css files associated with blocks to get it to work correctly? Please help! Oh, one other thing, I want the width of the main menu to only be as wide as the image itself. Here is a picture of what I am trying to make it look like:

EDIT:
After thinking this over, I decided this is not the best way to go about this. Have the image constrict how wide the menu would be is not smart. If you take a look at gooberhead.net she has it with two corner images and a middle background that can have text on it. I want to know how to do that.

no one can help me out here?

Actually you don't want to hardcode any images in the template for this, theme will do

First create a copy of the default theme folder, copy any images you want to use to that folder... then open styles.css, find td#mainmenu and add something like "background-image: url(coolbg.gif); background-repeat: no-repeat; background-attachment: fixed;" inside it's {}. You can do that with any theme, content class or item you want. If you want to style something that doesn't have a handy id or class, add it to the corresponding template.

Happy XOOPSing!

Edit: forgot about width, you can also add "width: 150px;" or something like that to td#mainmenu.

okay, Im getting a tad bit frustrated... so heres the code from the page:
==========================================

<td class="blockTitle">&nbsp;Main Menu</td>
</tr>

<tr>
<td class="blockContent"><table cellspacing="0">
<tr>
<td id="mainmenu">
<a class="menuTop" href="http://localhost/shaxs/xoop/">Home</a>
<!-- start module menu loop -->
<a class="menuMain" href="http://localhost/shaxs/xoop/modules/sections/">Sections</a>
<a class="menuMain" href="http://localhost/shaxs/xoop/modules/phpcollab/">PhpCollab</a>

<a class="menuMain" href="http://localhost/shaxs/xoop/modules/wfsection/">wfsection</a>
<a class="menuMain" href="http://localhost/shaxs/xoop/modules/formulaire/">Form</a>
<a class="menuMain" href="http://localhost/shaxs/xoop/modules/wfchannel/">WF-Channel</a>
<a class="menuMain" href="http://localhost/shaxs/xoop/modules/xoopsmembers/">Members</a>
<a class="menuMain" href="http://localhost/shaxs/xoop/modules/news/">News</a>
<a class="menuMain" href="http://localhost/shaxs/xoop/modules/agendax/">Agenda-X</a>

<!-- end module menu loop -->
</td>

===============================================
So, I am assuming I need to change the class in the css file that the bolded part refers to, so blocktitle. Correct? I found this in my css:

.blockTitle {background-color: #E2DBD3; color: #666600; padding: 2px; font-weight: bold}

Now is that the proper code I need to edit? I tried to enter it, but it didnt work. I had it like this:

.blockTitle {background-image: url(tdmainbg.gif); background-repeat: no-repeat; background-attachment: fixed; color: #666600; padding: 2px; font-weight: bold}

That didnt work. So I tried changing it to url(/images/tdmainbg.gif) and url(images/tdmainbg.gif) since the image is in a sub directory called images. Here is the hiearchry or my files:

style.css
stylemac.scc
stylenn.css
Folder images
--- tgmainbg.gif in this folder

What the heck am I doing wrong?

Okay, I want the XOOPS community to know that I am a collosal moron and should never be listened to again (okay maybe not, but I am stupid). I use Firefox to view everything and I was editing and i wasnt editing stylenn.css. So yes me = moron. I did have to delete background-repeat: no-repeat; background-attachment: fixed; to get the picture to show up.

Now lets say in the .blocktitle I wanted two images to show up with a colored background between them like at gooberhead.net. She has two corner peices and a colored background between the two. So lets see me do soem asci art ahha: D = Picture C =colored background

|=========================|
|D CCCCCCCCCCCCCCCCCCCCCC D|
|=========================|

I'd visithttp://www.xoops-themes.org/, choose a theme that has this kind of trick (anything 'round' should do), download and copy learn from there

Wow, I just found the themes section and there are tons! WOW!

i'm having a similar issue, but i'm not sure what the answer is.

I want to make the whole left block area into one column, with a top and bottom image to finish the column off. So, any left blocks would be inside the column and the top and bottom image would be added to the ends. The problem is, i'm not sure how to achieve this.... I can do a repeating background for the blocks, no problem, but when I try to add a top image, the whole left column is pushed into the middle of the page.
This is a section from theme.html:
Quote:

And I have a new class in my style.css:
Quote:

But how do I get everything to line up?