Change priority colors via css in OTRS 5

Florian Edlhuber15. Nov 2016 | AdministrationMiscellaneous

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 *

This site uses cookies. By continuing to use the site, you agree to the use of cookies. More information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close