Whilst small files can be uploaded to forum posts, if you have a custom theme or module to contribute please add it on the "Add-ons" page.
  • Page:
  • 1

TOPIC:

Adding menu icons/links 4 months 3 weeks ago #1

  • rjrooney
  • rjrooney's Avatar Topic Author
  • Offline
  • New
  • New
  • Posts: 6
In prior webtrees releases, I was able to update the menus in the style.css file for the theme by including the new menu item (and other changes):

/* Main menu icons */
#menu-calendar {background-position:center -200px;}
#menu-chart {background-position:center -80px;}
#menu-clippings {background-position:center -320px;}
#menu-explorer {background-position:center -640px;}
#menu-fam {background-position:center -440px;}


In release 2.0.2, it seems like I should be able to add an icon in the respective theme .css file, but reloading the browser doesn't pick up the new icon with only this change.

.menu-tree .nav-link::before {
content: url(webtrees/menu/tree.png);
}

.menu-tree .dropdown-item::before {
content: url(webtrees/menu/tree-tree.png);
}

.menu-explorer .nav-link::before {
content: url(webtrees/menu/explorer.gif);
}



Since clicking on the icon needs to point somewhere as well, I'm thinking there has to be another spot to include the menu items, but I'm not finding where it may be. If anyone has thought on how to add the icon/link, I would appreciate the feedback.

Thank you

Please Log in or Create an account to join the conversation.

Adding menu icons/links 4 months 3 weeks ago #2

  • fisharebest
  • fisharebest's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 13364
Most things in webtrees 2.0 are modules.

So, you would create a module to do this.

You sound like you are familiar with HTML, CSS, JS, PHP, etc., so you should be able to follow the instructions in modules_v4/README.md

Your module would need to implement two of the possible module component: "menu" (to create a menu!), and "global" (to add CSS to every page).

You've got the CSS sorted. You just need to create a menu. It will be one function, very similar to what you created in webtrees 1.7
Greg Roach - This email address is being protected from spambots. You need JavaScript enabled to view it. - fisharebest.webtrees.net

Please Log in or Create an account to join the conversation.

Adding menu icons/links 4 months 3 weeks ago #3

  • rjrooney
  • rjrooney's Avatar Topic Author
  • Offline
  • New
  • New
  • Posts: 6
Thanks Greg - the info you provided was what i needed to get the extra link added to the menu.

However, I'm still having one issue. For some reason, the icon isn't being picked up. I am using the format as the other menu items, and I have the .png included in each of the theme folders, but it just isn't working.

.menu-explorer .nav-link::before {
content: url(webtrees/menu/explorer.png);
}

Do you have any thoughts on what the issue may be?

Thanks again

Please Log in or Create an account to join the conversation.

Adding menu icons/links 4 months 3 weeks ago #4

  • fisharebest
  • fisharebest's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 13364
> I have the .png included in each of the theme folders

Theme folders? I guess you are you using webtrees 1.7

I'm afraid it is a long time since I've looked at 1.7, and it is hard to remember the details.

Most likely a URL error. Enable the dev tools in your browser, and it should tell you what file it is failing to load.
Greg Roach - This email address is being protected from spambots. You need JavaScript enabled to view it. - fisharebest.webtrees.net

Please Log in or Create an account to join the conversation.

Adding menu icons/links 4 months 3 weeks ago #5

  • rjrooney
  • rjrooney's Avatar Topic Author
  • Offline
  • New
  • New
  • Posts: 6
I'm definitely using 2.0.2. By themes folder, I meant the image was placed in each of the theme associated menu directories (eg. /resources/css/webtrees/menu/).

Thanks for the developer tools reminder. I can see a difference between the menu item I am trying to add and the others already there. It seems like it has something to do with the "::before". Also, the file referenced may be public/css/webtrees.min.css, but I'm not seeing a way to edit the .min.css files in general. Attached is a comparison of the two nav menu item references to the ::before element.



Please let me know if you have any thoughts about what I'm doing wrong. Thank you.
Attachments:

Please Log in or Create an account to join the conversation.

Adding menu icons/links 4 months 3 weeks ago #6

  • fisharebest
  • fisharebest's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 13364
You said you were using this CSS:

.menu-explorer .nav-link::before {
content: url(webtrees/menu/explorer.gif);
}


Your screenshot doesn't appear to be for this element.
(.wt-genealogy-menu is the "menu bar", not the "menu item").

Maybe just post the URL of your site so we can take a look?
Greg Roach - This email address is being protected from spambots. You need JavaScript enabled to view it. - fisharebest.webtrees.net

Please Log in or Create an account to join the conversation.

Adding menu icons/links 4 months 2 weeks ago #7

  • rjrooney
  • rjrooney's Avatar Topic Author
  • Offline
  • New
  • New
  • Posts: 6
Your assistance is much appreciated. The link to the website is: ahlesgroup.com/

The menu link I'm trying to add is for a file explorer. I'm trying to add it as the second icon in the menu, which is now just showing as "Explorer" without an icon.

Thank you

Please Log in or Create an account to join the conversation.

Adding menu icons/links 4 months 2 weeks ago #8

  • fisharebest
  • fisharebest's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 13364
Have you deleted the language files from your site?

If I try to visit your site, I get a fatal error saying that the file for my language is missing...

(I can get round this by installing en-US in my browser)

> In release 2.0.2, it seems like I should be able to add an icon in the respective theme .css file, but reloading the browser doesn't pick up the new icon with only this change.

Which CSS file *exactly*.

The ones in /resources/css are used to create the ones in /public/css

If you want to edit the CSS file, then edit the minified version in /public.

I do *not* recommend that you do this. You'll need to do it after every upgrade.

There are two official ways to add CSS.

You can add it globally using the "CSS & JS" module in the control panel.

Or you can add it using your module. The "Global" interface/trait allow you to add content to the header.



TIP: each theme needs different icons. Since you allow users to change themes, you need to provide different icons. You can target these using CSS.

e.g.

.wt-theme-xenea .menu-explorer .nav-link::before { content: <...icon-for-xenea-theme...>; }
.wt-theme-webtrees .menu-explorer .nav-link::before { content: <...icon-for-webtrees-theme...>; }
.wt-theme-clouds .menu-explorer .nav-link::before { content: <...icon-for-clouds-theme...>; }
etc.
Greg Roach - This email address is being protected from spambots. You need JavaScript enabled to view it. - fisharebest.webtrees.net

Please Log in or Create an account to join the conversation.

Last edit: by fisharebest.
Do you need a web hosting solution for your webtrees site?
If you prefer a host that specialises in webtrees, the following page lists some suppliers able to provide one for you: 

Adding menu icons/links 4 months 2 weeks ago #9

  • rjrooney
  • rjrooney's Avatar Topic Author
  • Offline
  • New
  • New
  • Posts: 6
Thanks Greg. I am not quite sure what happened. I also tried changing languages and received the fatal error as well. So, seeing that 2.0.3 was released last week, I just started over. Needless to say, things have changed a bit between revisions and I need to take a little more time to understand because what I was changing before no longer exists.

Please Log in or Create an account to join the conversation.

Adding menu icons/links 4 months 2 weeks ago #10

  • rjrooney
  • rjrooney's Avatar Topic Author
  • Offline
  • New
  • New
  • Posts: 6
Success! I now have the link and icon being added to each of the themes. However, I'm not sure how to get the icon to scale per theme (or ignore the title). Any thoughts on that? Since the menu changes with the theme, I'm wondering if there are extras to add to the CSS, but it isn't evident with what I have seen so far.

The "CSS and JS" added was the following, along with the module.php to create the link.

<style>
.menu-explorer .nav-link::before {
content: url( ahlesgroup.com/modules_v4/ExplorerMenuMo...s/icons/explorer.gif );
}
</style>

Please Log in or Create an account to join the conversation.

Adding menu icons/links 4 months 2 weeks ago #11

  • fisharebest
  • fisharebest's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 13364
> However, I'm not sure how to get the icon to scale per theme

You need to create a different icon for each theme.
See my comment at the end of post #8
Greg Roach - This email address is being protected from spambots. You need JavaScript enabled to view it. - fisharebest.webtrees.net

Please Log in or Create an account to join the conversation.

Adding menu icons/links 1 week 6 days ago #12

rjrooney wrote:
The "CSS and JS" added was the following, along with the module.php to create the link.


I am trying to do something similar to you. An extra menu item as a link to another website.
Would you be willing to share your module.php code? I'm very new to classes and stuff.

RottenSod
The Williams Family Tree
williamsfamilytree.uk/wt

Please Log in or Create an account to join the conversation.

Adding menu icons/links 4 days 14 hours ago #13

fisharebest wrote: > I have the .png included in each of the theme folders

Theme folders? I guess you are you using webtrees 1.7

I'm afraid it is a long time since I've looked at 1.7, and it is hard to remember the details.

Most likely a URL error. Enable the dev tools in your browser, and it should tell you what file it is failing to load.

Can you give guide to icon / manu link guide?

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Powered by Kunena Forum