Skip to content


  1. Home
  2. Docs
  3. WooRewards
  4. Administration & General Settings
  5. The Styling Tool

The Styling Tool

For our plugins, we developed the “StyGen” tool. This tool allows you to style and customize all the elements you present to your visitors. StyGen’s interface is clear and intuitive and offers many styling possibilities. You don’t need any coding knowledge to use it. Everytime you change a value, you can see its result in real time.

StyGen Features

  • THE MAIN CANVAS: Located in the middle, it allows you to see in real time the changes you make to the customizable elements. You can select the elements you wish to customize by clicking on them in the canvas.
  • THE STYLES LIST: Located to the left, this list presents a list of elements and styles you can modify. Pass your mouse over an element of the list to preview its position in the main canvas. Select an element in the list to start customizing the associated element(s). For the elements with a feather icon on the left, you can edit the content in addition to styling it.
  • THE STYLING PANELS: The styling panels is in the top part and only appear when you select an element in the main canvas or the styles list. For instance, on the image above, I has to select the main border element.When you select an element, its actual styling values are loaded in the styling panels. You can then change them or apply new values and see the result in the main canvas.
  • THE CONTROL PANEL: You will find this panel at the bottom of the tool. If you think you messed things up, you can click the “Reset Style” button to go reload the basic styling rules. If you’re familiar with CSS styling, you can switch to the CSS editor and add/modify CSS rules.

Your modifications will only be saved if you click the “Save Changes” on the bottom right of the page. Therefore, don’t forget to save your settings often.

Was this article helpful to you? Yes No
Scroll To Top