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:
<?php
/**
* @file
* The farmOS UI Theme module.
*/
use Drupal\Core\Block\BlockPluginInterface;
/**
* Implements hook_theme().
*/
function farm_ui_theme_theme($existing, $type, $theme, $path) {
return [
'html__asset__map_popup' => [
'base hook' => 'html',
],
'page__asset__map_popup' => [
'base hook' => 'page',
],
This file has been truncated. show original
/**
* @file
* Styling for farmOS toolbar.
*/
/* Add padding to the wrapper around the logo. */
.toolbar .toolbar-bar #toolbar-item-administration-tray .toolbar-logo {
padding: .5em !important;
}
/* Logo size and spacing. */
.toolbar .toolbar-bar #toolbar-item-administration-tray .toolbar-logo img.toolbar-icon-home {
max-width: 100px;
margin: 20px auto;
}
/* Locations icon. */
.toolbar .toolbar-bar .toolbar-menu-administration .toolbar-icon-farm-locations::before {
-webkit-mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='10'%3e%3c/circle%3e%3cline fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' x1='2' y1='12' x2='22' y2='12'%3e%3c/line%3e%3cpath fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'%3e%3c/path%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='10'%3e%3c/circle%3e%3cline fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' x1='2' y1='12' x2='22' y2='12'%3e%3c/line%3e%3cpath fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'%3e%3c/path%3e%3c/svg%3e");
This file has been truncated. show original
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
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?
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
And thanks for the explanation