2. DEPLOYMENT AND USAGE
CopyPaste and overwrite all the files.
Change the usedskininOTRS adminSysConfigPanel.
Noweach usercan selectthe theme fromhispreferencesMenu,byclickingonthe name (usuallytop
rightcorner).
NOTE: You won’tbe able to use anyotherskinafterapplyingthispackage.Take a backupof yourfilesif
youeverneedtorevertback to some otherskinor needtoupdate yourOTRS versioninthe future.
3. CHANGES
List of files inwhichchangeswere made
DTL files
o AgentFAQExplorer.dtl
o AgentNavigationBar.dtl
o CustomerTicketMessage.dtl
o Header.dtl
o Login.dtl
JavaScript
o Core.Agent.js
CSS
o Core.AgentTicketQueue.css
o Core.Default.css
o Core.Form.css
o Core.Header.css
o Core.OverviewSmall.css
o Core.Table.css
DTL FILES
AgentFAQExplorer.dtl
Fixingof irregularlayoutcausedbythe new Vertical NavigationBar,removedline:25 ClearFix
AgentNavigationBar.dtl
Many changeswere done tofacilitate hidingthe sidebar,introducingthe arrow forindicating
the collapse andexpandfunctionalitiesof ListItems,andmovingthe otherlistitemsdown.
CustomerTicketMessage.dtl
Introducedmore formfields.
Header.dtl
Changedlogouticon.
4. Login.dtl
Heavychangesmade to the Agentloginpage.
Login.dtl hassome if notmany inline CSSstyleswhichobviouslyisnotrecommendedinusual
situationbutinthiscase it worksout prettyfairlyasno otherfile/DOMissupposedtoadoptthis
style.
The footerwas notremovedasremovingitforsome absurdreasondisabledthe loginbutton
(whythishappenedisstill notclear)
The original headerof the page isnow the footer.
JAVASCRIPT
Core.Agent.js
Commented outLines 98-102 to disable the timerof aListItemdrop down.
CSS
Core.Form.css
Fixedlayoutandindentationforformswhichwasruinedbecause of the new Loginpage.
Core.Header.css
Modifiedcolourattributes,LogoutButton,Removedfloat, changedthe Navigationbarto
sidebar,PositionAttributes,PositionAttributesforError message,changestoelementsof
sidebartoaccommodate the changesmade (Lookand feel).
Core.OverviewSmall.css
RemovedPadding,FixedLayout.
Core.Table.css
Background and mouse hoverhighlightcolourchanged.
Core.AgentTicketQueue.css,Core.Default.css
5. Minor layoutchangesas a resultof makingthe side NavigationBar.
NEW LOOK AND FEEL
The newNavigationbarisa sidebarwhichhasmanydynamicentitiesaddedtoit
Once a listItemis clickeditexpandsif itcontainsmore elements.
It doesnotcollapse until andunlessitismanuallydone bythe user
Thisis unlike the previous behaviourinwhichthe list collapsesafterafew
seconds.
There isa small arrowheadindicatingthe currentstate of the list:
If the arrow headispointingdownisindicatesthatthe listisexpanded.
Arrowheadpointingtowardsthe rightmeansitis currentlycollapsed.
On expansionof alistthe otheritemsmove downtoaccommodate the sublist
items.
6. The newNavigationBarhas dynamicsize changingaccordingtothe text
content.Ascan be seenfromthe previousandthisimage.
The currentlyselectedpage hasthe correspondinglistItemathinblack
borderaroundit.
A slightpinkcolorisaddedona sublistitemuponmouse hover
The whole NavigationBarcan be collapsedtothe side increasingthe workspacearea.
Thiscan be done byclickingonthe double arrow on top of the NavigationBar.
7. The new loginpage is completelyrevampedtogive itanew feel andremove the excessunnecessary
elements
Variousotherchangestomatch the newcolourtheme have beendone.Rangingfromthe hovercolor
on itemsina listor ina table to changingthe colourof the page header.
8. FUTURE OF THE PROJECT
The immediate future scope of the projectwouldbe toswitchthe companylogofora mini-versionso
that the heightof the headercan be reduced.
In the longerrunthisprojectcan be aimedtoadapt the Material Design conceptor somethingsimilar
whichreducesthe numberof functioningelementsinthe page toincrease the visual experience and
productivityfromthe userside.
Eventhoughadaptingthe Material designinthe projectinitscurrent state isnot at all recommended.It
requiresalotof panelstobe removedwhichreducesthe functionalityof the applicationata given
screenpresentedtothe userandalsowouldincrease the numberof mouse clicksandmouse
movements.
Hence adaptingsuchconceptcertainlyrequiresalotpf planningandrequirementanalysistobe made.
Anyfurthermodificationsasperthe users’requirementcanbe done byreadingthe changessectionof
thisdocumentandthe guidesmentionedat OTRSGitHub docs.
