WordPress.org

Ready to get started?Download WordPress

Forums

Ever After
Changing blue menu hover colour and ribbon colour (2 posts)

  1. angeliquee
    Member
    Posted 4 months ago #

    Good Day. I was wondering if someone could please shed some light as I would like to change the colour of the ribbon as well as the colour of the blue hover over the menu items to a particular colour however I have no coding or technical experience. Is there an easy way to do so?

  2. 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;
    }

Reply

You must log in to post.

About this Theme

About this Topic