Change priority colors via css in OTRS 5

Florian Edlhuber15. Nov 2016 | AdministrationMiscellaneous

Disclaimer:

The practical examples presented in our technical blog (blog.otrs.com) and now in the expert category in our FAQ blog section serve as a source of ideas and documentation to show what is theoretically possible with OTRS in concrete scenarios or sometimes even for more exotic configurations. All configurations presented here were developed under laboratory conditions as a proof of concept. 

We can only guarantee testing and implementation of these concepts to be error-free and productive if implemented in a workshop with one of our OTRS consultants. Without this, the responsibility lies with the customer himself. Please note that configurations from older OTRS versions may not work in the newer ones.

Sometimes it can be useful to change priority colors. Changing the framework files is not recommended, but changes can be added in additional .css files. For this you have to find the .css file where the colors are defined: The .css files are stored in $OTRSHOME/var/httpd/htdocs/skins/Agent/default/css/. Searching the code you’ll find that it is stored in Core.Default.css:

otrs@server:/opt/otrs/var/httpd/htdocs/skins/Agent/default/css$ fgrep Prio ./*
./Core.Default.css:.Flag span.PriorityID-1 {
./Core.Default.css:.Flag span.PriorityID-2 {
./Core.Default.css:.Flag span.PriorityID-3 {
./Core.Default.css:.Flag span.PriorityID-4 {
./Core.Default.css:.Flag span.PriorityID-5 {

We are going to create our own .css file. In this example it is created in

./thirdparty/ZZZCustom/ZZZCustomPriority.css

the content of the file needs to be .css style (in this example green -> orange -> yellow -> light red -> red)

.Flag span.PriorityID-1 {
    background-color:#01DF01;
}
.Flag span.PriorityID-2 {
    background-color:#2EFEC8;
}
.Flag span.PriorityID-3 {
    background-color:#D7DF01;
}
.Flag span.PriorityID-4 {
    background-color:#FF8000;
}
.Flag span.PriorityID-5 {
    background-color:#FF0000;
}

The next step is to configure the new .css in the sysconfig. Head to Framework -> Core::Web and search for Loader::Agent::CommonCSS###000-Framework and add the new css with the correct path. Afterwards delete the loader cache:

otrs@server:/opt/otrs$ /opt/otrs/bin/otrs.Console.pl Maint::Loader::CacheCleanup

and the new colors are available.

 

 

#4
Florian Edlhuber at 14.11.2017, 20:08

Hi, hab mich anscheinend vertippt :-( Viele Grüße Florian

#3
Uwe Furtlehner at 14.11.2017, 13:10

Warum sind vor einigen HEX-Werten ein '#' und bei einigen zwei '##'?

#2
Marc Bonsels at 13.07.2017, 08:01

Danke für den Hinweis, Julius. Ist korrigiert!

#1
Julius Dittmar at 11.07.2017, 15:26

Danke für die Anleitung, hat super geklappt. Sie beinhaltet allerdings einen Test, ob der Admin auch mitdenkt ;-) : im dritten Code-Block (der neuen css-Datei) fehlt die letzte schließende Klammer.

Your email address will not be published. Required fields are marked *