Phox Docs

Color Options

Last update: 7 min read

Color

This is probably the most powerful options section in theme options panel. You can set up any color for any part of your page.

Overview

Top Header

  • Background – Choose Left and Right Background Gradient Colors.
  • Bottom Border Color – enter bottom border color.
  • Menu | Link Color – enter the top header menu link color.
  • Menu | Hover Link Color – enter the top header menu link hover color.
  • Social Media | Icon Color – enter social icon color.
  • Social Media | Icon Hover Color – enter social icon hover color.
  • Shortcuts | Icon Color – enter shortcuts icon color.
  • Shortcuts | Icon Hover Color – enter shortcuts icon hover color.
  • Shortcuts | Left Border – enter shortcuts left border color.

Header

  • Background – Choose Left and Right Background Gradient Colors.
  • Bottom Border Color – enter bottom border color.
  • Sticky Header | Bottom Border Color – enter bottom border color if you enable sticky header.
  • Link Color – enter the main menu link color.
  • Hover Link Color – enter the main menu link hover color.
  • Active Link Color – enter the active link color.
  • Link Color – enter the submenu link color.
  • Hover Link Color – enter the submenu link hover color.
  • Border Color – enter the link border color.

Mega Menu

  • Heading Color – enter the heading text color.
  • Heading Hover Color – enter the heading text hover color.
  • Heading Bottom Border Color – enter the heading text bottom border color.

Responsive Menu

  • Switch Button – enter the switch button icon color.
  • Switch Button Inside Overlay Menu – enter the switch button icon color in Overlay menu.
  • Overlay Menu Background – enter the Overlay menu Background color.
  • Overlay Menu Link – enter the overlay menu link color.
  • Overlay Menu Hover Link – enter the overlay menu link hover color.
  • Overlay Menu Active Link – enter the overlay menu link active color.
  • Border Color – enter the link bottom border color.
  • Sub Menu Link Color – enter the submenu link color.
  • Sub Menu Hover Link Color – enter the submenu link hover color.

Headings

  • Heading H1 Color – enter the global H1 color.
  • Heading H2 Color – enter the global H2 color.
  • Heading H3 Color – enter the global H3 color.
  • Heading H4 Color – enter the global H4 color.
  • Heading H5 Color – enter the global H5 color.
  • Heading H6 Color – enter the global H6 color.

Contact Form7

  • Inputs Hover – enter the inputs hover border color.
  • Send Button Background – enter the send button background color.
  • Send Button Background Hover – enter the send button background hover color.

WHMCS Bridge

  • Header Background – Choose Left and Right Background Gradient Colors.
  • Search Button Background – enter the search button background color.
  • Transfer Button Background – enter the transfer button background color.
  • Home Shortcuts Background – enter the home shortcuts background color.
  • Home Shortcuts Border Color – enter the home shortcuts border color.
  • Tweets Border Color – enter the tweets block border color.
  • Sidebar Head Background – enter the sidebar widgets head background color.
  • Sidebar Active Tab Background – enter the sidebar widgets active tab background color.
  • Buttons Background – enter the global button background color.

WooCommerce

  • Cart Button Count Background – enter the cart count button background color.
  • View Cart Button Background – enter the view cart button background color.
  • View Cart Hover Button Background – enter the view cart button hover background color.
  • Checkout Button Background – enter the checkout button background color.
  • Checkout Hover Button Background – enter the checkout button hover background color.
  • Breadcrumb Background – Choose Left and Right Background Gradient Colors.
  • Product Border Hover – enter the product border hover color.
  • Product Cart Button – enter the cart button background color.
  • Product Sale Button – enter the product sale button background color.
  • Product Title – enter the product title color.
  • Widgets Title – enter the widgets title color.
  • Widgets Cart Button – enter the widgets cart button background color.
  • Widgets Cart Button Hover – enter the widgets cart button hover background color.
  • Widgets Filter Range Bar – enter the widgets filter range bar background color.
  • Product Page Titles – enter the product page title text color.
  • Product Page Features – enter the product page features text color.
  • Product Page Cart Button – enter the product page cart button background color.
  • Product Page Tabs Background – enter the product page tabs background color.
  • Checkout Order Background – enter the checkout button background color.
  • Search Widget Button Background – enter the search widget button background color.
  • Profile Links Color – enter the profile link color.
  • Pagination Button Background – enter the pagination button background color.
  • Pagination Button Color – enter the pagination button text color.
  • Pagination Active Button Background – enter the pagination button background color.
  • Pagination Active Button Color – enter the pagination active button background color.

Blog

  • Blog Breadcrumb – Choose Left and Right Background Gradient Colors.
  • Blog Breadcrumb Title – enter the breadcrumb title color.
  • Blog Breadcrumb Description – enter the breadcrumb description color.
  • Blog Breadcrumb Link – enter the breadcrumb link color.
  • Blog Breadcrumb Active Link – enter the breadcrumb active link color.
  • Blog Breadcrumb Link Separator – enter the breadcrumb links separator color.
  • Post Title – enter the post title color.
  • Post Title Hover – enter the post title hover color.
  • Post Read More Button Text – enter read more button text color.
  • Post Read More Button Border – enter read more button border color.
  • Post Read More Button Background Hover – enter read more button hover background color.
  • Post Read More Button Text Hover – enter read more button hover text color.
  • Post Read More Button Border Hover – enter read more hover border color.
  • Sidebar Widgets Title – enter sidebar widgets title.
  • Sidebar Widgets Link Hover – enter sidebar widgets link hover color.
  • Search Widget Search Button Background – enter search widget search button background color.
  • Recent Posts Widget Post Title – enter recent posts widget post title color.
  • Recent Posts Widget Post Title Hover – enter recent posts widget post title hover color.
  • Single Headings – enter the color of a single heading.
  • Single Tags Background Hover – enter single tags hover background color.
  • Related Posts Title – enter related posts title color.
  • Related Posts Title Hover – enter related posts title hover color.
  • Tags Widget Background Hover – enter tags widget hover background color.
  • Comments Area Title – enter comments area block title color.
  • Comments Reply Link – enter comments area block reply link text color.
  • Comments Reply Link Border – enter comments area block reply link border color.
  • Comments User – enter comments user text color.
  • Add Reply Title – enter add reply button title color.
  • Add Reply Logged in user – enter add reply logged in button color.
  • Add Comment Inputs Border Hover – enter add comments block input hover border color.
  • Add Comment Send Button Background – enter add comments block send button background color.
  • Add Comment Send Button Hover Background – enter add comment send button hover background color.

Footer

  • Footer Background – Choose Left and Right Background Gradient Colors.

Footer | General Widgets

  • Heading color – enter widgets heading text color.
  • Heading Bottom Border color – enter widgets heading bottom border color.
  • Link Color – enter widgets link color.
  • Link Hover Color – enter widgets link hover color.
  • Text Color – enter widgets text color.
  • Inputs Background – enter widgets inputs background color.
  • Inputs Border Colors – enter widgets inputs border color.

Footer | About us Widget

  • Text Color – enter the about us widget text color.
  • Icons Color – enter the about us widget icon color.

Footer | Calendar Widget

  • Head Background – enter the calendar widget head background color.
  • Body Background – enter the calendar widget body background color.
  • Border Color – enter the calendar widget border color.
  • Text Color – enter the calendar widget text color.
  • Highlighted Day Background – enter the calendar widget highlighted day background color.
  • Highlighted Day Text Color – enter the calendar widget highlighted day text color.

Footer | Search Widget

  • Search Input Background – enter search widget input background color.
  • Search Input Border – enter search widget input border color.
  • Search Button Background – enter search widget button background color.
  • Search Button Color – enter search widget button text color.

Footer | Newsletter Widget

  • Text Input Background – enter newsletter widget text input background color.
  • Text Input Border – enter newsletter widget text input border color.
  • Submit Input Background – enter newsletter widget submit input background color.

Footer | Tags Widget

  • Tag Background – enter tag background color.
  • Tag Text color – enter tag text color.
  • Tag Background Hover – enter tag hover background color.
  • Tag Text Color Hover – enter tag hover text color.

Footer | Payment Methods

  • Payment Bar Top Border – enter payment block top border color.
  • Payment Bar Bottom Border – enter payment block bottom border color.
  • Icon Color – enter payment block Icon color.
  • Icon Hover Color – enter payment block hover icon color.

Footer | Copyrights Bar

  • Background Color – Choose Left and Right Background Gradient Colors.
  • Text Color – enter copyright bar text color.
  • Link Color – enter the copyright bar link color.
  • Link Hover Color – enter copyright bar hover link color.

Footer | Back To Top Button

  • Button Background Color – enter button Background Color.
  • Button Hover Background Color – enter button Hover Background Color.
  • Button Border Color – enter button Border Color.
  • Button Hover Border Color – enter button Hover Border Color.
  • Button Icon Color – enter button icon Color.
Browse docs