Hello,
First sorry for my bad english.
I made a custom menu in menu.tpl with this code:
<div class="s_menu_group">
<h3>Section 1</h3>
<ul class="s_list_1 clearfix">
<li><a href="link1">Item 1</a></li>
<li><a href="link2">Item 2</a></li>
</ul>
</div>
<div class="s_menu_group">
<h3>Section 2</h3>
<ul class="s_list_1 clearfix">
<li><a href="link1">Item 1</a></li>
<li><a href="link2">Item 2</a></li>
</ul>
</div>
I want to add pictures to this dropdown menu. See the attached example file.
How can I do this? Please send me an example code for this. Is it possible?
Thanks,
Szilard
|
|
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums!
|
|
Thanks for your answer. It’s works, but when I set background images for the left area of menu, the other area will transparent. So, the menu items background will be transparent. I want to set this white as original menu.
|
|
OK. Find the problem:
#menu_ID > .s_submenu {
padding-left: 150px; /* image width */
background: white url(IMAGE_URL) no-repeat center left;
}
This works. Thanks again.
|
|
Our bad…
We totally forgot the background color property
Best,
ThemeBurn team
|
|
Hi
Im trying to test this out on my site, however im not able to get anything showing up.
What is the unique id for each menu, how do i find this out, how do i specify the menu in the code that the image is going to be on.
thank you
|
|
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums!
|
|
Thank you for excellent support, this works perfectly
The only issue is that the menu is now far too long, can the white spaces be made smaller
thank you
|
|
Thanks again the help.
Here is the result: http://www.ajandek24.hu
Thanks,
Szilard
|
|
@Szilard
How did you make your menu sit right under your top level categories ?
thank you
|
|
They are top levels category too, but changed colors in css.
|
|
This is the css extras in Extensions/Modules/Shoppica2/design/styles
#green_button > a {
background: #7db122 url(catalog/view/theme/shoppica2/images/green_button.png) no-repeat top right !important;
color: #fff !important;
}
#green_button > a:hover {
background-color: #90c03b !important;
}
/* normal state */
#menu_arkereso > a {
background-color: #ffffff !important;
color: #4daec6 !important;
}
/* hover state */
#menu_arkereso > a:hover {
background-color: #4daec6 !important;
color: #ffffff !important;
}
/* normal state */
#menu_termekajanlo > a {
background-color: #ffffff !important;
color: #4daec6 !important;
}
/* hover state */
#menu_termekajanlo > a:hover {
background-color: #4daec6 !important;
color: #ffffff !important;
}
#menu_fenykepes_naptarak > .s_submenu {
padding-left: 170px;
background: white url(image/data/ajandek24/naptar_menu.jpg) no-repeat center left;
}
#menu_egyedi_ajandekok > .s_submenu {
padding-left: 195px;
background: white url(image/data/ajandek24/ajandekok_menu.jpg) no-repeat center left;
}
#menu_kepeslapok_meghivok > .s_submenu {
padding-left: 205px;
background: white url(image/data/ajandek24/kepeslap_menu.jpg) no-repeat center left;
}
#menu_fotokidolgozas > .s_submenu {
padding-left: 130px;
background: white url(image/data/ajandek24/fotokidolgozas_menu.jpg) no-repeat center left;
}
|
|
@szilard
Thank you, its now looking better, and the menu issue has been fixed, thanks again to the excellent support from TB
|
|
@Nextprint
@tightsboutique
Nice menu customization for both The result is looking really nice
Best,
ThemeBurn team
|
|