Custom Menu Link - How to change the symbol

Hi guys,

so thanks to @paul121 I managed to add my custom grafana link text field to every asset. Worked really well.

I then added a custom menu link to the toolbar and routed it to a new custom side that shows your grafana.

The only thing I couldn’t figure out was how to change the logo in the toolbar. Currently, it looks like this:

What I tried:
Adding a custom CSS library:
farm_grafana_integration.library.yml

grafana_toolbar:
  version: 1.x
  css:
    theme:
      css/toolbar.css: { }

Add a small CSS file that I copied from the core farmOS:

/**
 * @file
 * Styling for Grafana.
 */

/* Grafana icon. */
.toolbar .toolbar-bar .toolbar-menu-administration  .toolbar-icon-farm-grafana::before {
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='3'/%3e%3cpath fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='3'/%3e%3cpath fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z'/%3e%3c/svg%3e");
}

in the module file I added this hook:

/**
 * Implements hook_preprocess_HOOK().
 */
function farm_grafana_integration_preprocess_grafana_toolbar(&$variables) {
  $variables['#attached']['library'][] = 'farm_grafana_integration/grafana_toolbar';
}

Is it possible to change the logo like this? Or do I have to do it somewhat differently?

Thanks in advance guys. I hope I can join the dev call again next week.

3 Likes

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).

Also: did you clear your cache?

It seems like you already figured this out, but for reference here are the files that handle this in farmOS core itself for the icons it ships with:

I believe your preprocess hook name is slightly incorrect. Assuming your module name is farm_grafana_integration

function farm_grafana_integration_preprocess_grafana_toolbar(&$variables)

should be

function farm_grafana_integration_preprocess_toolbar(&$variables)

1 Like

Good eyes @paul121 !

To be honest, the SVG and the code is already copied the core UI theme (which worked great for adding the menu item) :sweat_smile:

@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?

2 Likes

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.

https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/function/hook_preprocess_HOOK/9.3.x

I tried that and cleared the cache but it, unfortunately, did not work.

I will leave the code in for now and after I release the code, maybe someone can see the mistake. I bet it’s something really small :sweat_smile:

And thanks for the explanation :smiley: