Customize Component

From Documentation


We have introduced how to do partial customization with sclass for specific component. Here we will introduce how to customize component style by LESS and make it the default style inside the project. And in subsections are samples to show customizing component in details.

Step to Customize Component by LESS

Here we will use Window component as an example to demonstrate how to customize component.

  • 1. Link to Window Component page to check the DOM structure and LESS content.
  • 2. Create window.less file under less folder in ZK web project with LESS content found from previous step.
  • The project structure (here we use maven project)
Styleguide-component.png
  • Copy LESS content into window.less file from Github.
  • 3. Tweak window style and Check window style at runtime by ZK Less Servlet.
  • Modify window.less to customize look and feel of Window component, for example, change background color and padding by re-define LESS variables as follows:
@import "~./zul/_header.less";

@windowBackgroundColor: #D9E5EF;
@windowFramePadding: 8px;

/* omitted */
  • Follow this instruction to add ZKLessServlet to web.xml to compile less at runtime.
  • Use window.less in window.zul page as follows to check the style modification.
<?link rel="stylesheet" href="../less/window.less"?>
<zk>
    <window title="Customize Window">
        Window Content
    </window>
</zk>
  • Once the server is started, window.less will be compiled into window.css.dsp in the same folder.
  • Continue to customize Window component and check the style changes by simply refreshing browser.
  • 4. Use final style in production.
    • Remove <?link rel="stylesheet" href="../less/window.less"?> in window.zul page.
    • Remove ZK Less Servlet settings in web.xml.
    • Enable DSP Loader Servlet in web.xml
    • Put window.css.dsp files (can be found under less folder) wherever you want. Then add the following settings in zk.xml file.
<desktop-config>
    <theme-uri>/less/window.css.dsp</theme-uri>
</desktop-config>





Last Update : 2013/11/07

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.