Editing the design of Quantity boxes or other boxes such as the filter dropdown box

I am using version 1.5.1 and inherited the website maintenance from someone else with no instruction so I am learning html, css etc. on the hop as it were. I am actually a web designer rather than a developer so am at a loss at which terms to use. I have used firebug etc to try and identify certain things but cannot for the life of me figure out what to call the white boxes that seem to be table cells used for inserting the quantities of items and the filter and search boxes. I would like to know if I could edit these from being white boxes, my husband is a graphic designer so can design me buttons and suchlike if I require them I just want to know if I can. This is the site https://www.movingpicturesdevon.co.uk any help gratefully received... in simple laymans terms please if poss. I'd basically like to change the background colour from white to another colour and change the colour of the text. :huh:

I'd basically like to change the background colour from white to another colour and change the colour of the text
These changes are controlled by the stylesheet.css file and because you are using the "classic" template it is located at
/includes/templates/classic/css/stylesheet.css

Yeps got that but still can't find the boxes in the stylesheet.css cos I don't know what I'm looking for so I bascially changed anything that showed #ffffff or pale grey but that didn't work.

Which page are you trying to change these on??

A link takes the guess work away

The search box is on the home page that I already linked above https://www.movingpicturesdevon.co.uk and the other boxes are on any of the product pages such as http://movingpicturesdevon.co.uk/cart2/index.php?main_page=index&cPath=22

Are you referring to the white box next to the text "add"

yes and any other little boxes like it such as the filter search box and the search in the top right corner of the home page.

That box must be fillable and not an image that can not be filled

Yes, I understand that but there must be a source code for the generation of those boxes and I would like to know how and where they are created so that I can edit them. For example the filter search box has a dropdown menu with an ugly grey button which I would like to redesign to go with the site colours/format also the search button at the top right is also grey and the add to boxes have grey borders which I'd like to change. I have plenty of experience with designing menus and buttons I just don't know where to find them in zen cart. I've even looked in stylesheet-buttons.css but can't identify them as I don't know what the are called. When I use Firebug it just says
form, select, input {
display:inline;
font-size:1em;
margin:0.1em;
}
stylesheet.css
Inherited fromform
form, select, input {
font-size:1em;
}
stylesheet.css
Inherited fromdiv#mainWrapper
#mainWrapper {
text-align:left;
}
so i'm lost. This was from http://movingpicturesdevon.co.uk/cart2/index.php?main_page=index&cPath=15

lornski_b:

Yes, I understand that but there must be a source code for the generation of those boxes and I would like to know how and where they are created so that I can edit them. For example the filter search box has a dropdown menu with an ugly grey button which I would like to redesign to go with the site colours/format also the search button at the top right is also grey and the add to boxes have grey borders which I'd like to change. I have plenty of experience with designing menus and buttons I just don't know where to find them in zen cart.

Your site is in "use graphic buttons mode", not CSS-buttons. So, some of those submit-buttons you're using are actually graphic images, such as the "Add selected products to cart" button which is at http://movingpicturesdevon.co.uk/cart2/includes/templates/template_default/buttons/english/button_add_selected.gif ... if you wanted to replace that with a different button, it's VERY simple: just upload a replacement to /cart2/includes/templates/NAME_OF_YOUR_TEMPLATE_FOLDER_HERE/buttons/english/button_add_selected.gif and the system will use that instead of falling back to the template_default version. You don't have to (don't even want to) touch the template_default files at all.

On your site the upper-right search box uses just a plain HTML <input type=submit> button, and not an image, so you'll have to style that with HTML/CSS or get into changing the PHP if you wanted it to do something else. Simply using CSS like this might be the start you need: ```
#navMainSearch input[type="submit"] { background-color: #FF00FF;}

DrByte, you truly are the sensei. Thank you so much for the encouragement, I managed the changes and it's helped me to experiment with more of the stylesheet successfulyl. Next stop, my own buttons! Thank you again.
The best command I found was
FORM, SELECT, INPUT {
display: inline;
font-size: 1em;
margin: 0.1em;
background-color: #febfef;
}
it worked a treat.:smile:

lornski_b:

DrByte, you truly are the sensei. Thank you so much for the encouragement, I managed the changes and it's helped me to experiment with more of the stylesheet successfulyl. Next stop, my own buttons! Thank you again.
The best command I found was
FORM, SELECT, INPUT {
display: inline;
font-size: 1em;
margin: 0.1em;
background-color: #febfef;
}
it worked a treat.:smile:

I am not sure if it has solved your issues, but definitely did not solve mine. While I was able to change the box after Add:, however, it continues to display ugly rectangular yellow box around it when you make an input. I went through all the code and can not find where the hell it is being generated. In addition, I have nothing in my css files referring to that particular color. As matter of fact that "highlighting" box is global for all fillable fields.

The reason I want to get rid of it:

I have created box-radius and box-shadow with inset for the Add: box (quantity), but when trying to input into the field that rectangular yellow outside box kills all the efforts of the design efforts.

GoldenMoney:

I am not sure if it has solved your issues, but definitely did not solve mine. While I was able to change the box after Add:, however, it continues to display ugly rectangular yellow box around it when you make an input. I went through all the code and can not find where the hell it is being generated. In addition, I have nothing in my css files referring to that particular color. As matter of fact that "highlighting" box is global for all fillable fields.

The reason I want to get rid of it:

I have created box-radius and box-shadow with inset for the Add: box (quantity), but when trying to input into the field that rectangular yellow outside box kills all the efforts of the design efforts.

It seems that that "yellow" border around fields when "active" or "select" happens only in Chrome. IE does not have the issue. But still, if someone can share the knowledge, would be nice to know what needs to be corrected for Chrome to display "active" fields correctly.

GoldenMoney:

It seems that that "yellow" border around fields when "active" or "select" happens only in Chrome. IE does not have the issue. But still, if someone can share the knowledge, would be nice to know what needs to be corrected for Chrome to display "active" fields correctly.

I have figured it out. Google Chrome use automatic "focus" once input text box is selected. {outline: none;} in your CSS styles will solve the issue.