How to style your Drupal 8 module?

Question

We are building a custom Drupal 8 module, but we want control over the admin styling of it. For example style the default links above our table, convert the word -MISSING- to a proper icon, etc.

All can be easily done with CSS and Twig, but the problem is how do you overwrite it? We want to keep using the default seven admin template. So all CSS and Twig has to be inside the module I guess. Otherwise a new user that installs our module don't get the new templates.

Update We think the hook_thme method was the way to go, but still no succes to overwrite the classy/seven block:

function ejb_project_theme() {
  $theme['block'] = [
   'template' => 'block',
  ];
  $theme['block__ejb_project'] = [
   'template' => 'block',
  ];
  $theme['block--ejb_project'] = [
   'template' => 'block',
  ];
  $theme['page--block'] = [
   'template' => 'block',
  ];

  return $theme;
}

Answer 1

Yes, you need to add the theming to the module through a libraries.yml file on your module folder. Check https://www.drupal.org/developing/api/8/assets for complete information about it. For templates creation/overriding check Create custom twig templates from custom module and Drupal 8 - Override template with module

Answer 2

The approach you considering is a good one: define your our theme files using hook_theme().

In your .module file:

function ejb_project_theme($existing, $type, $theme, $path) {
  return [
    'ejb_admin_block'     => [
      'variables' => [
        'attributes' => [],
        'var_1' => 'default_output',
      ],
    ],
  ];
}

Then in the module's templates directory you can create a file named: ejb-admin-block.html.twig to provide your markup.

This is basically the inverse of what you describe: instead of overriding Seven's template, you're defining a new one and admin themes have the option to override yours.

For more on the details of the array in hook_theme see the documentation above and the theme system overview article from Drupal.org.

Answer 3

You can check for this also. see screenshot here place suggested file_name.html.twig in themes/yourtheme/templates dir

there is also a filename from where that output is coming from. you can copy that file and paste into yourtheme/template dir. clear cache. this will work.

Answer 4

You can try:

use \Symfony\Component\HttpFoundation\RedirectResponse;

function hook_page_attachments_alter(array &$attachments) {
  $route_match = \Drupal::service('current_route_match');
  $route_name = $route_match->getRouteName();
  if ($route_name == 'some.route') {
    $response = new RedirectResponse("your_path");
    $response->send();
  }

Either you should redirect to a path or try to call a custom template which will be in your_module/template dir