1

I'm working on a new theme for the Rain distribution (Drupal 9), but I'm having a hard time showing site branding correctly. This is the first time I'm trying to make a theme, so sorry if I ask stupid.

Site_logo, site_name and site_slogan are displayed on top of each other.

Here are excerpts from cloud_theme.theme:

/**
 * Implements hook_preprocess_HOOK().
 */
function cloud_theme_preprocess_block(array &$variables) {
  // Use inline svg in the branding block.
  if ($variables['plugin_id'] == 'system_branding_block') {
    $variables['attributes']['class'][] = 'clearfix';
    if (isset($variables['site_logo'])) {
      $logo_path = DRUPAL_ROOT . $variables['site_logo'];
      // If logo is a SVG lets load it content so we can inline it.
      if (strlen($logo_path) - strpos($logo_path, '.svg') === 4) {
        $variables['site_logo_svg'] = file_get_contents($logo_path);
      }
    }
  }
}

Here are excerpts from cloud_theme.libraries:

site-branding:
  css:
    component:
      dist/css/site-branding.css: {}

Here is my site-branding.css file:

/**
 * @file
 * Visual styles for the site branding block in Cloud theme.
 */

.site-logo {
  display: inline-block;
  margin-right: 1em; /* LTR */
  margin-bottom: 0.286em;
  border-bottom: 0;
}
[dir="rtl"] .site-logo {
  margin-right: 0;
  margin-left: 1em;
}
.site-text {
  display: inline-block;
  vertical-align: top;
}

@media all and (min-width: 461px) {
  .site-text {
    margin-bottom: 1.857em;
  }
}

@media all and (min-width: 901px) {
  .site-text {
    padding: 1.286em 0 0;
  }
}
.site-name {
  color: #686868;
  font-size: 1.6em;
  line-height: 1;
}

@media all and (min-width: 901px) {
  .site-name {
    font-size: 1.821em;
  }
}
.site-slogan {
  margin-top: 7px;
  word-spacing: 0.1em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.929em;
  font-style: italic;
}

Here is my block--system-branding-block.html.twig file:

{% extends "block.html.twig" %}
{#
/**
 * @file
 * Cloud's theme implementation for a branding block.
 *
 * Each branding element variable (logo, name, slogan) is only available if
 * enabled in the block configuration.
 *
 * Available variables:
 * - site_logo: Logo for site as defined in Appearance or theme settings.
 * - site_name: Name for site as defined in Site information settings.
 * - site_slogan: Slogan for site as defined in Site information settings.
 */
#}
{% set attributes = attributes.addClass('site-branding') %}
{% block content %}
  {% if site_logo %}
    <a href="{{ path('<front>') }}" rel="home" class="site-logo">
      <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
    </a>
  {% endif %}
  {% if site_name or site_slogan %}
    <div class="site-text">
      {% if site_name %}
        <div class="site-name">
          <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
        </div>
      {% endif %}
      {% if site_slogan %}
        <div class="site-slogan">{{ site_slogan }}</div>
      {% endif %}
    </div>
  {% endif %}
{% endblock %}

I can not really figure out what I am missing.

1 Answer 1

0

If the name of your theme is 'cloud_theme' then your hook should be called 'cloud_theme_theme_preprocess_block'. You can see how Bartik theme did it here: https://api.drupal.org/api/drupal/core%21themes%21bartik%21bartik.theme/function/bartik_preprocess_block/8.8.x

EDITED: Assuming that you have named your preprocess function as cloud_theme_theme_preprocess_block (based on the name of your theme), also make sure that you include the library in your 'cloud_theme.info.yml' file:

libraries:
  - cloud_theme/site-branding
3
  • I've already looked at Bartik's bartik_preprocess_block function. It is also code from here that I have used as a base for my theme, as I know that site branding works on Bartik's theme. Commented Aug 19, 2021 at 19:45
  • edited my answer Commented Aug 19, 2021 at 19:54
  • 1
    Now I've made it work. The hook function should still be called cloud_theme_preprocess_block, but it was the addition of the library in the cloud_theme.info.yml file that was missing. Thanks for the help. Commented Aug 19, 2021 at 20:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.