Znuny Skins, Themes, and Design
It is possible to change the appearance of the Znuny ticket system by creating a new skin.
Changing the Znuny skin - theme setting
Section titled “Changing the Znuny skin - theme setting”Every Agent can choose which skin they want to use. After the Znuny installation, only the default skin is available. The Znuny skin defines the design of the interface. In their personal settings, one can find the option to replace their current skin with another skin.
Creating a new skin
Section titled “Creating a new skin”Changing CSS
Section titled “Changing CSS”If you have a docker Znuny installation, the skins can be found in the following folder: /var/lib/docker/volumes/znuny_opt_znuny /_data/var/ httpd/htdocs/skins/Agent otherwise in * *$Znuny_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME**
New folder
Section titled “New folder”If no skin has been added yet, you will only find the folder “default” in this path. To add a new skin, you must first add a new folder. For example, “my_skin”.
Changing the design
Section titled “Changing the design”To change the design, you can create the folder “css” inside the “my_skin” folder. Skins work by always loading the standard CSS skin. In your own skin, you can then override the values from the standard skin. For example, by overriding CSS classes from the default skin:
CSS from the standard skin: Skin/default/Core.css
.Navigation { height: 100px;}You could, for example, override it with: /* Skin/my_skin/Core.css
.Navigation { height: 30px;}After that, you need a configuration file in the folder $Znuny-HOME/Kernel/Config/Files/XML/{skinName}.xml.
This should have the following structure:
<?xml version="1.0" encoding="utf-8" ?><znuny_config version="2.0" init="Changes"> <ConfigItem Name="AgentLogo" Required="0" Valid="1"> <Description Translatable="0">The logo shown in the header of the agent interface. The URL to the image must be a relative URL to the skin image directory. </Description> <Group>Framework</Group> <SubGroup>Frontend::Agent</SubGroup> <Setting> <Hash> <Item Key="URL"> https://softoft.de/Znuny_Wortmarke_Sub_Digital_Blau_156hoch-zugeschnitten-300x113.png </Item> <Item Key="StyleTop">13px</Item> <Item Key="StyleRight">75px</Item> <Item Key="StyleHeight">67px</Item> <Item Key="StyleWidth">244px</Item> </Hash> </Setting> </ConfigItem>
<ConfigItem Name="Loader::Agent::Skin###001-softoftSkin" Required="0" Valid="1"> <Description Translatable="0"></Description> <Group>Framework</Group> <SubGroup>Frontend::Agent</SubGroup> <Setting> <Hash> <Item Key="InternalName">softoftSkin</Item> <Item Key="VisibleName">softoftSkin</Item> <Item Key="Description"></Item> <Item Key="HomePage"></Item> </Hash> </Setting> </ConfigItem></znuny_config>Frequently asked questions
What is the difference between Znuny skins and themes?
In Znuny, skins and themes serve distinct purposes in customizing the user interface. Skins primarily control the visual "look and feel" of the application, focusing on elements like colors, fonts, padding, and other CSS-related styles. When you create a custom skin, you are essentially overriding the default CSS rules to change how existing elements appear. Themes, on the other hand, are concerned with the overall layout and structure of the application. They involve customizing output templates (e.g., DTL files) to rearrange elements, add new sections, or modify the fundamental presentation of information. While the page focuses on CSS overrides for skins, understanding this distinction is crucial for comprehensive interface customization.
How can individual Znuny agents customize their interface appearance?
Each agent in Znuny has the flexibility to choose their preferred interface appearance by selecting a different skin. After a fresh Znuny installation, only the default skin is available. However, once additional skins are installed and registered, agents can easily switch between them through their personal settings within the agent interface. This option is typically found in the user's profile or preferences section, allowing for a personalized work environment without affecting other agents' choices. This feature enhances user comfort and can improve productivity by letting agents work with a visual style they find most appealing or functional.
Where are custom Znuny agent skins physically stored on the server?
The physical location of Znuny agent skins depends on your installation method. For a typical, non-Docker Znuny installation, skins are located under the $Znuny_HOME/var/httpd/htdocs/skins/Agent directory. If you are running Znuny via Docker, the skins reside within the Znuny volume at /var/lib/docker/volumes/znuny_opt_znuny/_data/var/httpd/htdocs/skins/Agent. To create a new custom skin, you would typically add a new folder (e.g., my_skin) within this Agent directory. This new folder will then contain your custom CSS files and any other assets specific to your skin, allowing Znuny to discover and load it.
What is the process for creating and activating a new custom skin in Znuny?
Creating and activating a new custom skin in Znuny involves several steps. First, you need to create a new folder for your skin within the Znuny skins directory, which is typically $Znuny_HOME/var/httpd/htdocs/skins/Agent or /var/lib/docker/volumes/znuny_opt_znuny/_data/var/httpd/htdocs/skins/Agent for Docker installations. Inside this new skin folder (e.g., my_skin), create a css subfolder. Here, you'll place your custom CSS files (e.g., Core.css) to override default styles. Finally, to register and activate your skin, you must create an XML configuration file in $Znuny_HOME/Kernel/Config/Files/XML/{skinName}.xml. This XML file registers the skin with Znuny and can also define other skin-specific settings like a custom agent logo. After these steps, the skin should be selectable by agents.
How do I override default CSS styles when creating a custom Znuny skin?
When developing a custom Znuny skin, the primary method for changing the design is by overriding the default CSS styles. Znuny's skinning mechanism works by loading the standard skin's CSS first, and then applying your custom skin's CSS on top. This means you only need to define the CSS rules you wish to change, rather than rewriting all styles. To do this, create a css folder within your new skin's directory (e.g., my_skin/css). Inside this css folder, you can create files like Core.css and add your custom CSS rules. For instance, if the default Core.css sets .Navigation { height: 100px; }, you can override it in your custom skin's Core.css with .Navigation { height: 30px; } to make the navigation bar shorter. This approach ensures that your custom skin only modifies what's necessary, inheriting the rest from the default.
What is the purpose and structure of the XML configuration file for registering a Znuny skin?
The XML configuration file is essential for registering your custom Znuny skin and defining its properties within the system. This file must be located in $Znuny_HOME/Kernel/Config/Files/XML/ and named after your skin (e.g., my_skin.xml). Its primary purpose is to inform Znuny about the existence of your new skin and to configure any specific settings associated with it. The file typically contains a ConfigItem for Loader::Agent::Skin, which includes crucial details like InternalName (the unique identifier for your skin) and VisibleName (how the skin appears in the agent's settings). Additionally, you can include an AgentLogo ConfigItem to specify a custom logo for the agent interface when this skin is active, including its URL, position, and dimensions. This XML file acts as the bridge between your physical skin files and Znuny's configuration system.