WP Residence Help WP Residence Help

  • WPRESIDENCE
  • Video Tutorials
  • Client Support
  • API
Home / Technical how to | Custom Code / WP Estate Theme Options Styles Documentation – Part 2 (Options 21-40)

WP Estate Theme Options Styles Documentation – Part 2 (Options 21-40)

558 views 0

21. Header Background Color

  • Theme Options Title: “Header Background Color”
  • Option Name: wp_estate_header_color
  • CSS Variable: –wp-estate-header-color-option
  • Purpose: Controls background color for standard & sticky menus
  • Default Value: #ffffff

SCSS Usage:

.header-wrapper {
    background-color: var(--wp-estate-header-color-option, var(--wp-estate-header-color));
}

22. Menu Font Color

  • Theme Options Title: “Header Font Color”
  • Option Name: wp_estate_menu_font_color
  • CSS Variable: –wp-estate-menu-font-color-option
  • Purpose: Text Menu Font Color
  • Default Value: #434a54

SCSS Usage:

.menu-item a {
    color: var(--wp-estate-menu-font-color-option, var(--wp-estate-menu-font-color));
}

23. Sticky Menu Font Color

  • Theme Options Title: “Sticky Menu Font Color”
  • Option Name: wp_estate_sticky_menu_font_color
  • CSS Variable: –wp-estate-sticky-menu-font-color-option
  • Purpose: Font color for sticky menu items
  • Default Value: #434a54

SCSS Usage:

.sticky-header .menu-item a {
    color: var(--wp-estate-sticky-menu-font-color-option, var(--wp-estate-sticky-menu-font-color));
}

24. Header Hover Font Color

  • Theme Options Title: “Header Hover Font Color”
  • Option Name: wp_estate_top_menu_hover_font_color
  • CSS Variable: –wp-estate-top-menu-hover-font-color-option
  • Purpose: Font color for menu items on hover
  • Default Value: #0073e1

SCSS Usage:

.menu-item a:hover {
    color: var(--wp-estate-top-menu-hover-font-color-option, var(--wp-estate-top-menu-hover-font-color));
}

25. Active Menu Font Color

  • Theme Options Title: “Active Menu Font Color”
  • Option Name: wp_estate_active_menu_font_color
  • CSS Variable: –wp-estate-active-menu-font-color-option
  • Purpose: Font color for active menu items
  • Default Value: #0073e1

SCSS Usage:

.menu-item.current-menu-item a {
    color: var(--wp-estate-active-menu-font-color-option, var(--wp-estate-active-menu-font-color));
}

26. Header Hover Background Color

  • Theme Options Title: “Header Hover Background Color”
  • Option Name: wp_estate_top_menu_hover_back_font_color
  • CSS Variable: –wp-estate-top-menu-hover-back-font-color-option
  • Purpose: Background color for menu items on hover
  • Default Value: #f1f3f7

SCSS Usage:

.menu-item a:hover {
    background-color: var(--wp-estate-top-menu-hover-back-font-color-option, var(--wp-estate-top-menu-hover-back-font-color));
}

27. Transparent Menu Font Color

  • Theme Options Title: “Transparent Menu Font Color”
  • Option Name: wp_estate_transparent_menu_font_color
  • CSS Variable: –wp-estate-transparent-menu-font-color-option
  • Purpose: Font color when header is transparent
  • Default Value: #ffffff

SCSS Usage:

.transparent-header .menu-item a {
    color: var(--wp-estate-transparent-menu-font-color-option, var(--wp-estate-transparent-menu-font-color));
}

28. Transparent Menu Hover Font Color

  • Theme Options Title: “Transparent Menu Hover Font Color”
  • Option Name: wp_estate_transparent_menu_hover_font_color
  • CSS Variable: –wp-estate-transparent-menu-hover-font-color-option
  • Purpose: Hover font color when header is transparent
  • Default Value: #ffffff

SCSS Usage:

.transparent-header .menu-item a:hover {
    color: var(--wp-estate-transparent-menu-hover-font-color-option, var(--wp-estate-transparent-menu-hover-font-color));
}

29. Dropdown Menu Background Color

  • Theme Options Title: “Dropdown Menu Background Color”
  • Option Name: wp_estate_menu_item_back_color
  • CSS Variable: –wp-estate-menu-item-back-color-option
  • Purpose: Background color for dropdown menus
  • Default Value: #ffffff

SCSS Usage:

.sub-menu {
    background-color: var(--wp-estate-menu-item-back-color-option, var(--wp-estate-menu-item-back-color));
}

30. Dropdown Menu Item Font Color

  • Theme Options Title: “Dropdown Menu Item Font Color”
  • Option Name: wp_estate_menu_items_color
  • CSS Variable: –wp-estate-menu-items-color-option
  • Purpose: Font color for items in dropdown menu
  • Default Value: #434a54

SCSS Usage:

.sub-menu .menu-item a {
    color: var(--wp-estate-menu-items-color-option, var(--wp-estate-menu-items-color));
}

31. Dropdown Menu Hover Font Color

  • Theme Options Title: “Dropdown Menu Item Hover Font Color”
  • Option Name: wp_estate_menu_hover_font_color
  • CSS Variable: –wp-estate-menu-hover-font-color-option
  • Purpose: Hover text color for dropdown menu items
  • Default Value: #0073e1

SCSS Usage:

.sub-menu .menu-item a:hover {
    color: var(--wp-estate-menu-hover-font-color-option, var(--wp-estate-menu-hover-font-color));
}

32. Dropdown Menu Hover Background Color

  • Theme Options Title: “Dropdown Menu Item Hover Background Color”
  • Option Name: wp_estate_menu_hover_back_color
  • CSS Variable: –wp-estate-menu-hover-back-color-option
  • Purpose: Hover background color for dropdown menu item
  • Default Value: #f1f3f7

SCSS Usage:

.sub-menu .menu-item a:hover {
    background-color: var(--wp-estate-menu-hover-back-color-option, var(--wp-estate-menu-hover-back-color));
}

33. Dropdown Menu Border Color

  • Theme Options Title: “Dropdown Menu Item Border Color”
  • Option Name: wp_estate_menu_border_color
  • CSS Variable: –wp-estate-menu-border-color-option
  • Purpose: Border color for dropdown menu items
  • Default Value: #f1f3f7

SCSS Usage:

.sub-menu .menu-item {
    border-color: var(--wp-estate-menu-border-color-option, var(--wp-estate-menu-border-color));
}

34. Mobile Header Background Color

  • Theme Options Title: “Mobile header background color”
  • Option Name: wp_estate_mobile_header_background_color
  • CSS Variable: –wp-estate-mobile-header-background-color-option
  • Purpose: Background color for mobile header
  • Default Value: #ffffff

SCSS Usage:

.mobile_header {
    background-color: var(--wp-estate-mobile-header-background-color-option, var(--wp-estate-mobile-header-background-color));
}

35. Mobile Header Icon Color

  • Theme Options Title: “Mobile header icon color”
  • Option Name: wp_estate_mobile_header_icon_color
  • CSS Variable: –wp-estate-mobile-header-icon-color-option
  • Purpose: Color for icons in mobile header
  • Default Value: #434a54

SCSS Usage:

.mobile_header .mobile-trigger i {
    color: var(--wp-estate-mobile-header-icon-color-option, var(--wp-estate-mobile-header-icon-color));
}

36. Mobile Menu Font Color

  • Theme Options Title: “Mobile menu font color”
  • Option Name: wp_estate_mobile_menu_font_color
  • CSS Variable: –wp-estate-mobile-menu-font-color-option
  • Purpose: Font color for mobile menu items
  • Default Value: #434a54

SCSS Usage:

.mobile_menu a {
    color: var(--wp-estate-mobile-menu-font-color-option, var(--wp-estate-mobile-menu-font-color));
}

37. Mobile Menu Hover Font Color

  • Theme Options Title: “Mobile menu hover font color”
  • Option Name: wp_estate_mobile_menu_hover_font_color
  • CSS Variable: –wp-estate-mobile-menu-hover-font-color-option
  • Purpose: Hover font color for mobile menu items
  • Default Value: #0073e1

SCSS Usage:

.mobile_menu a:hover {
    color: var(--wp-estate-mobile-menu-hover-font-color-option, var(--wp-estate-mobile-menu-hover-font-color));
}

38. Mobile Menu Item Hover Background Color

  • Theme Options Title: “Mobile menu item hover background color”
  • Option Name: wp_estate_mobile_item_hover_back_color
  • CSS Variable: –wp-estate-mobile-item-hover-back-color-option
  • Purpose: Background color for mobile menu items on hover
  • Default Value: #f1f3f7

SCSS Usage:

.mobile_menu a:hover {
    background-color: var(--wp-estate-mobile-item-hover-back-color-option, var(--wp-estate-mobile-item-hover-back-color));
}

39. Mobile Menu Background Color

  • Theme Options Title: “Mobile menu background color”
  • Option Name: wp_estate_mobile_menu_backgound_color
  • CSS Variable: –wp-estate-mobile-menu-background-color-option
  • Purpose: Background color for mobile menu
  • Default Value: #ffffff

SCSS Usage:

.mobile_menu {
    background-color: var(--wp-estate-mobile-menu-background-color-option, var(--wp-estate-mobile-menu-background-color));
}

40. Mobile Menu Border Color

  • Theme Options Title: “Mobile menu item border color”
  • Option Name: wp_estate_mobile_menu_border_color
  • CSS Variable: –wp-estate-mobile-menu-border-color-option
  • Purpose: Border color for mobile menu items
  • Default Value: #e7e9ef

SCSS Usage:

.mobile_menu li {
    border-color: var(--wp-estate-mobile-menu-border-color-option, var(--wp-estate-mobile-menu-border-color));
}

Technical how to | Custom Code

Related Articles

  • How to Add Custom Fields to the Login, Register and Forgot Password Forms
  • Technical: Change the Schedule Tour Email Text and the Form Default Message
  • Property list filter customization
  • Technical – How to Change the Minimum Image Dimensions for Property Uploads in WPResidence
MLSImportWordPress IDX Plugin for MLS ListingsImport MLS listings into your WordPress website, customize your property pages, and keep your inventory updated.Start free 30-day trial →

Help Categories

  • 111 Installation & Changelog
  • 19Agent, Agency & Developers
  • 5Blog Posts & Blog Lists
  • 14Footer
  • 38Header
  • 2IDX & MLSImport
  • 23Maps & Location Settings
  • 50Multilingual Websites – WPEstate Translate (Included)
  • 21Pages & Page Templates
  • 4Payments & Monetization
  • 20Property Lists, Categories & Archive
  • 38Property Single Page
  • 32Search & Filtering
  • 170Technical how to | Custom Code
  • 9Technical: Actions and filters
  • 6Technical: Child Theme
  • 86Theme Options & Global Settings
  • 6Theme Translation & Localization
  • 28Third Party Plugins Compatible
  • 16WPBakery Shortcodes
  • 51WPResidence / WPEstate CRM
  • 9WPResidence Elementor Studio
  • 39WPResidence Elementor Widgets
  • 79WPResidence FAQ

Join Us On

Powered by WP Estate - All Rights Reserved
  • WPRESIDENCE
  • Video Tutorials
  • Client Support
  • API