Changing blue menu hover colour and ribbon colour

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS. There are also standalone CSS plugins you can use instead.

To change the hover colour on the menu items, you can try adding this custom CSS through your chosen plugin:

#page .main-navigation li:hover > a, #page .main-navigation li li:hover > a:hover  {
	background: #bb00bb !important;
}

Change the colour to whatever code you like.

The ribbon is a three-part graphic being displayed from three separate pices of CSS. To replace the ribbon with another three individual graphics is a little tricky. Removing it entirely is easier, or putting a solid colour behind it. Would you consider one of those options?

This is the CSS code generating the ribbon graphic:

#description-left {
	background: transparent url("images/ribbon-left.png") no-repeat 0 0;
	background-size: 56px;
	position: absolute;
		top: 0;
		left: 0;
	width: 56px;
	height: 54px;
	z-index: 4;
}
#description-middle {
	background: transparent url("images/ribbon-middle.png") no-repeat 50% 0;
	background-size: auto 44px;
	height: 44px;
	margin: 0 31px;
	max-width: 808px;
	overflow: hidden;
	position: relative;
	z-index: 5;
}
#description-right {
	background: transparent url("images/ribbon-right.png") no-repeat 100% 0;
	background-size: 56px;
	position: absolute;
		top: 0;
		right: 0;
	width: 56px;
	height: 54px;
	z-index: 4;
}