- Issue created by @SirClickALot
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?
Active
1.0
Code