Configuring style for panels and panel elements | Zoho Creator Help

Configuring style for panels and panel elements

What does this page cover
Learn to configure the style properties of your panels to make them look visually appealing and aligned with the branding theme of your application.
Availability
  1. Panels can be created in all plans of Creator.
  2. Only the super admin, admins, and developers can create and manage panels.

1. Setting up style for panels

1.1. Steps to configure style

You can configure style for panels as a whole, for panel containers, or for the panel elements Text, Image, and Button.

1. Navigate to the page builder of the required page and click Panel on the left pane.
2. Drag and drop a panel template from the list that appears alongside onto the building space. The Panel Configuration pane opens.
Notes
Note: If the panel was previously created, select the panel from the page builder and click Configure to open the Panel Configuration pane.
3. Navigate to the Style tab on the section on the right.
4. You can style panels, panel containers, and panel elements to provide a cohesive and stylish look to your panels:
  1. Panel/Panel Containers
This table lists all the style properties for panels and panel containers, and their configuration steps.
Property
Steps
Column align
(Applicable for panels and panel containers)
  1. Panel - Align the panel containers in different places within the panel.
  2. Panel container - Align the panel elements in different places within the panel container.
The available positions are Top left, Top, Top right, Left, Center, Right, Bottom left, Bottom, Bottom right.
Swap
(Applicable for panel containers)
Swap the selected panel container with the one on its right or left.
Padding
(Applicable for panels and panel containers)
Enter the padding values for all four sides to modify the space present between:
  1. Panel - The space between content and the border of the element.
  2. Panel container - The space between the container and the border of the element.
Background color
(Applicable for panels and panel containers)
Customize the background color of the panel/panel container.
Background
(Applicable for panels and panel containers)
Set a background image for the panel/panel container from My library or a Web link.
You can further customize the:
  1. Scaling - You can choose to:
    1. Fill - Enlarges the image to fill the whole space.
    2. Fit - Resizes the image to fit within the outline of the container without cutting any portion out.
    3. Tile - Repeats the image horizontally or vertically to fill the space.
Notes
Note: 
  1. If you choose Fill or Fit, you can position the image to the left, right, top, bottom, or to the center of the space.
  2. If you choose Tile, you can decide if the image needs to be repeated horizontally, vertically, or both.
  3. By default, both are selected. If you select neither, the last selection before that is automatically chosen.
  1. Overlay - Enable overlay for the background image with a color of your choice. The intensity of the overlay color can also be customized from 0% to 99%.
Notes
Note: If the panel template has a header or a footer, you can configure its Height property. It can either be:
  1. Fill - Adjusts the header/footer height just enough to cover the height of the label.
  2. Fixed - Set a custom height for the header/footer in pixels.
The default choice is set to Fixed with a pixel value of 50.
  1. Panel Elements
This table lists all the style properties for panel elements and their configuration steps.
Property
Panel Element
Steps
Button type
Button
Choose if the button should be Rectangular or Rounded.
Font family
  1. Text
  2. Button's label
Choose a font for the text values or label.
Style
  1. Text
  2. Button's label
Customize the style properties such as emboldening, italicizing, underlining, and changing letter casing.
Color
  1. Text
  2. Image
  3. Button
Select a color for the font, background, and for an image's background if it is included.
Font size
  1. Text
  2. Button's label
Pick the font size from preset options 12 - 40 px, listed in the dropdown. Click on the numeric value to set a custom value anywhere between 1 and 99 pixels.
Margin
  1. Text
  2. Image
  3. Button
Determine the distance between two panel elements using the margin values.
Shape
Image
Choose if the shape of the image should be Square, Rounded, or Circle.
Shape size
Image
Determine the size of the image shape from Small, Medium, Large, Custom.
Notes
Note: If Custom is chosen, specify the Width and Height values in pixels.
 
Icon size
Image (only for built-in icons)
Choose the size of the icon from the preset options 12 - 40 px, listed in the dropdown. Click on the numeric value to set a custom value anywhere between 1 and 99 pixels.
  1. Understanding panels
  2. Adding and managing panel elements
  3. Configuring display for panel and panel elements
  4. Configuring action for panels and panel elements
What's next
Previous
What's next
Learn about boards in Zoho Creator that allow you to create leaderboards, organize your projects efficiently, or view business health.
Previous
Learn to configure an action that will get executed when a panel or panel element is clicked on in the live mode of the application.