style flyout menu
 

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

Re: style flyout menu
 

Found a way..

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

Find:


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.

Re: style flyout menu
 

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?

Re: style flyout menu
 

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.

Re: style flyout menu
 

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;
}

Re: style flyout menu
 

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?

Re: style flyout menu
 

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

Re: style flyout menu
 

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

Re: style flyout menu
 

Show us the HTML output

Are you sure the image url and name is correct?

Re: style flyout menu
 

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;
}