Change color of menu font in Gateway theme

• 

  zerohh · Member · Dec 30, 2015 at 8:45 am

  • Copy link
  • Add topic to favorites

  Hi,
  I have just started working with the Gateway theme and would like to change the mouse over color on the menu fonts. Does anyone know the CSS code that would work for this? Thanks for your help.

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

• 

  starxedsteph · Member · Dec 30, 2015 at 3:46 pm

  • Copy link

  Hi there!

  You can change the color of the menu’s mouse over effect using this code:

  .main-navigation li:hover > a, .main-navigation li.focus > a {
      color: #33CCCC;
  }

  Just switch out the hex code behind the # symbol with the code of your choice. You can use this tool to find the right hex code:

  http://www.w3schools.com/tags/ref_colorpicker.asp

• 

  zerohh · Member · Dec 30, 2015 at 5:05 pm

  • Copy link

  This worked beautifully, thank you!

  One more formatting issue – does anyone know how to change the text formatting for widgets, including a twitter feed?

  Also would like to change the underlying color of the header, which is still visible when the page is loading.

• 

  thesacredpath · Member · Dec 31, 2015 at 1:05 am

  • Copy link

  On the background color in the header area, this changes it to black.

  .header-bg {
      background-color: #000;
  }

  On the sidebar, it depends on what you want to change. As far as the twitter feed, all the code comes from Twitter, so some things cannot be changed. Again, if you can let me know what you want to change, I can see what I can do.

• 

  zerohh · Member · Dec 31, 2015 at 2:48 am

  • Copy link

  Thanks for this, the code worked perfectly for the header!

  What I would like to change is all of the text that still appears on the site in orange. I have changed the color of the text on menu items on the front page, but when navigating from a page other than the home page the text reverts to orange. Also the ‘edit’ text is in orange, the ‘submit’ button for password-protected pages, a word on one of widgets (manage) is in orange, and I am not sure where else but it would be ideal to have a way to change all of this to another color.

  Also, with this theme I have lost the formatting for links. They still work, but the text that is linked from is no longer underlined or in bold.

  Thanks again for your response, and for any suggestions you might have.

• 

  thesacredpath · Member · Jan 5, 2016 at 9:04 pm

  • Copy link

  Hi there, on the colors, it looks like you got at least some of them taken care of. For the buttons on things, add the following and you can adjust as desired. I’ve used the same purple for the background color and then white for the text color.

  .widget_wpcom_social_media_icons_widget a::before, .widget_tag_cloud a, .wp_widget_tag_cloud a, .header-bg, html input[type="button"], input[type="reset"], input[type="submit"], button, .button, #infinite-handle span {
      background-color: #606;
      color: #fff;
  }

  The following gets the orange footer credits text.

  .site-info, .site-info .sep, .site-info a {
      color: #606;
  }

  For the links, the following will add underline to links in the content area and allow you to set a color for them.

  .entry-content a {
      text-decoration: underline;
      color: #cc0000 !important;
  }

  One thing I’ll mention is that for me, the purple color you have chosen for some of the text is almost unreadable on the black background. I might suggest a lighter purple or perhaps a different color.

• 

  zerohh · Member · Jan 6, 2016 at 9:48 pm

  • Copy link

  Thank you so much for this, and for your suggestion about the color. I will change it to a lighter purple for legibility.

  On the level of detail, do you know the code for changing the style of the text on the buttons from italics to normal?

  Thanks again for your help, and happy new year!

• 

  thesacredpath · Member · Jan 7, 2016 at 12:29 am

  • Copy link

  Sure, add font-style: normal; to the .widget rule on the top of my previous post so that it looks like this:

  .widget_wpcom_social_media_icons_widget a::before, .widget_tag_cloud a, .wp_widget_tag_cloud a, .header-bg, html input[type="button"], input[type="reset"], input[type="submit"], button, .button, #infinite-handle span {
      background-color: #606;
      color: #fff;
      text-decoration: none;
      font-style: normal;
  }

• 

  zerohh · Member · Jan 7, 2016 at 3:39 am

  • Copy link

  So simple, thank you!

  I just noticed the underlying color of the header has reverted to purple when loading. Is there any way to get rid of it?

• 

  mmatsinhe2015 · Member · Jan 7, 2016 at 8:52 am

  • Copy link

  Hi I need to change color of my menu wish CSS code can I use?

• 

  thesacredpath · Member · Jan 7, 2016 at 10:39 pm

  • Copy link

  Hi @ mmatsinhe2015, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.