[Solved] How do I replace section headers with images?

[SusanN]

Hello!

I was wondering if someone could help me figure out how to replace the Section Headers with unique images.

Here is what it should look like:  http://tinyurl.com/mxp7h6

Here is what I have in the cms right now:  http://tinyurl.com/nlzho6

I'm not sure how to make it so each Section Header uses a different image.  Also, I'm not sure how to hide the actual menu text and just have the image show.  

I know I need to work on the positioning.  That's next up on my to-do list.  :)

[Deak]

Hi Suzanne,

Here's the nasty way (Fahrner Image Replacement technique):

span.sectionheader { display: none; }

And here's why it's nasty.

I'm not sure about assigning a background image to a navigation item, sorry.

[SusanN]

Thanks for your reply, Deak.  Unfortunately, when I use span.sectionheader {display:none;}, everything goes away - including the image.

[Dr.CSS]

2 ways to do it, both require changing the menu template...

1) The way it works now you will need to change the menu template to include a unique ID or class to the sectionheader call, that way when you use css to add the image you call it using the ID/class for unique images for each one...

2) You change the sectionheader to call the page image that you add when making the section header in the options tab...

[SusanN]

2 ways to do it, both require changing the menu template...

1) The way it works now you will need to change the menu template to include a unique ID or class to the sectionheader call, that way when you use css to add the image you call it using the ID/class for unique images for each one...

2) You change the sectionheader to call the page image that you add when making the section header in the options tab...

I would love to call the page image and tried that, but I didn't see how to make it work.  I went to Options > Image > and selected my image (right now, just the first one is done - Connect), but the image doesn't show up.  Is there something I need to do to the menu template to make it work?

This is the menu template I'm using:

Code: Select all

{* CSS classes used in this template:
#sidebar-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}

<ul id="sidebar-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
<li class="menuparent">
<a class="menuparent" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="sectionheader"><span class="sectionheader">{$node->menutext}</span>{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />{else}
<li>
<a {/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
><span class="sectionheader">{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
{/if}

[NaN]

Hey come on.
Open your eyes.
Just search for "sectionheader" and add the id attribute:

{* CSS classes used in this template:
#sidebar-nav - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}


{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='' times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string='' times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}

current == true}

haschildren == true}

type == 'sectionheader' and $node->haschildren == true}
alias}"[/b][/color]>alias}"[/b][/color]>{$node->menutext}{elseif $node->type == 'separator'}
{else}

type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}">{$node->menutext}
{elseif $node->type == 'sectionheader'}
>alias}"[/b][/color]>{$node->menutext}
{/if}
{/foreach}
{repeat string='' times=$node->depth-1}



{/if}

OR:

{* CSS classes used in this template:
#sidebar-nav - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}


{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='' times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string='' times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}

current == true}

haschildren == true}

type == 'sectionheader' and $node->haschildren == true}
image}" />{elseif $node->type == 'separator'}
{else}

type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}">{$node->menutext}
{elseif $node->type == 'sectionheader'}
>image}" />
{/if}
{/foreach}
{repeat string='' times=$node->depth-1}



{/if}

[Dr.CSS]

Using {page_image}...

http://mit-computers.com/index.php/how- ... types.html

[SusanN]

Many thanks to both of you.  Nan, your second example worked for me.  The first one still showed the text for the header.  I really appreciate your help on this.  I was looking at that section of the template, but I had no idea what to write to make it work.  I'm not the greatest with the smarty tags. 

[NaN]

I'm not the greatest with the smarty tags. 

Me too. But just be creative and play around.
If there is a menutext and we have $node->menutext there might be something similar for the content image
If you fail just use the {get_template_vars} tag to get all available template variables.
Or in this case - since the menu entries are stored in a variable of type "object" called $nodelist - {$nodelist|print_r}.
So you will see what is inside the $nodelist-Object and can be accessed by $node->... inside the foreach loop.

By the way the first example was refering to the first idea of Dr.CSS using the unique CSS ids.
You would need to adapt your stylesheet for each separator and define a background-image.

[Deak]

Bloody brilliant, I never even saw that... have some forum karma!

We need some well-written and easy to find tips and tricks articles for this kind of stuff.