Image background on Browse Page

[dvanhoose52 +]

I have 68C Designer and Templatecodes neo ocean and could use some advice. I am building a virtual bulletin board and would like to place a cork board image behind the browse page so that the category pics look like flyers over the board. I tried working with the default/categories/browse.tpl file with no avail.
I am learning quickly reading through the forums of how things work but have only had it a week.
Thanks for any advice
Dennis
Designer 4.1.9
Templatecodes v2.2
Virtual Bulletin Boards

[seymourjames +]

Try this

Copy the categories folder from the default template into the Neo style template folder. Then open the css style sheet for the neo template and create an identifier called cork with your background image defined.

Something like

#cork {
background:#fff url(../images/corkboard.gif) no-repeat;
height:Xpx;
}

You may need to play around a bit with the positioning and size. Lookup a css style guide on how to do that with background images.

Then in the browse.tpl file (the one your copied into the neo folder) place the <div id="cork"> and </div> tags around the main table. The image should then fall underneath all the links/icons

[dvanhoose52 +]

I tried your procedure but still don't work. The steps I took are,
Copied default template to templates/Neo2-ocean/,
edit Neo2-ocean/css/style.css Save to same
edit Neo2-ocean/default/categories/browse.tpl Save to Neo2-ocean/categories/browse.tpl
And copy to Neo2-ocean/default/categories/browse.tpl .
Still nothing.
here is a section of the 2 files

Browse.tpl...............

<table class="main" width="100%">
<tr>
<th bgcolor="#fffffF">{$smarty.const.LANG_BROWSE_CATEG ORY}</th>
</tr>
<tr>
<td>

<div id="cork"><table width="100%">
{section name=tr loop=$data step=$cols}
<tr>
{section name=td start=$smarty.section.tr.index loop=$smarty.section.tr.index+$cols}



And the style.css file.......................

p {
margin:.4em 0 .8em 0;
padding:0;
}

/* Header styles */

#cork {
background:#fff url(../images/corkboard.jpg) no-repeat;

}

#header {
clear:both;
float:left;
width:100%;
height:100px;
}
#header p,
#header h1,
#header h2 {

I tried moving it to different places in the file but no luck.

Any ideas??

[seymourjames +]

So you have made a copy of the default categories folder in the ocean template folder?

You then put your image in the images folder of the orcean template?

You then created the css in the style sheet for the ocean template?

If you have done this just to make sure everything is ok., put this somewhere in your browse.topl file in the ocean template folder

<div id="cork"></div>

This should just put the image up where ever you have put it in the browse.tpl file.

[seymourjames +]

I see what you may be doing wrong if you have done what you literally have written. There is no default folder in the Neo templates. You should not have this Neo3-Ocean/default/ .

You simply copy the categories folder and all its contents (from the default template folder) directly into the Neo template folder. You should only have this

Neo3-Ocean/categories/*.*

or the long way

make a directory called categories in the Neo3-Ocean template folder. It will be empty at this point.
Then copy the contents of default/categories/*.* into Neo3-Ocean/categories/ *.*

The rest seems to be fine.

[dvanhoose52 +]

I can get it to show above but can't seem to find the sweet spot to put it under. Here is the latest spot.

<style type="text/css">

</style>{*$Revision: 165 $*}
{modulehook function="tpl_category_head" options=""}

{include file="categories/breadcrumb.tpl"}

{$promo}

{if $showsubcat}

<table class="main" width="100%"><div id="cork">
<tr>
<th bgcolor="#fffffF">{$smarty.const.LANG_BROWSE_CATEG ORY}</th>
</tr></div>
<tr>


<table width="100%">

{section name=tr loop=$data step=$cols}
<tr>
{section name=td start=$smarty.section.tr.index loop=$smarty.section.tr.index+$cols}
<td valign="top" bgcolor="#FFFFFF">
{if $data[td]<>""}
{$data[td].start_link}<img src="{$data[td].image}" border="0" alt="{$data[td].name}" /></a> 
{$data[td].start_link}<strong>{$data[td].name}</strong></a>
{if $data[td].total <> ''}
({$data[td].total})
{/if}
<br />
<!--{$data[td].subcats}-->
{$data[td].description}
{/if}
 
</td></div>
<td>
{/section}
</tr>
{/section}
</table>

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

<br />
{/if}

{if $custom <> ''}
{include file=$custom}
{elseif $showlistings=="Y" && $sTemplate==1}
{include file="showlistings.tpl"}
{elseif $showlistings=="Y" && $sTemplate==2}
{include file="showlistings2.tpl"}
{/if}

{modulehook function="tpl_category_footer" options=""}

[seymourjames +]

Have you tried putting <div id="cork"> just under the {$promo} and the </div> just before {if $custom <> ''}. Also do you have sufficient height in the css tag for that identifier. I am not immediately seeing why this would not work.

[dvanhoose52 +]

Looks like it's in the right place now. But the categories are covering most of it. Is there a way to make them transparent?
Virtual Bulletin Boards

[Mike-N-Tosh +]

Originally Posted by dvanhoose52

Looks like it's in the right place now. But the categories are covering most of it. Is there a way to make them transparent?
Virtual Bulletin Boards

It appears that your browse.tpl file has been modified from the original, because the table elements have a background defined as #FFFFFF which is white and that is not defined in the default template. just remove that and it should work.

[seymourjames +]

Good point Mike. Well done - too late here. The table in the style sheet for the template has a back-ground color set to white (can't remember why - it may be a hangover from a previous template series). I was about to suggest defining some new css for tables and the table data, then apply them to browse.tpl.


table, table.main {
border:none;
background-color:#FFFFFF; (remove this)
border-collapse:collapse;
}


Just tested and this works but you will probably want to change the color of your category links. A good thing to do is get a copy of the free web developer add-on for Firefox. You can then use the outline tool to quickly identify what css needs changing.