WebsiteBaker Community Forum

WebsiteBaker Support (2.11.x) => Modules => Topic started by: rumen on March 16, 2018, 11:29:00 AM

Title: Menu question and suggestion
Post by: rumen on March 16, 2018, 11:29:00 AM
I would like to ask about the menus where there is an image or icon. Like this one:

(https://image.ibb.co/h1ZyFH/menu1.png) (https://imgbb.com/)

Is it possible to add one simple field in the back end where is defined the menu - I mean here:

(https://preview.ibb.co/gXPUpc/menu2.png) (https://ibb.co/eieJhx)

with simple code editing like "Image":

Code: [Select]
<img src="images/monitor.png" alt="">
And get the icon / image of the menu?

May it is imposible, maybe it is very hard to be done I don't know, I'm not coder ... so just asking.

regards,

Rumen 

Title: Re: Menu question and suggestion
Post by: evaki on March 16, 2018, 12:00:20 PM
"Search" is your Friend  :-D
https://forum.WebsiteBaker.org/index.php/topic,29329.msg205637.html#msg205637
https://forum.WebsiteBaker.org/index.php/topic,22657.msg152733.html#msg152733
and more .....

MfG. Evaki
Title: Re: Menu question and suggestion
Post by: astricia on March 16, 2018, 12:05:30 PM
I would do download Font Awesome, install it and then use it in the menu.

Astricia
Title: Re: Menu question and suggestion
Post by: rumen on March 16, 2018, 12:27:37 PM
Quote from: evaki on March 16, 2018, 12:00:20 PM
"Search" is your Friend  :-D
https://forum.WebsiteBaker.org/index.php/topic,29329.msg205637.html#msg205637
https://forum.WebsiteBaker.org/index.php/topic,22657.msg152733.html#msg152733
and more .....

MfG. Evaki

I always try to search first and not to duplicate other posts. 

I saw that posts, but ... this is not a general solution, it is custom solution - case by case.
Title: Re: Menu question and suggestion
Post by: dbs on March 16, 2018, 01:08:52 PM
If you have a id or class for every menu item it should possible to work with pseudoclass :before to add a Font Awesome icon.
Title: Re: Menu question and suggestion
Post by: rumen on March 16, 2018, 03:30:22 PM
OK here is a real example (but because it is not defined as separate field it doesn't work very well)

The input:

(https://preview.ibb.co/desSSx/menu3.png) (https://ibb.co/m881nx)

And the result:

(https://preview.ibb.co/fKwhuc/menu4.png) (https://ibb.co/hrWFEc)

Title: Re: Menu question and suggestion
Post by: dbs on March 16, 2018, 03:45:42 PM
My intension was to add class/id with page_id to show_menu2.
Next steps would be done in CSS.

Example in show_menu2 call:
... <a class="pid[page_id]" ...

and in CSS:
.pid23:before {content: '\f0e0'; font-family: 'FontAwesome'; font-size: 18px; font-color: yellow}

read more:
https://stackoverflow.com/questions/20782368/use-font-awesome-icon-as-css-content
http://astronautweb.co/snippet/font-awesome/
Title: Re: Menu question and suggestion
Post by: evaki on March 16, 2018, 03:57:39 PM
Meine "soeben mal" testweise ausgeführte  (für mehr habe ich im Moment leider keine Zeit)

Code: [Select]
SM2:
$aItemOpen = '[list][li]<a href="[url]" class="menuicon[page_id]" title="[page_title]">[menu_title]</a>',

icon. css:
.menuicon4 {
display: block;
  background-image: url(menuicon4.jpg);
  width:80px;height:30px;
}selbstgemachtes Icon.

MfG. Evaki[/list]
Title: Re: Menu question and suggestion
Post by: evaki on March 16, 2018, 04:41:01 PM
My "just now" test (unfortunately I don't have time for more at the moment)
Code: [Select]
SM2:
$aItemOpen = '[list][li]<a href="[url]" class="menuicon[page_id]" title="[page_title]">[menu_title]</a>',

icon. css:
.menuicon4 {
display: block;
  background-image: url(menuicon4.jpg);
  width:80px;height:30px;
}SM2:
$aItemOpen = '[list][li]<a href="[url]" class="menuicon[page_id]" title="[page_title]">[menu_title]</a>',

icon. css:
.menuicon4 {
display: block;
  background-image: url(menuicon4.jpg);
  width:80px;height:30px;
} In this case for each individual page a corresponding self-made icon.
MfG. Evaki
(irgendwie ist heute der wurm drin -netzstörungen)