Changing the color of the highlighting

• 

  tkusinitz · Member · Jan 23, 2017 at 5:49 pm

  • Copy link
  • Add topic to favorites

  Hi there! I’d like my menu items to be highlighted in yellow instead of blue when they are hovered over, or if that page is the one you’re currently on. I’d also like my ‘read more’ links to be highlighted in yellow. Can someone make that code for me?

  The blog I need help with is: (visible only to logged in users)

• 

  kathrynwp · Staff · Jan 23, 2017 at 10:33 pm

  • Copy link

  This should do the trick for the menu, Read More links, buttons, and several other elements:

  mark,ins,button,input[type="button"],
  input[type="reset"],input[type="submit"],
  a.button,a.button:visited,a.button-minimal:hover,a.button-minimal:focus,a.button-minimal:active,
  body:not(.small-screen) .menu-toggle.open:before,
  .navigation-wrapper, .widget_nav_menu .dropdown-toggle:hover, 
  .hero.with-featured-image,
  body[class*="front-page"] .hero,#infinite-handle span,
  .large-screen.navigation-classic .primary-navigation .menu-primary>ul>li:hover,
  .large-screen.navigation-classic .primary-navigation .menu-primary>ul>li.current-menu-item>a,
  .large-screen.navigation-classic .primary-navigation .menu-primary>ul>li.current_page_item>a,
  .large-screen.navigation-classic .primary-navigation .menu-primary>ul>li>a:hover,
  .large-screen.navigation-classic .primary-navigation .menu-primary>ul>li>a:focus,
  .large-screen.navigation-classic .primary-navigation .menu-primary>ul>li>a:active,
  .large-screen.navigation-classic .primary-navigation ul ul li,.widget_akismet_widget .a-stats a {
    background-color:#ff0;
  }
  a,a.button-minimal, a.button-minimal:visited,
  .menu-toggle:focus, .primary-navigation .dropdown-toggle:hover, .footer-navigation a:hover, .footer-navigation a:focus, .footer-navigation a:active, .screen-reader-text:hover,.screen-reader-text:focus,.screen-reader-text:active,#wpadminbar .screen-reader-shortcut:hover,#wpadminbar .screen-reader-shortcut:focus,#wpadminbar .screen-reader-shortcut:active,.site-footer a:hover,.site-footer a:focus,.site-footer a:active,
  .format-link .entry-title a:hover:after,.format-link .entry-title a:focus:after,
  .format-link .entry-title a:active:after,.entry-title a:hover,.entry-title a:focus,.entry-title a:active,
  .featured-page .entry-title a:hover,.featured-page .entry-title a:focus,.featured-page .entry-title a:active,
  .grid .entry-title a:hover,.grid .entry-title a:focus,.grid .entry-title a:active,#infinite-footer .blog-credits a:hover,#infinite-footer .blog-credits a:focus,#infinite-footer .blog-credits a:active,#infinite-footer .blog-info a:hover,#infinite-footer .blog-info a:focus,#infinite-footer .blog-info a:active,
  .small-screen .menu-toggle:hover:before,.small-screen .menu-toggle:active:before,.small-screen .menu-toggle.open:before,.small-screen .menu-toggle.open,.medium-screen .menu-toggle:hover,.medium-screen .menu-toggle:active,
  .large-screen.navigation-classic .primary-navigation .menu-item-has-children:before,
  .large-screen.navigation-classic .secondary-navigation a:hover, .large-screen.navigation-classic .secondary-navigation a:focus,.large-screen.navigation-classic .secondary-navigation a:active,.widget_goodreads div[class^="gr_custom_each_container"] a:hover,.widget_goodreads div[class^="gr_custom_each_container"] a:focus,.widget_goodreads div[class^="gr_custom_each_container"] a:active,.testimonial-entry-title a:hover,
  .testimonial-entry-title a:focus, .testimonial-entry-title a:active {
    color:#ff0
  }

  This particular shade of yellow is quite hard to read on white so I’d suggest you choose a shade that’s more legible.

  I also noticed that you’ve hidden the footer credit with CSS, which isn’t something that’s allowed on WordPress.com. Removing the WordPress.com credit is only permitted with the Business plan. Please restore the footer credit – you might want to choose one of the other options, such as the small WordPress logo.