WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: Flogag on April 06, 2009, 10:14:53 PM
-
Hi there,
any idears? I want to show a very small logo inside the menu (<ul><li><image></li><li>normal text</li></ul>).
The Problem is that i have to integrate the image into the menu list tag.
Thank you for any input. :mrgreen:
-
Hi,
here you can find an example https://forum.WebsiteBaker.org/index.php/topic,13184.0/topicseen.html (https://forum.WebsiteBaker.org/index.php/topic,13184.0/topicseen.html).
hth
Uwe
-
wow, thats nice.
can we download this template or is there a other template where pics has the background from the buttons?
I want to make some new templates for WebsiteBaker so men can download it here.
But want to see examples on a working template so i understand the code right.
I am more a designer than a scripting girl.
thanks
-
Hi there,
any idears? I want to show a very small logo inside the menu (<ul><li><image></li><li>normal text</li></ul>).
The Problem is that i have to integrate the image into the menu list tag.
Thank you for any input. :mrgreen:
Give the menu LI a background image in your CSS file. There are lots of instructions about that on the web.
-
Oke, wel i have build my menu with images, looks fine and works but there is 1 thing i don't understand.
Visit the test page www.webcentre.nl/kaagloop
1) buttons are yellow, clik on Parcours, the button wil be blue, after youre click, Parcours button wil be grey, the submenu is open, this is green, when u click on kidsloop parcours (or other button from this submenu) parcours is back in yellow again, but what i want, when i be in the submenu, the button above must grey, so parcour must be grey and not back to yellow, i hope some one het help this blonde.
Thanks
this is the css
/* Main menu BEGIN */
div.mainmenu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
div.mainmenu li {
list-style: none;
margin-left: 0px;
padding-top: 0px;
}
div.mainmenu ul li a.menu_current:link, div.mainmenu ul li a.menu_current:visited {
background-position: 0px -54px;
color: #000000;
background-color: #eeeeee;
}
div.mainmenu ul li a:link, div.mainmenu ul li a:visited {
display: block;
color: #ffffff;
font-size: 12px;
font-weight: bold;
background: #eeeeee url(./images/geel.jpg);
background-repeat: no-repeat;
width: 100%;
text-indent: 27px;
text-decoration: none;
line-height: 25px;
height: 25px;
margin-bottom: 2px;
}
div.mainmenu ul li a:hover {
background-position: 0px -27px;
color: #333333;
background: #eeeeee url(./images/blue.jpg);
}
div.mainmenu ul ul a:link, div.mainmenu ul ul a:visited {
font-size: 12px;
color: #000000;
font-size: 11px;
text-indent: 10px;
background: #eeeeee url(./images/green.jpg);
width: 147px;
line-height: 18px;
height: 18px;
margin-left: 4px;
margin-bottom: 0px;
padding-right: 5px;
}
div.mainmenu ul ul li a.menu_current {
font-size: 13px;
text-align: right;
background: #eeeeee url(./images/rose.jpg);
}
div.mainmenu ul ul li a.menu_default {
font-size: 12px;
}
div.mainmenu ul ul li a.menu_default:hover {
font-size: 12px;
text-decoration: underline;
background: #eeeeee url(./images/orange.jpg);
}
div.mainmenu ul ul li a.menu_current:hover {
font-size: 13px;
text-align: right;
text-decoration: underline;
}
-
The way this menu is build has to be adjusted. Can you also tell the call of show_menu please?
regards
Michael
-
Hi Micheal
Yes, you mean this?
<?php if(SHOW_MENU) ?>
<div class="mainmenu"><?php page_menu(0, 1, '<li>[a][menu_title][/a]</li>'); ?></div>
I have all my files zipped, you can download it, and maybe its works as template also, not testit. www.webcentre.nl/kaagloop/sandra_deeno.zip (http://www.webcentre.nl/kaagloop/sandra_deeno.zip)
U know what i mean?
Thanks for support.
-
Use the following code to build the menu instead:
<div class="mainmenu"><?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_TRIM | SM2_PRETTY); ?></div>
Then you have to adjust your css-file: The currently selected item gets the class menu-current and the parent of a selected item (Parcours in your example) gets the class menu-parent. Use these classes to set the desired color.
regards
Michael
-
mmm sorry i don't understand it,
oke i can change the menu to menu2 string, but what must i change in de css. i work with images, everything works fine, only the buttons must have is own color/pic when i click on one of the subbuttons from this mainbutton, let me know
thanks
-
The names of the classes are a little bit confusing. ;) Before it was menu_current, now it is menu-current. Try if this css-code works:
/* Main menu BEGIN */
div.mainmenu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
div.mainmenu li {
list-style: none;
margin-left: 0px;
padding-top: 0px;
}
div.mainmenu ul li.menu-current a:link, div.mainmenu ul li.menu-current a:visited, div.mainmenu ul li.menu-parent a:link, div.mainmenu ul li.menu-parent a:visited {
background-position: 0px -54px;
color: #000000;
background: #eeeeee url(./images/blue.jpg);
}
div.mainmenu ul li a:link, div.mainmenu ul li a:visited {
display: block;
color: #000000;
font-size: 12px;
font-weight: bold;
background: #eeeeee url(./images/geel.jpg);
background-repeat: no-repeat;
width: 100%;
text-indent: 27px;
text-decoration: none;
line-height: 25px;
height: 25px;
margin-bottom: 2px;
}
div.mainmenu ul li a:hover {
background-position: 0px -27px;
color: #333333;
background: #eeeeee url(./images/blue.jpg);
}
div.mainmenu ul li.menu-expand ul a:link, div.mainmenu ul li.menu-expand ul a:visited {
font-size: 12px;
color: #000000;
font-size: 11px;
text-indent: 10px;
background: #eeeeee url(./images/green.jpg);
width: 147px;
line-height: 18px;
height: 18px;
margin-left: 4px;
margin-bottom: 0px;
padding-right: 5px;
}
div.mainmenu ul li.menu-expand ul li.menu-current a:link, div.mainmenu ul li.menu-expand ul li.menu-current a:visited {
font-size: 13px;
text-align: right;
background: #eeeeee url(./images/ROSE.jpg);
}
div.mainmenu ul li.menu-expand ul li a {
font-size: 12px;
}
div.mainmenu ul li.menu-expand ul li a:hover {
font-size: 12px;
text-decoration: underline;
background: #eeeeee url(./images/blue.jpg);
}
div.mainmenu ul li.menu-expand ul li.menu-current a:hover {
font-size: 13px;
text-align: right;
text-decoration: underline;
}
/* Main menu END */
regards
Michael
-
The names of the classes are a little bit confusing. ;) Before it was menu_current, now it is menu-current.
That's right, but you can "teach" sm2 to still return menu_current. :-)
The code is like:
$aItemOpen = '<li [if(class==menu-current) {class="menu-current"}]>[a][menu_title]</a>',
(with some adjustment to your current needs)
Regards,
Stefek
-
wel everybody very thanks.
its works, so now i understand it, and can build my template.
When it finish i let u know.
thanks
x sunny
-
Use the following code to build the menu instead:
Code:
<div class="mainmenu"><?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_TRIM | SM2_PRETTY); ?></div>
Then you have to adjust your css-file: The currently selected item gets the class menu-current and the parent of a selected item (Parcours in your example) gets the class menu-parent. Use these classes to set the desired color.
Spamlink removed