X-Cart forums

[mekon]

Hi all, can anyone point me in the right direction for this..

I need to have a different background image for each menu item on the flyout menu.
Looking at the code there are no classes or ids I can use to do this. How can I set a different id to each li?

TIA

[mekon]

Found a way..

In /modules/flyout /fancy... /icons/fancy_subcategories.tpl

Find:

 <li{interline name=$loop_name} style="z-index: {$smarty.foreach.$loop_name.total|dec:$smarty.foreach.$loop_name.iteration|inc:1|inc:1001};">

And use the cat id to set a css id...eg:

id="prefix_{$catid}"

You will need to use a prefix as some browsers will not accept a css id that starts with a number.

 <li{interline name=$loop_name} id="prefix_{$catid}" style="z-index:  {$smarty.foreach.$loop_name.total|dec:$smarty.foreach.$loop_name.iteration|inc:1|inc:1001};">

[designguru]

Hi

I've found the line you are referring to but where do i define the ids for each category? I must define the colors somewhere in the CSS code but how?

[totaltec]

I'm sure you just reference the id in your CSS. After you make the change described above, you can add to any of your included style sheets, referencing #prefix_{$catid}

{$catid} is going to be replaced when the template is compiled, if your first category has a $catid of 101 and you want it to be blue, then in your CSS:
#prefix_101 {
background-color: blue;
}

Or something along those lines.

[mekon]

Correct, so the prefix I used is..menuli

id="menuli_259"in my css I have:

#menuli_259 {
background: url(../../skin/new/css/../images/custom/menu_li_brown.png) no-repeat transparent 0 0;
}

[designguru]

Great! Thank you guys so much!

What do I need to do if I want to display a little icon 'sale' i.e. after a category?

[totaltec]

Well you can always reference the specific categoryid and then insert a little code snippet containing the image. For instance:

{if $catid eq 101 or $catid eq 105}
  Sale! <img src"yourimage.png" />
{/if}

[designguru]

Originally Posted by totaltec

Well you can always reference the specific categoryid and then insert a little code snippet containing the image. For instance:

{if $catid eq 101 or $catid eq 105}
  Sale! <img src"yourimage.png" />
{/if}

Bg-Colors worked like a charm. But couldn't work out the thing with the image. I entered:

{if $catid eq $catid eq XXX}
Sale! <img src"yourimage.png" />
{/if}


into this file /common_files/modules/Flyout_Menus/Icons/fancy_subcategories.tpl

Of course I replaced XXX with the cat ID

[mekon]

Show us the HTML output

Are you sure the image url and name is correct?

[designguru]

Code inserted (/common_files/modules/Flyout_Menus/Icons/fancy_subcategories.tpl):

{if $catid eq 272}
Sale! <img src"yourimage.png" />
{/if}




This is the HTML output from this category:

<li id="prefix_272" style="z-index: 102;">
<a class="" href="http://www.xxx.com/Sale/">Sale <img width="40px" height="19px" sale.png"="" icons="" flyout_menus="" modules="" common_files="" skin="" www.xxx.com="" src"http:="">

</a>
</li>


xxx=real url


As you can see the image url in the output and some other things are not correct. I've no clue why this is as I implemented the code as you said. Or does this piece of code need to be at a very specific line within the template file? I also double-checked the URL in the code was typed in with http://www. when I copy paste the URL the image shows up in the browser.

Or does the icon have to be in the same folder? I guess it doesn't matter if I set a full URL.




I also added a second category to the CSS file. After deleting cache (cleanup.php) and deleting the browser cache the second category doesn't show the background color.



#prefix_272 {
background-color: #D6D6D6;
font-weight: bold;
}

#prefix_276 {
background-color: #CFCFCF;
font-weight: bold;
}