Customization on css in process ticket

[harrypet]

Dear friends,

I am trying to customize own css style on process ticket. I would like to change the layout and color in ticket creation page. As shown in the picture below.

Capture.JPG

However, I go to system configuration in Loader::Module::AgentTicketProcess###002-ProcessManagement

Capture1.JPG

I get into back-end to read the js and css source code.I cannot figure it out which part of the css is involved in the ticket creation page as the js and css are not obviously related.

Are there any clue for me where I can set the css on the ticket creation page? Also, how all js,css,tt and xml files are related?

Thanks all. I will be grateful for any help!

Regards,
Harry

[zzz]

Hello Harry,

It's probably the easiest way to edit /opt/otrs/var/httpd/htdocs/skins/Agent/default/css/Core.Agent.TicketProcess.css if you only want to make a single change.

You should keep in mind that changes on OTRS files will get lost on updates.
Copy them by hand or build your own package.

Some tips:
Disable the setting 'Loader::Enabled::CSS' and disable the cache of your browser while developing.
Use !important if you change existing rules. You might never know in which order the new CSS file will get compressed.

Best regards
Emin

[harrypet]

Thanks Emin! I will have a try later. Thank for your help.

[harrypet]

HI Emin,

I have tried to change the css style in /opt/otrs/var/httpd/htdocs/skins/Agent/default/css/Core.Agent.TicketProcess.css.
Unfortunately, the layout and the color of dynamic fields do not change.

I have even tried to disable the Core.Agent.TicketProcess.css in sysconfig. It seems like only the button of submit and the descriptions are affected. The layout and the color remain unchanged.

I wonder how I can change the layout of the dynamic fields in the process ticket creation page. Let's say 1 row can have 2 dynamic fields putting together instead of a long list one column of dynamic fields.

I am looking forward to any help and reply. Thanks!

Regards,
Harry

[zzz]

Disable the setting 'Loader::Enabled::CSS' and the caching of your browser.
Edit var/httpd/htdocs/skins/Agent/default/css/Core.Agent.TicketProcess.css and add this to the bottom:

Code: Select all

.DescriptionLong {
    white-space: pre-line;
}

/* Your custom code belongs here */
body {
    background-color: red !important;
}

#DynamicField_PreProcDaysUsed {
    width: 25% !important;
}

} /* end @media */

After saving, you should get an ugly mask. Changes will only affect the process ticket.
From here on, you're free to go with your own CSS to design every aspect of the page.
Every activity dialog has his own ID which will allow you to make dialog-based changes.

Best regards
Emin

[harrypet]

Hi Emin,

I will try it later. Thanks for your kindly help to me again.

Best regards,

Harry