Make selected language more evident in panel

Kirby 3 Solved ✅
,
1

Often I find myself unintentionally editing a secondary language.
I was wondering if there’s an easy way of making the selected language more evident. Or if this could be a good idea to implement in a future version. Some ideas:

  • Showing a flag somewhere where it’s evident (header bar is better because it’s fixed therefore visible even after scrolling down the page)
  • More drastic, fill the whole header bar with a color different than black. There could be one color (also grey would do) used whenever a secondary language is selected, or even a different color for each language. The color could be a property to assign to each language.

Language creation

image
image1048×848 20.6 KB

Panel appearance

image
image2922×1468 200 KB

2

The color header can be implemented with custom Panel CSS.

3

Nice one, works great! Posting code if anyone needs it.

// assets/css/custom-panel.css

.k-panel[data-language='de'] .k-topbar {
  border-bottom: 3px solid #CC6A6A;
}

.k-panel[data-language='it'] .k-topbar {
  border-bottom: 3px solid #008034;
}

.k-topbar-signals,
.k-topbar-wrapper:after {
  background: none;
}

Result:

image
image2818×1496 342 KB

To add a custom panel CSS:

1 Like
4

This is the solution I was looking for!
I colored the whole k-topbar red for the English version to make it more obvious:

.k-panel[data-language='en'] .k-topbar-signals,
.k-panel[data-language='en'] .k-topbar-wrapper:after,
.k-panel[data-language='en'] .k-topbar {
  background-color: #e30914;
}