Language Support - Tab Text Colours - Improvement Suggestion

[prestoav 68]

Hi all,

I've had a request from a client (that I built a multi language PW site for) to change the text colours in the language tabs when they are not completed. Essentially they were having difficulty detecting which languages had content and which didn't when scanning the page in admin.

Now I know this means changing Admin template files which I hate doing but the client was insistent.

Looking through I found this in the module CSS and changed the colour for empty content to red thus:

wire/modules/LanguageSupport/LanguageTabs.css - line 61

.langTabEmpty a {
    opacity: 0.7;
    font-weight: normal !important;
    color: #ff0000 !important; /* I changed the colour here */
}

Now we get this when editing, the red indicating no translated text has been added:

I think is a better UX. However, when adding alt text to images in an image field the same CSS colour change doesn't apply. Looking at the CSS the .langTabEmpty class isn't added to these tabs on the image field.

Could this be considered as an improvement at next module upgrade time please?

Thanks as always!

[netcarver 2,341]

Hi @prestoav have you considered opening this as an issue, either of consistency in the processwire-issues repository, or a feature request on the processwire-requests repository?

[teppo 3,931]

Since this is a feature / change request involving a core module I'm moving this thread to the "Wishlist & Roadmap" forum section.

[adrian 10,623]

On 7/31/2018 at 6:35 AM, prestoav said:

Now I know this means changing Admin template files which I hate doing but the client was insistent.

Have you tried using AdminOnSteroids or AdminCustomFiles to add the CSS without needing to module the core module file?

[tpr 3,030]

@prestoav what netcarver suggested, please open a github issue because the .langTabEmpty class is missing from image description list items which makes it impossible to style the way you need.

[Pete 3,557]

I just added a request this morning - such a handy feature.