Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

How to change the appearance of the Search Box

 
Reply
   X-Cart forums > X-Cart 5 > Dev Questions (X-Cart 5)
 
Thread Tools Search this Thread
  #1  
Old 04-19-2020, 01:38 AM
  johngwms's Avatar 
johngwms johngwms is online now
 

Senior Member
  
Join Date: Mar 2013
Location: North Wales
Posts: 191
 

Default 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.
__________________
John Legg
www.TheDebugStore.com

5.4.1.18 Business, Crisp White Skin Template
Backorder-Preorder Module
X-Cart to Zoho Creator (in progress)
Zoho Creator <-> Zoho Inventory for order processing
NGINX hosted - XC virtual server
Reply With Quote
  #2  
Old 04-19-2020, 06:20 AM
  cflsystems's Avatar 
cflsystems cflsystems is offline
 

Veteran
  
Join Date: Apr 2007
Posts: 13,967
 

Default 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
__________________
Steve Stoyanov
CFLSystems.com
Web Development
Reply With Quote

The following user thanks cflsystems for this useful post:
johngwms (04-19-2020)
  #3  
Old 04-19-2020, 06:28 AM
  johngwms's Avatar 
johngwms johngwms is online now
 

Senior Member
  
Join Date: Mar 2013
Location: North Wales
Posts: 191
 

Default 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?
__________________
John Legg
www.TheDebugStore.com

5.4.1.18 Business, Crisp White Skin Template
Backorder-Preorder Module
X-Cart to Zoho Creator (in progress)
Zoho Creator <-> Zoho Inventory for order processing
NGINX hosted - XC virtual server
Reply With Quote
  #4  
Old 04-19-2020, 07:40 AM
  cflsystems's Avatar 
cflsystems cflsystems is offline
 

Veteran
  
Join Date: Apr 2007
Posts: 13,967
 

Default 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.
__________________
Steve Stoyanov
CFLSystems.com
Web Development
Reply With Quote

The following user thanks cflsystems for this useful post:
johngwms (04-19-2020)
  #5  
Old 04-19-2020, 07:45 AM
  johngwms's Avatar 
johngwms johngwms is online now
 

Senior Member
  
Join Date: Mar 2013
Location: North Wales
Posts: 191
 

Default 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.
Attached Thumbnails
Click image for larger version

Name:	Page Top.jpg
Views:	25
Size:	91.5 KB
ID:	5482  
__________________
John Legg
www.TheDebugStore.com

5.4.1.18 Business, Crisp White Skin Template
Backorder-Preorder Module
X-Cart to Zoho Creator (in progress)
Zoho Creator <-> Zoho Inventory for order processing
NGINX hosted - XC virtual server
Reply With Quote
  #6  
Old 04-19-2020, 07:57 AM
  johngwms's Avatar 
johngwms johngwms is online now
 

Senior Member
  
Join Date: Mar 2013
Location: North Wales
Posts: 191
 

Default 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?
__________________
John Legg
www.TheDebugStore.com

5.4.1.18 Business, Crisp White Skin Template
Backorder-Preorder Module
X-Cart to Zoho Creator (in progress)
Zoho Creator <-> Zoho Inventory for order processing
NGINX hosted - XC virtual server
Reply With Quote
  #7  
Old 04-19-2020, 08:03 AM
  cflsystems's Avatar 
cflsystems cflsystems is offline
 

Veteran
  
Join Date: Apr 2007
Posts: 13,967
 

Default Re: How to change the appearance of the Search Box

The category description is wrapped around a div with class "
category-description
" and so is the second category description. The second category description also has "
category-description-2
" applied if you need to have specific changes to the second one only.
__________________
Steve Stoyanov
CFLSystems.com
Web Development
Reply With Quote

The following user thanks cflsystems for this useful post:
johngwms (04-19-2020)
  #8  
Old 04-19-2020, 08:10 AM
  johngwms's Avatar 
johngwms johngwms is online now
 

Senior Member
  
Join Date: Mar 2013
Location: North Wales
Posts: 191
 

Default 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.
__________________
John Legg
www.TheDebugStore.com

5.4.1.18 Business, Crisp White Skin Template
Backorder-Preorder Module
X-Cart to Zoho Creator (in progress)
Zoho Creator <-> Zoho Inventory for order processing
NGINX hosted - XC virtual server
Reply With Quote
  #9  
Old 04-19-2020, 08:29 AM
  johngwms's Avatar 
johngwms johngwms is online now
 

Senior Member
  
Join Date: Mar 2013
Location: North Wales
Posts: 191
 

Default 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)
Attached Thumbnails
Click image for larger version

Name:	Page Top II.jpg
Views:	24
Size:	108.9 KB
ID:	5483  
__________________
John Legg
www.TheDebugStore.com

5.4.1.18 Business, Crisp White Skin Template
Backorder-Preorder Module
X-Cart to Zoho Creator (in progress)
Zoho Creator <-> Zoho Inventory for order processing
NGINX hosted - XC virtual server
Reply With Quote
  #10  
Old 04-19-2020, 08:45 AM
  cflsystems's Avatar 
cflsystems cflsystems is offline
 

Veteran
  
Join Date: Apr 2007
Posts: 13,967
 

Default 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
__________________
Steve Stoyanov
CFLSystems.com
Web Development
Reply With Quote

The following user thanks cflsystems for this useful post:
johngwms (04-19-2020)
Reply
   X-Cart forums > X-Cart 5 > Dev Questions (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 09:31 PM.

   

 
X-Cart forums © 2001-2020