Documentation: Appearance Settings
Common Style
Inner Cell Padding
Options: Select the unit for padding values (px, %, em) and set the padding for each side of the cell (top, right, bottom, left).
Example:
- Unit:
px - Top:
10, Right:10, Bottom:10, Left:10
Border Type
Options: Select the type of border for the table.
Values: None, Solid, Dashed, Dotted, Double
Upon Selection:
- Border Width: Set the width of the border in the selected unit.
Example:
2px - Border Color: Choose a color for the border.
Example:
#000000
Header Style
Background Color
Options: Set the background color for the table header.
Example: #f8f8f8
Text Color
Options: Set the text color for the table header.
Example: #333333
Text Align
Options: Set the alignment of text within the header cells.
Values: Left, Center, Right, Justify
Custom Typography
Select Font: Choose a font for the header text.
Example:
Arial, sans-serifFont Size: Set the font size for the header text.
Example:
16pxFont Weight: Set the weight of the font.
Values: Normal, Bold, Thin, Extra Light, Light, Medium, Semi Bold, Extra Bold, Black
Text Transform: Set the text transformation.
Values:
NormalUppercaseLowercaseCapitalize
Font Style: Set the font style.
Values:
NormalItalicOblique
Decoration: Set the text decoration.
Values:
NoneUnderlineOverlineLine-through
Line Height: Set the line height for the header text.
Example:
1.5Letter Spacing: Set the letter spacing for the header text.
Example:
0.05em
Body Style
Text Align
Options: Set the alignment of text within the body cells.
Values: Left, Center, Right, Justify
Vertical Align
Options: Set the vertical alignment of text within the body cells.
Values:
TopMiddleBottom
Text Color
Options: Set the text color for the body cells.
Example: #555555
Background Color
Options: Set the background color for the body cells.
Example: #ffffff
Stripped Background
Enable or disable stripped backgrounds for rows and set the colors.
Stripped Background Color: Set the background color for stripped rows.
Example:
#f9f9f9Stripped Text Color: Set the text color for stripped rows.
Example:
#666666
Custom Typography
Select Font: Choose a font for the body text.
Example:
Arial, sans-serifFont Size: Set the font size for the body text.
Example:
14pxFont Weight: Set the weight of the font.
Values:
NormalBoldBolderLighter- Specific numeric values (e.g.,
400,700)
Text Transform: Set the text transformation.
Values:
NoneUppercaseLowercaseCapitalize
Font Style: Set the font style.
Values:
NormalItalicOblique
Decoration: Set the text decoration.
Values:
NoneUnderlineOverlineLine-through
Line Height: Set the line height for the body text.
Example:
1.5Letter Spacing: Set the letter spacing for the body text.
Example:
0.05em
Body Link Style
Link Color
Options: Set the color for links in the body cells.
Example: #007bff
Link Hover Color
Options: Set the color for links when hovered over.
Example: #0056b3
Stripped Link Color
Options: Set the color for links in stripped rows.
Example: #0062cc
Stripped Link Hover Color
Options: Set the color for links in stripped rows when hovered over.
Example: #004085
Rating Style
Active Star Color
Options: Set the color for active (filled) stars in the rating system.
Example: #ffcc00
Background Star Color
Options: Set the color for inactive (empty) stars in the rating system.
Example: #e0e0e0
Add to Cart Button Style
Text Color
Options: Set the text color for the “Add to Cart” button.
Example: #ffffff
Background Color
Options: Set the background color for the “Add to Cart” button.
Example: #28a745
Active Text Color
Options: Set the text color for the “Add to Cart” button when active.
Example: #ffffff
Active Background Color
Options: Set the background color for the “Add to Cart” button when active.
Example: #218838
Font Size
Options: Set the font size for the “Add to Cart” button text.
Example: 16px
Padding
Options: Set the padding for the “Add to Cart” button.
Example: 10px 20px 10px 20px
Border Size
Options: Set the border size (px) for the “Add to Cart” button.
Example: 2
Border Color
Options: Set the border color for the “Add to Cart” button.
Example: #28a745
Active Border Color
Options: Set the border color for the “Add to Cart” button when active.
Example: #218838
Border Radius
Options: Set the border radius(px) for the “Add to Cart” button.
Example: 4
Pagination Style
Pagination Text Color
Options: Set the text color for pagination links.
Example: #000000
Pagination Background Color
Options: Set the background color for pagination links.
Example: #f1f1f1
Pagination Active Text Color
Options: Set the text color for the active pagination link.
Example: #ffffff
Pagination Active Background Color
Options: Set the background color for the active pagination link.
Example: #007bff
All to Cart Button Style
Button Text Color
Options: Set the text color for the “All to Cart” button.
Example: #ffffff
Button Background Color
Options: Set the background color for the “All to Cart” button.
Example: #28a745
*** All Other settings for All to Cart will inherit from Add to cart button
Conclusion
This documentation covers the appearance settings for configuring your table plugin. Adjust these settings to enhance the look and feel of your tables to match your website’s design. If you have any further questions or need additional help, please refer to our support resources.