Okay, so you have noticed by now that you cannot change the color of some of the properties of this awesome template! 

Should you want to change the menu and button colors, we have provided the exact code that you need to change those colors to whatever color you wish. 


Please Note: The Grace Template was made with a semi-fixed color pallet intentionally. As a courtesy, we have made Advanced user tutorial to assist you in changing these colors. Part of these instructions requires you to upload a Third Party Plugin. At the time of this tutorial, this plugin works, we cannot guaranty that it will always work and will not be able to offer any further support other than this tutorial. Any support questions regarding Simple Custom CSS plugin will need to be addressed to the plugin creator.


How to Change the Button Colors:


  • All you need is the color number for the color you want to use. 
    • If you do not know your color number then take a screenshot of your color then upload that image to Adobe Color CC.


Once you have your Color Number (or Hex Number)

  • Download the Simple Custom CSS Plugin
  • Follow this tutorial on How to Upload and Delete a Third Party Plugin
  • Once it is uploaded go to Appearance then Custom CSS
  • Now copy the text below between the line breaks and paste it in the field.
  • Then Replace all of the #339cc with your own color number.
  • When you are done, click the "Update Custom CSS" button.
  • Now each area will be changed.

/*this one is for your slide navigation button*/
body:not(.iOS):not(.Android) .sfPagePrev:hover, body:not(.iOS):not(.Android) .sfPageNext:hover {
    opacity: 1;
    border-color: #3399cc; /*replace #3399cc with your own color number*/
    background-color: #3399cc; /*replace #3399cc with your own color number*/
}

/*these are for your dropdown sub-menu*/
#main_nav ul.sub-menu {
    background: #3399cc; /*replace #3399cc with your own color number*/
}

#main_nav ul.sub-menu::before {
    border-bottom: 8px solid #3399cc; /*replace #3399cc with your own color number*/
    border-bottom-color: #3399cc; /*replace #3399cc with your own color number*/
}

body.menuOverflow #main_nav ul.sub-menu li a, #main_nav ul.sub-menu li a:hover {
    color: #fff;
}
/*This is for your single play button*/

body .simplebutton.mejs-container {
    border-color: #3399cc; /*replace #3399cc with your own color number*/
}
.simplebutton.mejs-container:focus, .simplebutton.mejs-container:hover {
    border-color: #3399cc !important; /*replace #3399cc with your own color number*/
    background: #3399cc !important; /*replace #3399cc with your own color number*/
    outline: none !important;
    box-shadow: none;
/*this is for your mobile and Collapsible Navigation Menu*/  
}  
  body.menuOverflow #main_nav li:focus,  body.menuOverflow #main_nav li:hover {
    background: #3399cc; /*replace #3399cc with your own color number*/
}

body #header .search:hover, body.searchPushed #header .search {
    background: #3399cc; /*replace #3399cc with your own color number*/
}


/*this one is for your slide navigation button*/
body:not(.iOS):not(.Android) .sfPagePrev:hover, body:not(.iOS):not(.Android) .sfPageNext:hover {
    opacity: 1;
    border-color: #3399cc; /*replace #3399cc with your own color number*/
    background-color: #3399cc; /*replace #3399cc with your own color number*/
}

/*these are for your dropdown sub-menu*/
#main_nav ul.sub-menu {
    background: #3399cc; /*replace #3399cc with your own color number*/
}

#main_nav ul.sub-menu::before {
    border-bottom: 8px solid #3399cc; /*replace #3399cc with your own color number*/
    border-bottom-color: #3399cc; /*replace #3399cc with your own color number*/
}

body.menuOverflow #main_nav ul.sub-menu li a, #main_nav ul.sub-menu li a:hover {
    color: #fff;
}

/*This is for your single play button*/

body .simplebutton.mejs-container {
    border-color: #3399cc; /*replace #3399cc with your own color number*/
}
.simplebutton.mejs-container:focus, .simplebutton.mejs-container:hover {
    border-color: #3399cc !important; /*replace #3399cc with your own color number*/
    background: #3399cc !important; /*replace #3399cc with your own color number*/
    outline: none !important;
    box-shadow: none;

/*this is for your mobile and Collapsible Navigation Menu*/  
}  
  body.menuOverflow #main_nav li:focus,  body.menuOverflow #main_nav li:hover {
    background: #3399cc; /*replace #3399cc with your own color number*/
}

/*this is for your search button when it is and isn't hovered over*/
body #header .search:hover {
    background-color: #9e2323 !important; /*replace #9e2323 with your own color number to change the hover color for the background of the search button*/
  color: #ffffff !important; /*replace #ffffff with your own color number to change the color of the magnifying glass when hovered over*/
  }

body #header .search {
    color: #9e2323 !important; /*replace #9e2323 with your own color number to change the color of the magnifying glass*/
  }



Please Note: We recommend using Google Chrome or Firefox to edit/update your Sharefaith Church Website and Mobile App. If you are experiencing any issues with editing your Sharefaith Church Website or Mobile App, switch to one of these browsers. If the issue still persists or you are experiencing your issue while using one of these browsers contact a Sharefaith Customer Liaison Specialist by creating a new support request.


102517