Hi @SirSundays - it looks like you did everything right, assuming that .toolbar-icon-farm-grafana is the correct class added to that link. I would start by confirming that the CSS file is being added to the page properly and work backwards/forwards from there to figure out why it’s not working. Maybe try with different SVG code too, just to be sure that’s correct (try copying one from core).
To be honest, the SVG and the code is already copied the core UI theme (which worked great for adding the menu item)
@paul121 I think I have already tried that but to be sure I will try what you posted.
What I was wondering: What does Drupal actually search for with the preprocess function? Is it the name from the library or from where does it come?
That function is a Drupal “hook”. Hooks in Drupal basically work like this: at certain points in the process of building a page, Drupal says: “hey modules! do any of you have a function named [modulename]_[hookname]()?” And if so, it runs those functions (to alter/affect/add to whatever logic Drupal is currently working on).
In the case of “preprocess” hooks, it goes a step further. During theming Drupal says: “hey modules! do any of you have a function named [modulename]_preprocess_[themehook]()?”, where [themehook] is the name of a theme hook, specifically defined by hook_theme() (these are used to declare to Drupal different types of elements that can be themed, with optional twig template files, etc). Preprocess functions are responsible for setting/altering the variables that get passed into the template, basically.
I’ve been attempting to alter a custom menu link icon in the Gin Toolbar. I’ve been following a previous post’s attempt but I couldn’t get those changes to show up with a preprocess hook.
However, I’ve found success using the page alter hook:
I merged your question into this post, to keep them together for future readers.
Yea hook_page_attachments() or hook_page_attachments_alter() is another way to do it!
The basic principle is the same: you want to use a Drupal hook (a specially named function) to attach your library (CSS) to all pages that have the menu, so that it gets included and styles the icon the way you want. There are various hooks that could be used for this purpose, and the “page attachments” ones work because they essentially run on every page load, so you’re pretty guaranteed to get your code included everywhere you need it.
Using a preprocess hook, as described earlier, is a more “targeted” way of doing the same thing. Essentially, instead of saying “add this CSS to every page”, a preprocess hook can say “add this CSS whenever the toolbar is built.” The toolbar is ultimately what you’re trying to modify, so using hook_preprocess_toolbar() is probably the “best” way to do it, but both will work.
I’m not sure why @SirSundays’s hook wasn’t working, but here is another example in a community module that uses hook_preprocess_toolbar(), and I know for a fact that this works:
Note: that CSS does two things… adjusts the logo size and spacing (because the module also replaces the default farmOS logo), and it styles the “Integrations” icon (on a related note, we are considering moving this “Integrations” menu item into core: Integrations menu?).
FYI: Of these two, hook_page_attachments() is probably the better choice for your needs. Drupal provides “pairs” of hooks like these in a lot of cases… where the first one is for doing something, and the second is for altering things that were done by other modules. In your case, you’re not altering page attachments from another module, you just want to add your own… so hook_page_attachments() is the “correct” choice. Both work the same. The reason I say “correct” is because this leaves open the possibility for another module to alter YOUR module’s attachments, if it wanted to. If you use hook_page_attachments_alter() it makes that a little more difficult.
Thanks! Happy to be here. This makes a lot of sense thanks for elaborating on the preprocess vs page_attachments hooks. The Drupal API documentation is sparse on these topics.
Again, I tried adapting this example to the project I’m working on, but no success farm_fd2_preprocess_toolbar(&$variables).
I’ve adjusted the hook from hook_page_attachments_alter() to hook_page_attachments().
