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

[lornski_b]

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 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.

[kobra]

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

[lornski_b]

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.

[kobra]

Which page are you trying to change these on??

A link takes the guess work away

[lornski_b]

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

[kobra]

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

[lornski_b]

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.

[kobra]

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

[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. 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/car...index&cPath=15

[DrByte]

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/car...d_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;}