# Color Options > Set colors for every part of your Phox site: top header, header, menus, mega menu, headings, WHMCS Bridge, WooCommerce, blog and footer. Source: https://phox.wdes.org/docs/color-options/ Last updated: 2020-05-25 ## 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](https://phox.wdes.org/docs/color-options/#topHeader) - [Header](https://phox.wdes.org/docs/color-options/#headerColor) - [Menu](https://phox.wdes.org/docs/color-options/#menuColor) - [SubMenu](https://phox.wdes.org/docs/color-options/#subMenuColor) - [MegaMenu](https://phox.wdes.org/docs/color-options/#megaColor) - [Responsive Menu](https://phox.wdes.org/docs/color-options/#responsiveMenu) - [Headings](https://phox.wdes.org/docs/color-options/#headingsColor) - [Contact Form7](https://phox.wdes.org/docs/color-options/#contactForm) - [WHMCS Bridge](https://phox.wdes.org/docs/color-options/#bridgeColor) - [WooCommerce](https://phox.wdes.org/docs/color-options/#wooColors) - [Blog](https://phox.wdes.org/docs/color-options/#blogColor) - [Footer](https://phox.wdes.org/docs/color-options/#footerColor) - [Footer | General Widgets](https://phox.wdes.org/docs/color-options/#generalWidgetsColor) - [Footer | About us Widget](https://phox.wdes.org/docs/color-options/#footerAboutUsColor) - [Footer | Calendar Widget](https://phox.wdes.org/docs/color-options/#calendarWidgetColor) - [Footer | Search Widget](https://phox.wdes.org/docs/color-options/#searchWidgetColor) - [Footer | Newsletter Widget](https://phox.wdes.org/docs/color-options/#newsletterColor) - [Footer | Tags Widget](https://phox.wdes.org/docs/color-options/#tagsColor) - [Footer | Payment Methods](https://phox.wdes.org/docs/color-options/#paymentMethodsColor) - [Footer | Copyrights Bar](https://phox.wdes.org/docs/color-options/#copyrightBar) - [Footer | Back To Top Button](https://phox.wdes.org/docs/color-options/#backtotop) --- ### 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. ![wdes color top](https://phox.wdes.org/docs/assets/wdes-color-top.D-_XT1AY_icgff.webp) --- ### 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. ![phox color header](https://phox.wdes.org/docs/assets/phox-color-header.DG1frpvo_1RaMdb.webp) --- ### Menu - **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. ![phox menu color](https://phox.wdes.org/docs/assets/phox-menu-color.W6DL_U4H_Z1BvQ6J.webp) --- ### SubMenu - **Link Color** – enter the submenu link color. - **Hover Link Color** – enter the submenu link hover color. - **Border Color** – enter the link border color. ![phox sub menu](https://phox.wdes.org/docs/assets/phox-sub-menu.C8E30W7t_3RAlk.webp) --- ### 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. ![phox mega menu](https://phox.wdes.org/docs/assets/phox-mega-menu.DiaSjsTf_1LyNU3.webp) --- ### 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. ![phox mobile color](https://phox.wdes.org/docs/assets/phox-mobile-color.BXZfgKg0_1lDQwM.webp) --- ### 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. ![phox heading color](https://phox.wdes.org/docs/assets/phox-heading-color.DH-6Uq6X_2p40SW.webp) --- ### 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. ![phox contact](https://phox.wdes.org/docs/assets/phox-contact.CyMqQwfF_K1SLS.webp) --- ### 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. ![phox bridge color](https://phox.wdes.org/docs/assets/phox-bridge-color.CQ-hRNg__Z1h5FjB.webp) --- ### 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. ![phox woo colors](https://phox.wdes.org/docs/assets/phox-woo-colors.BCxtm8if_2kC3pP.webp) --- ### 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. ![phox blog color](https://phox.wdes.org/docs/assets/phox-blog-color.D0c0vyrq_Z9cywQ.webp) --- ### Footer - **Footer Background** – Choose Left and Right Background Gradient Colors. ![phox footer color](https://phox.wdes.org/docs/assets/phox-footer-color.CD6dHr8Q_ZkS4mJ.webp) --- ## 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. ![phox footer widgets color](https://phox.wdes.org/docs/assets/phox-footer-widgets-color.CnA88o3V_1RJX1E.webp) --- ### Footer | About us Widget - **Text Color** – enter the about us widget text color. - **Icons Color** – enter the about us widget icon color. ![phox about us color](https://phox.wdes.org/docs/assets/phox-about-us-color.C8bfpCFZ_syDOl.webp) --- ### 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. ![phox calendar widget](https://phox.wdes.org/docs/assets/phox-calendar-widget.B1651m9Z_Z1vMK6u.webp) --- ### 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. ![phox search color](https://phox.wdes.org/docs/assets/phox-search-color.rULiBEB3_Z2nz1V.webp) --- ### 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. ![Screenshot](https://phox.wdes.org/docs/assets/Screen-Shot-2020-05-11-at-7.56.24-PM.krQvajuO_1r0XDN.webp) --- ### 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. ![phox tags color](https://phox.wdes.org/docs/assets/phox-tags-color.BHXWvYpd_vBS4x.webp) --- ### 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. ![phox payment color](https://phox.wdes.org/docs/assets/phox-payment-color.Bzj8bXqm_ZTO2Q3.webp) --- ### 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. ![copyrightColor](https://phox.wdes.org/docs/assets/copyrightColor.B9KHFgEu_i3p8r.webp) --- ### 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. ![wdes back to top](https://phox.wdes.org/docs/assets/wdes-back-to-top.Cisuc8hU_Porru.webp)