Change orange color scheme

If you find this tweak helpful:


Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

The default color scheme for Foxy is set to orange. You have limited options for different colors in the theme's settings, but this tweak will show you how to change it to any color you like using CSS.

In your dashboard you can navigate to Appearance > Customize > Schemes and change the color to red, blue, green, purple, and gray. If you would like another color, you'll have to change it using custom CSS.


Locate your style.css file in /foxy-child/

Add this code:

#featured {
background-color: #7FAAFF !important;
-webkit-box-shadow: inset 0 0 250px #000 !important;
-moz-box-shadow: inset 0 0 250px #000 !important;
box-shadow: inset 0 0 250px #000 !important;

#top-navigation > ul > li.sfHover > a, #top-navigation > ul > li > a:hover, .mobile_nav, #home-tab-area > ul > li.home-tab-active, #footer-bottom li a:hover, .et-product:hover .et-price-button, .et-products li:hover .et-price-button, #callout {
background-color: #7FAAFF !important;
-webkit-box-shadow: inset 0 0 25px #000 !important;
-moz-box-shadow: inset 0 0 25px #000 !important;
box-shadow: inset 0 0 25px #000 !important;

#home-tab-area ul , .widget h4.widgettitle {
border-bottom: 5px solid #415884 !important;

@media only screen and (max-width: 767px) {
#callout > strong {
background-color: #7BA5F8 !important;
box-shadow: inset 0 0 25px #2851A1 !important;


This will set your color scheme to a blue color. Obviously you can replace #7FAAFF  and other colors to whatever you wish. If the new color you choose is close enough to orange like red or maybe a dark yellow, you can probably delete the box-shadow lines above. The default shadow settings will probably work. If your color is too far from orange on the color wheel, you'll just have to play around with the shadow colors to find the right effects. If you don't want to mess with it and would rather just have flat colors, you can replace the box-shadow lines with this line of code: 

box-shadow: none !important;

This line will remove all shadow effects along the borders. 

    1 Comment

  1. The undergraduate student feels they aren’t getting the input they need at university, so they’re looking to work with a qualified expert on their essay.


    December 27, 2020

Post a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This