How to Change the Colour of Search Bar in Edin

• 

  blairsdogblog · Member · Jan 8, 2016 at 2:30 am

  • Copy link
  • Add topic to favorites

  Hi,

  Just wondering how to update the CSS in the edin theme to change the search bar colour from the default blue.
  I was able to update my CSS to change my menu hover colours, but I cannot seem to figure out the CSS for updating my search bar.

• 

  thesacredpath · Member · Jan 8, 2016 at 8:34 am

  • Copy link

  Hi there, this change would require the WordPress.com Premium Plan upgrade, which includes the ability to add custom CSS. You can try out and preview custom CSS before you buy as explained here. The following would be the CSS you would need.

  .search-wrapper {
      background-color: #cc0000;
  }

• 

  blairsdogblog · Member · Jan 9, 2016 at 6:50 pm

  • Copy link

  Thank you!
  Also, the circular icon for “search” on Edin that has the magnifying glass is black/grey which I want, but when I hover over it, it turns blue. Do you know how I can change this CSS.

  Also, for the search wrapper that you helped me change, the actual search bar that you type in is white, but the box around it is outlined in blue. Do you know how I can change this colour?

  Thanks!

• 

  thesacredpath · Member · Jan 10, 2016 at 7:37 am

  • Copy link

  On the circle around the search icon, and the icon hover colors, you can add the following and edit the colors as desire.

  .search-toggle:hover:before {
      border-color: #cc0000;
      color: #00ee33;
  }

  For the border on the search text field, add the following and adjust as desire.

  .search-wrapper .search-field {
      border-color: #0c5586;
  }