[{"data":1,"prerenderedAt":521},["ShallowReactive",2],{"docs-skin-entwicklung-en":3},{"id":4,"title":5,"body":6,"category":511,"description":512,"draft":513,"extension":514,"meta":515,"navigation":420,"order":516,"path":517,"seo":518,"stem":519,"__hash__":520},"docsEn\u002Fdocs\u002Fskin-entwicklung.md","OTOBO\u002FZnuny Skin Development",{"type":7,"value":8,"toc":504},"minimark",[9,13,27,32,42,53,57,64,353,370,374,381,465,469,486,490,500],[10,11,5],"h1",{"id":12},"otoboznuny-skin-development",[14,15,16,17,21,22,26],"p",{},"A skin overrides the default look and feel of the agent or customer interface with custom CSS. Skins are packaged as regular ",[18,19,20],"code",{},".opm"," packages and registered via the ",[23,24,25],"strong",{},"SysConfig",".",[28,29,31],"h2",{"id":30},"directory-structure","Directory Structure",[33,34,40],"pre",{"className":35,"code":37,"language":38,"meta":39},[36],"language-text","var\u002Fhttpd\u002Fhtdocs\u002Fskins\u002FAgent\u002FMySkin\u002Fcss\u002FMySkin.css\nvar\u002Fhttpd\u002Fhtdocs\u002Fskins\u002FCustomer\u002FMySkin\u002Fcss\u002FMySkin.css\n","text","",[18,41,37],{"__ignoreMap":39},[14,43,44,45,48,49,52],{},"The directory name (",[18,46,47],{},"MySkin",") is the ",[23,50,51],{},"internal name"," of the skin.",[28,54,56],{"id":55},"sysconfig-registration","SysConfig Registration",[14,58,59,60,63],{},"Register the skin in ",[18,61,62],{},"Kernel\u002FConfig\u002FFiles\u002FXML\u002FMyPackage.xml",":",[33,65,69],{"className":66,"code":67,"language":68,"meta":39,"style":39},"language-xml shiki shiki-themes one-dark-pro","\u003C?xml version=\"1.0\" encoding=\"utf-8\"?>\n\u003Cotobo_config version=\"2.0\" init=\"Application\">\n    \u003CSetting Name=\"Loader::Agent::Skin###100-MySkin\" Required=\"0\" Valid=\"1\">\n        \u003CDescription Translatable=\"1\">Agent skin provided by the MyPackage package.\u003C\u002FDescription>\n        \u003CNavigation>Frontend::Agent::View\u003C\u002FNavigation>\n        \u003CValue>\n            \u003CHash>\n                \u003CItem Key=\"InternalName\">MySkin\u003C\u002FItem>\n                \u003CItem Key=\"VisibleName\">My Skin\u003C\u002FItem>\n                \u003CItem Key=\"Description\">A custom agent skin.\u003C\u002FItem>\n                \u003CItem Key=\"HomePage\">https:\u002F\u002Fexample.com\u003C\u002FItem>\n            \u003C\u002FHash>\n        \u003C\u002FValue>\n    \u003C\u002FSetting>\n\u003C\u002Fotobo_config>\n","xml",[18,70,71,105,132,167,190,205,215,226,250,271,292,313,323,333,343],{"__ignoreMap":39},[72,73,76,80,83,87,90,94,97,99,102],"span",{"class":74,"line":75},"line",1,[72,77,79],{"class":78},"sn6KH","\u003C?",[72,81,68],{"class":82},"sVyAn",[72,84,86],{"class":85},"sVC51"," version",[72,88,89],{"class":78},"=",[72,91,93],{"class":92},"subq3","\"1.0\"",[72,95,96],{"class":85}," encoding",[72,98,89],{"class":78},[72,100,101],{"class":92},"\"utf-8\"",[72,103,104],{"class":78},"?>\n",[72,106,108,111,114,116,118,121,124,126,129],{"class":74,"line":107},2,[72,109,110],{"class":78},"\u003C",[72,112,113],{"class":82},"otobo_config",[72,115,86],{"class":85},[72,117,89],{"class":78},[72,119,120],{"class":92},"\"2.0\"",[72,122,123],{"class":85}," init",[72,125,89],{"class":78},[72,127,128],{"class":92},"\"Application\"",[72,130,131],{"class":78},">\n",[72,133,135,138,141,144,146,149,152,154,157,160,162,165],{"class":74,"line":134},3,[72,136,137],{"class":78},"    \u003C",[72,139,140],{"class":82},"Setting",[72,142,143],{"class":85}," Name",[72,145,89],{"class":78},[72,147,148],{"class":92},"\"Loader::Agent::Skin###100-MySkin\"",[72,150,151],{"class":85}," Required",[72,153,89],{"class":78},[72,155,156],{"class":92},"\"0\"",[72,158,159],{"class":85}," Valid",[72,161,89],{"class":78},[72,163,164],{"class":92},"\"1\"",[72,166,131],{"class":78},[72,168,170,173,176,179,181,183,186,188],{"class":74,"line":169},4,[72,171,172],{"class":78},"        \u003C",[72,174,175],{"class":82},"Description",[72,177,178],{"class":85}," Translatable",[72,180,89],{"class":78},[72,182,164],{"class":92},[72,184,185],{"class":78},">Agent skin provided by the MyPackage package.\u003C\u002F",[72,187,175],{"class":82},[72,189,131],{"class":78},[72,191,193,195,198,201,203],{"class":74,"line":192},5,[72,194,172],{"class":78},[72,196,197],{"class":82},"Navigation",[72,199,200],{"class":78},">Frontend::Agent::View\u003C\u002F",[72,202,197],{"class":82},[72,204,131],{"class":78},[72,206,208,210,213],{"class":74,"line":207},6,[72,209,172],{"class":78},[72,211,212],{"class":82},"Value",[72,214,131],{"class":78},[72,216,218,221,224],{"class":74,"line":217},7,[72,219,220],{"class":78},"            \u003C",[72,222,223],{"class":82},"Hash",[72,225,131],{"class":78},[72,227,229,232,235,238,240,243,246,248],{"class":74,"line":228},8,[72,230,231],{"class":78},"                \u003C",[72,233,234],{"class":82},"Item",[72,236,237],{"class":85}," Key",[72,239,89],{"class":78},[72,241,242],{"class":92},"\"InternalName\"",[72,244,245],{"class":78},">MySkin\u003C\u002F",[72,247,234],{"class":82},[72,249,131],{"class":78},[72,251,253,255,257,259,261,264,267,269],{"class":74,"line":252},9,[72,254,231],{"class":78},[72,256,234],{"class":82},[72,258,237],{"class":85},[72,260,89],{"class":78},[72,262,263],{"class":92},"\"VisibleName\"",[72,265,266],{"class":78},">My Skin\u003C\u002F",[72,268,234],{"class":82},[72,270,131],{"class":78},[72,272,274,276,278,280,282,285,288,290],{"class":74,"line":273},10,[72,275,231],{"class":78},[72,277,234],{"class":82},[72,279,237],{"class":85},[72,281,89],{"class":78},[72,283,284],{"class":92},"\"Description\"",[72,286,287],{"class":78},">A custom agent skin.\u003C\u002F",[72,289,234],{"class":82},[72,291,131],{"class":78},[72,293,295,297,299,301,303,306,309,311],{"class":74,"line":294},11,[72,296,231],{"class":78},[72,298,234],{"class":82},[72,300,237],{"class":85},[72,302,89],{"class":78},[72,304,305],{"class":92},"\"HomePage\"",[72,307,308],{"class":78},">https:\u002F\u002Fexample.com\u003C\u002F",[72,310,234],{"class":82},[72,312,131],{"class":78},[72,314,316,319,321],{"class":74,"line":315},12,[72,317,318],{"class":78},"            \u003C\u002F",[72,320,223],{"class":82},[72,322,131],{"class":78},[72,324,326,329,331],{"class":74,"line":325},13,[72,327,328],{"class":78},"        \u003C\u002F",[72,330,212],{"class":82},[72,332,131],{"class":78},[72,334,336,339,341],{"class":74,"line":335},14,[72,337,338],{"class":78},"    \u003C\u002F",[72,340,140],{"class":82},[72,342,131],{"class":78},[72,344,346,349,351],{"class":74,"line":345},15,[72,347,348],{"class":78},"\u003C\u002F",[72,350,113],{"class":82},[72,352,131],{"class":78},[14,354,355,356,359,360,362,363,366,367,26],{},"For customer skins, use ",[18,357,358],{},"Loader::Customer::Skin###..."," with the ",[18,361,197],{}," ",[18,364,365],{},"Frontend::Customer::View",". For Znuny\u002FOTRS, the root element is ",[18,368,369],{},"otrs_config",[28,371,373],{"id":372},"writing-css","Writing CSS",[14,375,376,377,380],{},"The skin CSS is loaded ",[23,378,379],{},"in addition"," to the default skin. You only need to override what you want to change:",[33,382,386],{"className":383,"code":384,"language":385,"meta":39,"style":39},"language-css shiki shiki-themes one-dark-pro",":root {\n    --oitsm-skin-accent: #10b981;\n}\n\n#Navigation > li.Selected > a {\n    background-color: var(--oitsm-skin-accent);\n}\n","css",[18,387,388,397,411,416,422,444,461],{"__ignoreMap":39},[72,389,390,394],{"class":74,"line":75},[72,391,393],{"class":392},"sjrmR",":root",[72,395,396],{"class":78}," {\n",[72,398,399,402,405,408],{"class":74,"line":107},[72,400,401],{"class":82},"    --oitsm-skin-accent",[72,403,404],{"class":78},": ",[72,406,407],{"class":85},"#10b981",[72,409,410],{"class":78},";\n",[72,412,413],{"class":74,"line":134},[72,414,415],{"class":78},"}\n",[72,417,418],{"class":74,"line":169},[72,419,421],{"emptyLinePlaceholder":420},true,"\n",[72,423,424,428,431,434,437,439,442],{"class":74,"line":192},[72,425,427],{"class":426},"sVbv2","#Navigation",[72,429,430],{"class":78}," >",[72,432,433],{"class":82}," li",[72,435,436],{"class":85},".Selected",[72,438,430],{"class":78},[72,440,441],{"class":82}," a",[72,443,396],{"class":78},[72,445,446,449,452,455,458],{"class":74,"line":207},[72,447,448],{"class":78},"    background-color: ",[72,450,451],{"class":392},"var",[72,453,454],{"class":78},"(",[72,456,457],{"class":82},"--oitsm-skin-accent",[72,459,460],{"class":78},");\n",[72,462,463],{"class":74,"line":217},[72,464,415],{"class":78},[28,466,468],{"id":467},"quick-start","Quick Start",[14,470,471,472,477,478,481,482,26],{},"The ",[473,474,476],"a",{"href":475},"\u002Ftools\u002Fskin-generator","Skin Generator"," creates the complete structure—",[18,479,480],{},".sopm",", SysConfig XML, and CSS—in a single step. Afterward, build the package as described in ",[473,483,485],{"href":484},"\u002Fdocs\u002Fotobo-znuny-paket-bauen","Building OTOBO & Znuny Packages",[28,487,489],{"id":488},"activation","Activation",[14,491,492,493,496,497,26],{},"After installation, agents can select the skin under ",[23,494,495],{},"Personal Preferences → Interface",", or you can set the default via ",[18,498,499],{},"Loader::Agent::DefaultSelectedSkin",[501,502,503],"style",{},"html pre.shiki code .sn6KH, html code.shiki .sn6KH{--shiki-default:#ABB2BF}html pre.shiki code .sVyAn, html code.shiki .sVyAn{--shiki-default:#E06C75}html pre.shiki code .sVC51, html code.shiki .sVC51{--shiki-default:#D19A66}html pre.shiki code .subq3, html code.shiki .subq3{--shiki-default:#98C379}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sjrmR, html code.shiki .sjrmR{--shiki-default:#56B6C2}html pre.shiki code .sVbv2, html code.shiki .sVbv2{--shiki-default:#61AFEF}",{"title":39,"searchDepth":107,"depth":107,"links":505},[506,507,508,509,510],{"id":30,"depth":107,"text":31},{"id":55,"depth":107,"text":56},{"id":372,"depth":107,"text":373},{"id":467,"depth":107,"text":468},{"id":488,"depth":107,"text":489},"Skins","Create custom agent and customer skins for OTOBO, Znuny, and OTRS CE: SysConfig loader entries, directory structure, and CSS overrides.",false,"md",{},30,"\u002Fdocs\u002Fskin-entwicklung",{"title":5,"description":512},"docs\u002Fskin-entwicklung","9wcOnr_Dqxn0Z6yofK4ed1UyGDvE4j_lKEx985eEznU",1787733082732]