Salta ai contenuti
Webilia Docs

Listdom Customizer Settings Menu Documentation

Questi contenuti non sono ancora disponibili nella tua lingua.

The Customizer settings let you fine-tune Listdom’s visual style—from global colors and fonts to the appearance of buttons, forms, single listing pages, frontend dashboards, and profile layouts. These options help ensure Listdom matches your site’s branding and design needs.

  1. In your WordPress dashboard, go to Listdom → Settings → Customizer to open the Listdom Customizer panel.
  2. Select a section tab (e.g. General, Buttons, Forms, etc.) to view its customization options.
  3. Adjust the available options as needed. After making changes, click Save Changes to apply the new styles on your site.

General

Section titled “General”

The General section defines the primary colors, fonts, and spacing used throughout Listdom.

Colors

Section titled “Colors”
  • General Color: The primary accent color used across Listdom elements for highlights, icons, buttons, etc. (Default: #33c6ff)

Fonts

Section titled “Fonts”
  • Primary Font: The main font family for Listdom’s text elements. Choose a font family to override the default. (Default: Poppins)

Gaps

Section titled “Gaps”
  • Base Gap (Pixels): Specifies a base spacing unit in pixels. The system automatically generates a range of spacing values (margins/padding) from this base to keep layouts consistently scaled. (Default: 8px)

Buttons

Section titled “Buttons”

The Buttons section controls the styling of Listdom’s buttons, such as search, pagination, and call-to-action buttons. All button styles can optionally inherit settings from the General button style for consistency.

General Button

Section titled “General Button”

This is the base style for buttons, used as the default for other button types if inheritance is enabled.

Normal

Section titled “Normal”

Defines the button’s appearance in its normal (default) state:

  • Background Color 1: Primary background color of the button. (Default: #33c6ff)
  • Background Color 2: Secondary background color, used for gradients. (Default: #306be6)
  • Text Color: The button label text color. (Default: #ffffff)
  • Border: The button’s border style and radius. By default, no visible border (0px on all sides, style none) is applied, with a subtle rounded corner (5px radius).
  • Padding: Inner spacing of the button. (Default: 6px top/bottom and 20px left/right)
  • Typography: Font settings for the button text. By default, the text is centered with an inherited font, 15px size, and 32px line height.

Hover

Section titled “Hover”

Defines the button’s appearance on hover:

  • Background Color 1: Hover-state primary background color. (Default: #306be6)
  • Background Color 2: Hover-state secondary background color. (Default: #306be6)
  • Text Color: Hover-state text color. (Default: #ffffff)
  • Border: Hover-state border color and style. By default, this remains none.

(The General Button’s hover state inherits the same padding and typography as the Normal state.)

Search Button

Section titled “Search Button”

The Search button style applies to search form submit buttons. It is independent by default but can inherit from the General Button.

Normal

Section titled “Normal”
  • Background Color 1: Main background color for the search button.
  • Background Color 2: Secondary background color for the search button.
  • Text Color: Text color of the search button label. (Default: #ffffff)
  • Border: Border style for the search button. (Default: none)
  • Padding: Inner spacing for the search button. (Default: 9px top/bottom and 20px left/right)
  • Typography: Font settings for the search button text. (Inherits defaults from the General Button)

Hover

Section titled “Hover”
  • Background Color 1: Hover-state background color. (Default: #306be6)
  • Background Color 2: Secondary hover background color. (Default: #306be6)
  • Text Color: Hover-state text color. (Default: #ffffff)
  • Border: Hover-state border color/style. (Default: none)

(Hover state uses the same padding and typography as the Normal state for the Search button.)

Pagination Button

Section titled “Pagination Button”

This style is used for “Load More” and paginated navigation buttons. It can inherit from the General Button.

Normal

Section titled “Normal”
  • Background Color 1: Background color for pagination buttons. (Default: #e6f7ff)
  • Background Color 2: Secondary background color. (Default: #e6f7ff)
  • Text Color: Text color for pagination button labels. (Default: #0ab0fe)
  • Border: Border style and color. (Default: 1px solid border with color #bceaff and 4px radius)
  • Padding: Inner spacing for the button. (Default: 6px top/bottom, 20px left/right)
  • Typography: Font settings for the pagination button text. (Inherits general defaults)

Hover

Section titled “Hover”
  • Background Color 1: Hover-state background color. (Default: #306be6)
  • Background Color 2: Secondary hover background color. (Default: #306be6)
  • Text Color: Hover-state text color. (Default: #ffffff)
  • Border: Hover-state border. By default, the 1px solid border with #bceaff color is applied on hover.

(Padding and typography remain consistent between Normal and Hover states.)

Light Button

Section titled “Light Button”

A secondary button style with a lighter appearance. It can inherit from the General Button.

Normal

Section titled “Normal”
  • Background Color 1: Light button background color. (Default: #e6f7ff)
  • Background Color 2: Secondary background color. (Default: #e6f7ff)
  • Text Color: Text color for Light buttons. (Default: #0ab0fe)
  • Border: Border style and color. (Default: 1px solid border with color #bceaff and 4px corner radius)
  • Padding: Padding for Light buttons. (Default: 6px top/bottom, 20px left/right)
  • Typography: Font settings. (Inherits base defaults from General Button)

Hover

Section titled “Hover”
  • Background Color 1: Hover-state background color. (Default: #306be6)
  • Background Color 2: Secondary hover background color. (Default: #306be6)
  • Text Color: Hover-state text color. (Default: #ffffff)
  • Border: Hover-state border style/color. (Remains 1px solid #bceaff by default)

Solid Button

Section titled “Solid Button”

A prominent call-to-action style button. It can inherit from the General Button.

Normal

Section titled “Normal”
  • Background Color 1: Background color for Solid buttons. (Default: #33c6ff)
  • Background Color 2: Secondary background color. (Default: #33c6ff)
  • Text Color: Text color on Solid buttons. (Default: #ffffff)
  • Border: Border style and color. (Default: no border, 4px corner radius)
  • Padding: Inner spacing. (Default: 6px top/bottom, 20px left/right)
  • Typography: Font settings. (Inherits defaults from General Button)

Hover

Section titled “Hover”
  • Background Color 1: Hover-state background color. (Default: #29a6e1)
  • Background Color 2: Secondary hover background color. (Default: #29a6e1)
  • Text Color: Hover-state text color. (Default: #eeeeee)
  • Border: Hover-state border. (Default: no border)

(Typography and padding carry over from the Normal state.)

Forms

Section titled “Forms”

This section styles input forms used in Listdom, including fields, containers, and icons.

General Forms

Section titled “General Forms”

Applies to basic form fields and inputs across the plugin.

Inputs

Section titled “Inputs”

Customize standard input fields (text fields, textareas, selects):

Normal
Section titled “Normal”
  • Background Color: The input field’s background color. (Default: #ffffff)
  • Text Color: Color of the input text. (Default: #000000)
  • Placeholder Color: Color of placeholder text within inputs. (Default: #a4a8b5)
  • Border: The input’s border style, color, and radius. (Default: 1px solid border with color #f4f5f7 and 10px radius)
  • Typography: Font settings for input text. (Default: 12px size with a 26px line height)
Hover/Focus
Section titled “Hover/Focus”
  • Background Color: Background color when the input is hovered or focused. (Default: #ffffff)
  • Border: Border color on hover/focus. (Default: #306be6)

Search Forms

Section titled “Search Forms”

Styles specific to Listdom’s search bar and search filters.

Form

Section titled “Form”
  • Background Color: The background color of the overall search form container. (Default: #ffffff)

Icon

Section titled “Icon”
  • Icon Color: The color of icons used in the search form. (Default: #33c6ff)

Inputs

Section titled “Inputs”

Customize the search form’s input field styles:

Normal
Section titled “Normal”
  • Background Color: Input background color in search forms. (Default: #ffffff)
  • Text Color: Input text color. (Default: #000000)
  • Placeholder Color: Placeholder text color for search inputs. (Default: #a4a8b5)
  • Border: Border style for search inputs. (Defaults to 1px solid #f4f5f7 with 10px radius)
  • Typography: Font settings for search input text. (Default: 12px size, 26px line height)
Hover/Focus
Section titled “Hover/Focus”
  • Background Color: Input background on hover/focus. (Default: #ffffff)
  • Border: Border color on focus. (Default: #306be6)

Authentication Forms

Section titled “Authentication Forms”

Styles for user authentication forms (login/register).

Box

Section titled “Box”
  • Background Color: Background color of the authentication form wrapper. (Default: transparent)
  • Padding: Padding inside the auth form box. (Default: 0px on all sides)
  • Border: Border around the form box. (Default: none)

Tabs

Section titled “Tabs”

For forms with tabbed navigation (e.g., Login/Register):

Normal
Section titled “Normal”
  • Background Color 1: Tab background color. (Default: #ffffff)
  • Background Color 2: Secondary tab background color. (Default: #ffffff)
  • Text Color: Tab text color when not active. (Default: #306be6)
  • Border: Tab border. (Default: 1px solid #306be6 with 4px radius)
  • Padding: Padding around the tab label. (Default: 0px top/bottom and 16px left/right)
  • Typography: Font settings for tab labels. (Default: medium weight, 14px size, 38px line height)
Hover
Section titled “Hover”
  • Background Color 1: Hover/active tab background. (Default: #306be6)
  • Background Color 2: Secondary hover/active tab background. (Default: #306be6)
  • Text Color: Hover/active tab text color. (Default: #ffffff)
  • Border: Hover/active tab border. (Defaults to the 1px solid style)
Active
Section titled “Active”
  • Background Color 1: Active tab background. (Default: #33c6ff)
  • Background Color 2: Secondary active tab background. (Default: #306be6)
  • Text Color: Active tab text color. (Default: #ffffff)
  • Border: Active tab border. (Default: none)

Labels

Section titled “Labels”
  • Text Color: Color of form field labels (e.g., “Username”). (Default: #000000)
  • Typography: Font settings for labels. (Default: 12px size, 26px line height, left-aligned)

Single Listing

Section titled “Single Listing”

Customizes the layout and style of individual listing pages.

Features

Section titled “Features”

Customize how listing Features (amenities or attributes) are displayed.

Icons

Section titled “Icons”
  • Icon Background Color: Background color for feature icons. (Default: #e6f7ff)
  • Icon Text Color: Color of the feature icon itself. (Default: #0ab0fe)

Reviews

Section titled “Reviews”

Customize the appearance of the Reviews section.

Tabs

Section titled “Tabs”

For tab navigation in the Reviews section:

Normal
Section titled “Normal”
  • Background Color 1: Reviews tab background. (Default: #ffffff)
  • Background Color 2: Secondary reviews tab background. (Default: #ffffff)
  • Text Color: Reviews tab text color when not active. (Default: #306be6)
  • Border: Tab border in normal state. (Default: 1px solid #306be6 with 4px radius)
  • Padding: Padding for review tabs. (Default: 0px top/bottom, 16px left/right)
  • Typography: Font settings for review tab text. (Default: 14px size, centered)
Hover / Active
Section titled “Hover / Active”
  • Background Color 1: Tab background when hovered or active. (Default: #0ab0fe)
  • Background Color 2: Secondary background when hovered/active. (Default: #0ab0fe)
  • Text Color: Tab text color on hover/active. (Default: #ffffff)
  • Border: Border for hover/active tab, continuing the 1px solid style.

Price

Section titled “Price”

Customize the display style of the listing Price element.

Price

Section titled “Price”
Normal
Section titled “Normal”
  • Background Color: Background color of the price badge/label. (Default: #0ab0fe)
  • Text Color: Text color of the price amount. (Default: #e6f7ff)
  • Typography: Font settings for the price text. (Default: 16px size, 25px line height)
  • Border: Border around the price label. (Default: no border, 27px radius)
  • Padding: Padding around the price text. (Default: 6px top/bottom and 20px left/right)
Hover
Section titled “Hover”
  • Background Color: Background color on hover. (Default: #0ab0fe)
  • Text Color: Text color on hover. (Default: #e6f7ff)
  • Border: Border on hover. (Defaults to no border, 27px radius)
  • Padding: Padding on hover. (Defaults to 6px by 20px)
Section titled “Breadcrumb”

Style the breadcrumb navigation on single listing pages.

Home

Section titled “Home”
  • Icon Gap (Pixels): Spacing between the home icon and text. (Default: 6px)
  • Text Color: Text color for the “Home” link. (Default: #0ab0fe)
  • Icon Color: Color of the home icon. (Default: #0ab0fe)
  • Typography: Font settings for the Home link. (Default: Poppins, 16px size, 25px line height)

Taxonomy

Section titled “Taxonomy”
  • Text Color: Text color for the category/taxonomy link. (Default: #0ab0fe)
  • Typography: Font settings for taxonomy text. (Default: Poppins, 16px size, 25px line height)

Current

Section titled “Current”
  • Text Color: Text color for the current page item (the listing title). (Default: #444444)
  • Typography: Font settings for the current item. (Default: Poppins, bolder weight, 16px size, 25px line height)

Separator

Section titled “Separator”
  • Text Color: Color of the breadcrumb separator character (e.g., ”/”). (Default: #999999)

Frontend Dashboard

Section titled “Frontend Dashboard”

Customizes the appearance of the front-end user dashboard.

Section titled “Menu”

Styles the sidebar menu or navigation items in the dashboard.

Normal

Section titled “Normal”
  • Container Background Color: Background of the menu container panel. (Default: #0ab0fe)
  • Background Color: Background of individual menu items. (Default: #0ab0fe)
  • Text Color: Color of the menu item text. (Default: #ffffff)
  • Icon Color: Color of icons next to menu text. (Default: #ffffff)
  • Border: Border style for menu items. (Default: 1px solid #0ab0fe, 5px radius)
  • Typography: Font settings for menu text. (Default: 14px size, 26px line height)

Hover/Focus

Section titled “Hover/Focus”
  • Background Color: Background color on hover or for the active menu item. (Default: #24b7ff)
  • Text Color: Text color on hover/active. (Default: #ffffff)
  • Border: Border color on hover/active. (Default: #ffffff29)

Profile

Section titled “Profile”

Styles the front-end user profile page and the user directory.

Profile Page

Section titled “Profile Page”

Styles for the user’s “My Profile” view.

Sections

Section titled “Sections”
Container
Section titled “Container”
  • Container Background Color: Background color of profile page sections. (Default: #ffffff)
  • Border: Border around the section container. (Default: no border, 5px radius)
  • Padding: Inner spacing for each profile section container. (Default: 30px on all sides)
Title
Section titled “Title”
  • Text Color: Color of section titles (e.g., “About Me”). (Default: #000000)
  • Typography: Font for section titles. (Default: Poppins, 23px size, 32px line height, medium weight)

Content

Section titled “Content”
Author Name
Section titled “Author Name”
  • Text Color: Color of the profile author’s name. (Default: #000000)
  • Typography: Font settings for the author name. (Default: Poppins, 23px size, 26px line height, medium weight)
Job Title
Section titled “Job Title”
  • Text Color: Color of the profile author’s job title. (Default: #000000)
  • Typography: Font settings for the job title. (Default: Poppins, 16px size, regular weight)
Count
Section titled “Count”
  • Text Color: Color for count numbers (e.g., number of listings). (Default: #7e8086)
  • Icon Color: Color of icons associated with counts. (Default: #0ab0fe)
  • Typography: Font settings for count text. (Default: Poppins, 16px size, 32px line height, medium weight)
Contact Info
Section titled “Contact Info”
  • Text Color: Color of the contact information text. (Default: #333333)
  • Icon Color: Color of contact info icons. (Default: #000000)
  • Social Icon Color: Color of social media icons. (Default: #000000)
  • Typography: Font settings for contact info text. (Default: Poppins, 16px size, 32px line height)
Bio
Section titled “Bio”
  • Text Color: Color of the biography/description text. (Default: #7e8086)
  • Typography: Font settings for the bio text. (Default: Poppins, 16px size, 25px line height, justified)

Users

Section titled “Users”

Styles for the User Directory page (list of user profile cards).

Cards

Section titled “Cards”
Item
Section titled “Item”
  • Container Background Color: Background color of each user card. (Default: #ffffff)
  • Border: Border of the user card. (Default: 1px solid #eeeeee, 30px radius)
  • Padding: Inner padding of the card. (Default: 20px on all sides)
Author Name
Section titled “Author Name”
  • Text Color: Color of the user’s name on the card. (Default: #000000)
  • Typography: Font for the name. (Default: Poppins, 18px size, 25px line height, medium weight)
Job Title
Section titled “Job Title”
  • Text Color: Color of the user’s job title on the card. (Default: #666666)
  • Typography: Font for the job title. (Default: Poppins, 16px size, 25px line height)
Contact Info
Section titled “Contact Info”
  • Icon Color: Color of contact info icons on the user card. (Default: #333333)
Bio
Section titled “Bio”
  • Text Color: Color of the short bio on the user card. (Default: #666666)
  • Typography: Font for the bio snippet. (Default: Poppins, 14px size, 25px line height, justified)