Trouble theming some menu items.

Created on 26 January 2025, 2 months ago

Problem/Motivation

We have been using this module for some time now and it our our clear favourite among a plethora of 'floating / better' Admin TAB modules out there because it 'just works'.

However, there is one thing that drives us a bit mad...

When you dig into the underlying markup, some of the menu items' <li> tags have classes applied which we can use as selectors such as the core view/edit/delete/revisions items below ...

<ul class="sticky-local-tasks__list primary nav nav-tabs">
<li class="nav-item--view nav-item">
  <a href="/optional-challenges/kew-gardens" class="nav-link active">
    <span>View</span>
    <i class="nav-link__icon"></i>
  </a>
</li>

<li class="nav-item--edit nav-item">
  <a href="/node/8689/edit" class="nav-link">
    <span>Edit</span>
    <i class="nav-link__icon"></i>
  </a>
</li>

<li class="nav-item--delete nav-item">
  <a href="/node/8689/delete" class="nav-link">
    <span>Delete</span>
    <i class="nav-link__icon"></i>
  </a>
</li>

<li class="nav-item--revisions nav-item">
  <a href="/node/8689/revisions" class="nav-link">
    <span>Revisions</span>
    <i class="nav-link__icon"></i>
  </a>
</li>

<li class="nav-item">
  <a href="/node/8689/usage" class="nav-link">
    <span>Usage</span>
    <i class="nav-link__icon"></i>
  </a>
</li>
</ul>

But others, such as these proved by 3rd-party modules do not...

The 'Entity Copy with Reference' module...

<li class="nav-item">
  <a href="/node/8689/copy" class="nav-link">
    <span>Copy</span>
    <i class="nav-link__icon"></i>
  </a>
</li>

The 'Entity Usage' module...

<li class="nav-item">
  <a href="/node/8689/usage" class="nav-link">
    <span>Usage</span>
    <i class="nav-link__icon"></i>
  </a>
</li>

The lack of classes means that we have had to resort to using li:nth-child(n) > a > i selectors in order to theme them up and that gets crazy and unpredictable because the n in the equation changes according what pages/node types you hit and so we have ended up with some rather hacky (but working) styling like this...

/***************************
 * Sticky Local Tasks START *
 ***************************/
.sticky-local-tasks__wrapper {
  .sticky-local-tasks__list {
    li.nav-item--view > a > i {
      background-image: url(../css/assets/view.svg);
    }
    li.nav-item--edit > a > i {
      background-image: url(../css/assets/edit.svg);
    }
    li:nth-child(3) > a > i {
      background-image: url(../css/assets/publish.svg);
    }
    li:nth-child(6) > a > i {
      background-image: url(../css/assets/usage.svg);
    }
    li.nav-item--revisions > a > i {
      display: none;
    }
  }
}
body.page-node-type-pick-n-mix,
body.page-node-type-examination-question,
body.page-node-type-stretch-activity,
body.page-node-type-theory-snippet {
  .sticky-local-tasks__wrapper {
    .sticky-local-tasks__list {
      li:nth-child(4) > a > i {
        background-image: url(../css/assets/copy.svg);
      }
      li:nth-child(7) > a > i {
        background-image: url(../css/assets/usage.svg);
      }
    }
  }
}
body.path-user {
  .sticky-local-tasks__wrapper {
    .sticky-local-tasks__list {
      li:nth-child(3) > a > i {
        background-image: url(../css/assets/edit.svg);
      }
    }
  }
}
/**************************
 * Sticky Local Tasks END *
 **************************/

We wondered if there is some hook-magic that could be done by the module to add in those extra classes if and when they are missing?

💬 Support request
Status

Active

Version

1.0

Component

Code

Created by

🇬🇧United Kingdom SirClickALot Somerset

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024