ome clients had claimed that it is not easy to change the colors for most of the fudge2 elements. 

Most of the times they need to tweak this theme with some extra CSS to change: navigation top bar, links, footer, titles, and fonts.


Fudge2 includes the following color settings: primary color, secondary color and hover color.



Primary color:

According to the documentation: "This color is used in the main menu bar of your site, for links, and several other elements"

What it does: It doesn't change the main menu bar color but just shows a line undernet each menu link on "hover event".  It also changes decorations, titles and some background sections.


Decoration and primary button



Performers background color.



Decoration and background "active" tab color in the schedule item.



Decoration and primary button in "Call to action" item.



Decoration, links, primary  buttons in news (blog item)




Subscribe section background color.




Secondary color:

According to the documentation:  "is used for text in the site's main menu, icons, and other elements. It should compliment the primary color..."

What it does: Changes background color of the top navigation bar, body font (default font color), some sections backgrounds.


Note: for this example, I just change Secondary color and reset to default the primary.

Top navigation bar.



Schedule title and fonts



Background color in Media Gallery item



If you want to change the top navigation color, it also sets that same color to your "body color". In the sample below I changed the secondary color, and I open a "sample page". 




Hover color (works as expected):

Changes background color for buttons.


Note: I have only chosen that red hover color for this sample and reset primary and secondary to default.


Hover color in a button




Workaround


What users have been switching using custom CSS codes:

  • Top navigation bar background and links.
  • Body color.


Code snippets:  Use a new color for the top navigation bar and disable transparency, this includes links color modification:


/*
 Theme Name:   Fudge 2 Child
 Theme URI:    http://www.showthemes.com/conference-wordpress-theme-fudge
 Description:  Fudge 2 Child Theme
 Author:       Showthemes
 Author URI:   http://www.showthemes.com
 Template:     fudge-2
 Version:      1.0.0
*/


/* INSTRUCTIONS */


/* COMMENT THE CODE THAT YOU DON'T NEED */


/* CHANGE HEXADECIMAL COLORS AS YOU LIKE */


/* TOP NAV BAR BACKGROUND COLOR - TO DISABLE TRANSPARENT BACKGROUND */

.site__header-top {
    background-color: #01a8dc !important;
}


/* TOP NAV BAR BACKGROUND COLOR */

.site__header.fixed .site__header-top,
.header_background .site__header-top {
    background-color: #01a8dc !important;
}



/* TOP NAV BAR LINKS */

.header-menu__wrap .menu>.menu-item>a {
    color: #003259 !important;
}
CSS