How to change the appearance of the Search Box
 

I need to make the following changes to the Search Box at the top centre of each page of my site:

1) Change the background text from "Search Items..." to "Search...". I cannot work out where the text is defined.

2) Change the borders of the Search Box so it is more visible. Again, I am unable to find the relevant CSS statement for this.

I would appreciate being pointed in the right direction, please.

Re: How to change the appearance of the Search Box
 

1. admin.php?target=labels - search for "Search items"
2. Add to custom css in admin rules for


.simple-search-box

Re: How to change the appearance of the Search Box
 

Hi Steve

Many thanks. Label changed.

I am using your 2nd Category mod to display the blue-text in the attached image.

The space between the menu bar, the 1st Category description and the 2nd Category description is too wide. It looks even wider in mobile view.

What is the best way to narrow the gap?

Re: How to change the appearance of the Search Box
 

There is no image attached but again this will be custom css. Just add whatever rules are needed to existing classes to control the space.

Re: How to change the appearance of the Search Box
 

Hi Steve

Image attached. I agree, custom css should sort this out. I am struggling working out which bits of the layout to edit. It was much easier with XC4.

Re: How to change the appearance of the Search Box
 

Problem solved. My lack of practical knowledge of css had me struggling with "unnamed" classes such as:

table > thead > tr > th, table > tbody > tr > th,
table > tfoot > tr > th, table > thead > tr > td,
table > tbody > tr > td, table > tfoot > tr > td{
xxxxxx
}

I can add the above as custom css but I am worried that if I change the attributes for this combination of elements, it could then mess up the layout elsewhere. How can I avoid that?

Re: How to change the appearance of the Search Box
 

The category description is wrapped around a div with class "" and so is the second category description. The second category description also has "" applied if you need to have specific changes to the second one only.

Re: How to change the appearance of the Search Box
 

Yes, that has partially solved the issue but I also needed to override the css for the table stuff to get rid of spacing added outside these classes.

Re: How to change the appearance of the Search Box
 

Hi Steve

Category Description 2 is now perfect. I just need to remove some of the whitespace above and below Category Description 1 (see attachment)

Re: How to change the appearance of the Search Box
 

You'll have to play with the css for the element or its parent to make things work the way you want them. It all depends on your theme and what's in the html code. It is really hard to impossible for anyone to tell you what/how to adjust css based on image.
Just use the browser dev tools to make changes then transfer them to custom css in cart admin