| ||||||||||
Shopping cart software Solutions for online shops and malls | ||||||||||
|
X-Cart Home | FAQ | Forum rules | Calendar | User manuals | Login |
style flyout menu | ||||
|
|
Thread Tools | Search this Thread |
#1
|
|||||||
|
|||||||
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
__________________
------------------------------------------------ Darren |
|||||||
#2
|
|||||||
|
|||||||
Re: style flyout menu
Found a way..
In /modules/flyout /fancy... /icons/fancy_subcategories.tpl Find: Code:
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. Code:
__________________
------------------------------------------------ Darren |
|||||||
#3
|
|||||||
|
|||||||
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?
__________________
X-Cart Pro 4.6.2 with many modules X-CART Pro 4.4.1 |
|||||||
#4
|
|||||||||
|
|||||||||
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.
__________________
Mike White - Now Accepting new clients and projects! Work with the best, get a US based development team for just $125 an hour. Call 1-502-773-6454, email mike at babymonkeystudios.com, or skype b8bym0nkey XcartGuru X-cart Tutorials | X-cart 5 Tutorials Check out the responsive template for X-cart. |
|||||||||
|
#5
|
|||||||
|
|||||||
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; }
__________________
------------------------------------------------ Darren |
|||||||
|
#6
|
|||||||
|
|||||||
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?
__________________
X-Cart Pro 4.6.2 with many modules X-CART Pro 4.4.1 |
|||||||
#7
|
|||||||||
|
|||||||||
Re: style flyout menu
Well you can always reference the specific categoryid and then insert a little code snippet containing the image. For instance:
Code:
__________________
Mike White - Now Accepting new clients and projects! Work with the best, get a US based development team for just $125 an hour. Call 1-502-773-6454, email mike at babymonkeystudios.com, or skype b8bym0nkey XcartGuru X-cart Tutorials | X-cart 5 Tutorials Check out the responsive template for X-cart. |
|||||||||
#8
|
|||||||
|
|||||||
Re: style flyout menu
Quote:
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
__________________
X-Cart Pro 4.6.2 with many modules X-CART Pro 4.4.1 |
|||||||
#9
|
|||||||
|
|||||||
Re: style flyout menu
Show us the HTML output
Are you sure the image url and name is correct?
__________________
------------------------------------------------ Darren |
|||||||
#10
|
|||||||
|
|||||||
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; }
__________________
X-Cart Pro 4.6.2 with many modules X-CART Pro 4.4.1 |
|||||||
|
|||
X-Cart forums © 2001-2020
|