Search box obscured when Sight customized

• 

  livingtorontojournal · Member · May 24, 2013 at 7:02 am

  • Copy link
  • Add topic to favorites

  I changed the background colour of the slider and the search box at the top beside the header now has a slighter darker grey box over it and there is no text or symbol to signify its function. It’s just a grey rectangle.

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

• 

  timethief · Member · May 25, 2013 at 6:27 pm

  • Copy link

  This thread will be moved to the CSS forum for you but do be aware that Volunteers cannot view private blogs.

• 

  livingtorontojournal · Member · May 29, 2013 at 4:14 am

  • Copy link

  Thanks, it will be public soon. But can’y you just tell me what to do?

• 

  timethief · Member · May 29, 2013 at 4:30 am

  • Copy link

  I do not provide assistance with CSS editing.

• 

  rachelmcr · Member · Jun 12, 2013 at 12:46 am

  • Copy link

  @livingtorontojournal
  The search box in Sight uses a background image to create the search icon, so if you replace the background property in the CSS with a solid color it will remove that background image.

  You currently have this custom CSS entered for the search box:

  .header-search input {
  background: rgba( 39, 41, 42, 0.4 );
  }

  To keep the background color you have chosen but include the search icon, you could change the background property to this:

  .header-search input {
  background: url(/wp-content/themes/pub/sight/images/search.png) 90% 50% no-repeat rgba( 39, 41, 42, 0.4 );
  }

  Let me know how that works for you!

• 

  livingtorontojournal · Member · Jun 20, 2013 at 7:45 pm

  • Copy link

  Thanks for trying but it didn’t work. Appreciate any other ideas.
  I went into the custom css box, deleted the text there and copied in what you sent me, saved, and nothing changed. Was there another way to do it?

• 

  rachelmcr · Member · Jun 20, 2013 at 8:18 pm

  • Copy link

  @livingtorontojournal
  Just to confirm, did you paste this exact CSS code in the box?

  .header-search input {
  background: url(/wp-content/themes/pub/sight/images/search.png) 90% 50% no-repeat rgba( 39, 41, 42, 0.4 );
  }

  If so, can you save the changes and then try refreshing the page? (You can also try clearing your browser’s cache.) This will ensure you aren’t seeing a saved version of your site with the old CSS.

  This should add the search icon back to the search box. Please let me know if this doesn’t work for you.

• 

  livingtorontojournal · Member · Jun 21, 2013 at 12:03 am

  • Copy link

  Did it! It worked! Thanks so much. I don’t know what was different this time but anyway now it’s fixed so thank you very much.

• 

  rachelmcr · Member · Jun 21, 2013 at 5:17 pm

  • Copy link

  You’re welcome! :)