[{"data":1,"prerenderedAt":349},["ShallowReactive",2],{"docs-skin-entwicklung":3},{"id":4,"title":5,"body":6,"category":339,"description":340,"draft":341,"extension":342,"meta":343,"navigation":238,"order":344,"path":345,"seo":346,"stem":347,"__hash__":348},"docs\u002Fdocs\u002Fskin-entwicklung.md","OTOBO\u002FZnuny Skin-Entwicklung",{"type":7,"value":8,"toc":332},"minimark",[9,13,27,32,42,53,57,64,163,182,186,193,292,296,314,318,328],[10,11,5],"h1",{"id":12},"otoboznuny-skin-entwicklung",[14,15,16,17,21,22,26],"p",{},"Ein Skin überschreibt das Standard-Aussehen der Agent- oder Customer-Oberfläche mit eigenem CSS. Skins werden als reguläres ",[18,19,20],"code",{},".opm","-Paket ausgeliefert und über die ",[23,24,25],"strong",{},"SysConfig"," registriert.",[28,29,31],"h2",{"id":30},"verzeichnisstruktur","Verzeichnisstruktur",[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],{},"Der Verzeichnisname (",[18,46,47],{},"MySkin",") ist der ",[23,50,51],{},"interne Name"," des Skins.",[28,54,56],{"id":55},"sysconfig-registrierung","SysConfig-Registrierung",[14,58,59,60,63],{},"Registrieren Sie den 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 material-theme-lighter material-theme material-theme-palenight","\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 bereitgestellt vom Paket MyPackage.\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\">Ein individueller 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,79,85,91,97,103,109,115,121,127,133,139,145,151,157],{"__ignoreMap":39},[72,73,76],"span",{"class":74,"line":75},"line",1,[72,77,78],{},"\u003C?xml version=\"1.0\" encoding=\"utf-8\"?>\n",[72,80,82],{"class":74,"line":81},2,[72,83,84],{},"\u003Cotobo_config version=\"2.0\" init=\"Application\">\n",[72,86,88],{"class":74,"line":87},3,[72,89,90],{},"    \u003CSetting Name=\"Loader::Agent::Skin###100-MySkin\" Required=\"0\" Valid=\"1\">\n",[72,92,94],{"class":74,"line":93},4,[72,95,96],{},"        \u003CDescription Translatable=\"1\">Agent-Skin bereitgestellt vom Paket MyPackage.\u003C\u002FDescription>\n",[72,98,100],{"class":74,"line":99},5,[72,101,102],{},"        \u003CNavigation>Frontend::Agent::View\u003C\u002FNavigation>\n",[72,104,106],{"class":74,"line":105},6,[72,107,108],{},"        \u003CValue>\n",[72,110,112],{"class":74,"line":111},7,[72,113,114],{},"            \u003CHash>\n",[72,116,118],{"class":74,"line":117},8,[72,119,120],{},"                \u003CItem Key=\"InternalName\">MySkin\u003C\u002FItem>\n",[72,122,124],{"class":74,"line":123},9,[72,125,126],{},"                \u003CItem Key=\"VisibleName\">My Skin\u003C\u002FItem>\n",[72,128,130],{"class":74,"line":129},10,[72,131,132],{},"                \u003CItem Key=\"Description\">Ein individueller Agent-Skin.\u003C\u002FItem>\n",[72,134,136],{"class":74,"line":135},11,[72,137,138],{},"                \u003CItem Key=\"HomePage\">https:\u002F\u002Fexample.com\u003C\u002FItem>\n",[72,140,142],{"class":74,"line":141},12,[72,143,144],{},"            \u003C\u002FHash>\n",[72,146,148],{"class":74,"line":147},13,[72,149,150],{},"        \u003C\u002FValue>\n",[72,152,154],{"class":74,"line":153},14,[72,155,156],{},"    \u003C\u002FSetting>\n",[72,158,160],{"class":74,"line":159},15,[72,161,162],{},"\u003C\u002Fotobo_config>\n",[14,164,165,166,169,170,173,174,177,178,181],{},"Für Kunden-Skins verwenden Sie ",[18,167,168],{},"Loader::Customer::Skin###..."," mit ",[18,171,172],{},"Navigation"," ",[18,175,176],{},"Frontend::Customer::View",". Bei Znuny\u002FOTRS lautet das Wurzelelement ",[18,179,180],{},"otrs_config",".",[28,183,185],{"id":184},"css-schreiben","CSS schreiben",[14,187,188,189,192],{},"Das Skin-CSS wird ",[23,190,191],{},"zusätzlich"," zum Default-Skin geladen — Sie überschreiben nur, was Sie ändern möchten:",[33,194,198],{"className":195,"code":196,"language":197,"meta":39,"style":39},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --oitsm-skin-accent: #10b981;\n}\n\n#Navigation > li.Selected > a {\n    background-color: var(--oitsm-skin-accent);\n}\n","css",[18,199,200,212,229,234,240,267,288],{"__ignoreMap":39},[72,201,202,205,209],{"class":74,"line":75},[72,203,63],{"class":204},"sMK4o",[72,206,208],{"class":207},"spNyl","root",[72,210,211],{"class":204}," {\n",[72,213,214,218,220,223,226],{"class":74,"line":81},[72,215,217],{"class":216},"sTEyZ","    --oitsm-skin-accent",[72,219,63],{"class":204},[72,221,222],{"class":204}," #",[72,224,225],{"class":216},"10b981",[72,227,228],{"class":204},";\n",[72,230,231],{"class":74,"line":87},[72,232,233],{"class":204},"}\n",[72,235,236],{"class":74,"line":93},[72,237,239],{"emptyLinePlaceholder":238},true,"\n",[72,241,242,245,248,251,255,257,260,262,265],{"class":74,"line":99},[72,243,244],{"class":204},"#",[72,246,172],{"class":247},"sbssI",[72,249,250],{"class":204}," >",[72,252,254],{"class":253},"sBMFI"," li",[72,256,181],{"class":204},[72,258,259],{"class":253},"Selected",[72,261,250],{"class":204},[72,263,264],{"class":253}," a",[72,266,211],{"class":204},[72,268,269,273,275,279,282,285],{"class":74,"line":105},[72,270,272],{"class":271},"sqsOY","    background-color",[72,274,63],{"class":204},[72,276,278],{"class":277},"s2Zo4"," var",[72,280,281],{"class":204},"(",[72,283,284],{"class":216},"--oitsm-skin-accent",[72,286,287],{"class":204},");\n",[72,289,290],{"class":74,"line":111},[72,291,233],{"class":204},[28,293,295],{"id":294},"schnell-starten","Schnell starten",[14,297,298,299,304,305,308,309,313],{},"Der ",[300,301,303],"a",{"href":302},"\u002Ftools\u002Fskin-generator","Skin-Generator"," erzeugt das komplette Gerüst — ",[18,306,307],{},".sopm",", SysConfig-XML und CSS — in einem Schritt. Danach bauen Sie das Paket wie in ",[300,310,312],{"href":311},"\u002Fdocs\u002Fotobo-znuny-paket-bauen","OTOBO- & Znuny-Paket bauen"," beschrieben.",[28,315,317],{"id":316},"aktivieren","Aktivieren",[14,319,320,321,324,325,181],{},"Nach der Installation wählen Agenten den Skin unter ",[23,322,323],{},"Persönliche Einstellungen → Oberfläche",", oder Sie setzen den Default über ",[18,326,327],{},"Loader::Agent::DefaultSelectedSkin",[329,330,331],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":39,"searchDepth":81,"depth":81,"links":333},[334,335,336,337,338],{"id":30,"depth":81,"text":31},{"id":55,"depth":81,"text":56},{"id":184,"depth":81,"text":185},{"id":294,"depth":81,"text":295},{"id":316,"depth":81,"text":317},"Skins","Eigene Agent- und Customer-Skins für OTOBO, Znuny und OTRS CE erstellen: SysConfig-Loader-Einträge, Verzeichnisstruktur und CSS-Overrides.",false,"md",{},30,"\u002Fdocs\u002Fskin-entwicklung",{"title":5,"description":340},"docs\u002Fskin-entwicklung","got6xk1M7wNuTMj2ptA5cgTGQM6B2xzVOo5aeBr-Zcw",1785427360760]