CSS Help! Input Boxes

I have three ways to buy products. I have loaded COWOA and FEC. A customer can login as a new customer, returning customer or without an account. Besides shipping issues everything seems to be working except the ccs.stylesheet.

The boxes for inputting information are all the same, but need to be located on each page in different areas. For instance, I can go to create account and I do not have sideboxes. When I change the input line in stylesheets it messes up my contact us page and checkout page. All of them have the same code with input. When I get one fixed, it messes up the other pages.

How do I divide up between the different pages so each box can have a unique location?

You can see here.
create an account -
https://www.burnerbooks.com//index.php?main_page=create_account
contact us -
http://www.burnerbooks.com//contact_us.html
checkout -
https://www.burnerbooks.com//index.php?main_page=checkout&action=null

I tried to modify no-account.css, but as soon as I re-load stylesheet.css it over-rides. :frusty:

Can anyone help me? I have been going crazy for a couple of weeks trying to figure this out.
Whenever I change stylesheet for one page it messes up the others. It even messes up other pages like product information at: http://www.burnerbooks.com//index.php?main_page=product_music_info&cPath=313_314_315&products_id=27228. The input text box for quantity add this to my cart is effected as well as contact us, etc.

There must be a way to divide up the text input boxes. I just do not know how to do it. I tried with FF web developer information display id and class to see if I could add to stylesheet, but did not work.

Help! :frusty:

You'd need to go into the template files for each of those pages and change the id for each field to something unique to that page, then style the page by adding the new ids to the stylesheet.

In tpl_modules_create_account.php, for example, you could change id="company" to id="createcompany" and add #createcompany to the stylesheet, and so on.

A lot of work.

stevesh:

You'd need to go into the template files for each of those pages and change the id for each field to something unique to that page, then style the page by adding the new ids to the stylesheet.

In tpl_modules_create_account.php, for example, you could change id="company" to id="createcompany" and add #createcompany to the stylesheet, and so on.

A lot of work.

Thank you for responding stevesh. I tried the first one with company name. I changed the id=company to id=create company in the tpl_modules_create_account file. Than I added #createcompany to the end of stylesheet with a small addition of float: left. It works! But yes I have some long nights ahead of me!

How do I change the actual text name too? It is called label in stylesheets.

Thank you for your help!:clap:

In your template's css folder, there should be a file called CSS_read_me.txt (get it from the classic template folder if you have to.) In it are instructions for creating page-specific stylesheets. You can create one named for any page (I think) in Zen Cart, so something like contact_us.css would be the place for styles you wish to apply uniquely to the Contact Us page.

Just put definitions in these page-specific sheets which you need to change for that page. All the rest will come from the other stylesheet(s) you already have.

No core code changes necessary!

HTH

Rob

I am down to final change and I think I can get by.

On main page for left header I have Search. It has id as label and matches other labels in the site like my create account page, contact us, etc. The issue is text alignment. I need this one to be centered and rest to be left. I can not find the tpl file to change the id to searchlabel. So, I can then add it to my stylesheet and edit. I looked in developers Tool kit, but only language files.

You can see where not align on my site. Plus, right box with Author/Publisher is same way.

Thanks, Kim:frusty:

Editing any PHP files to get totally unique ids is unnecessary and possibly counterproductive.
You can set the label id for standard properties that you want to apply to all labels, and below that set a rule for each label that is on a different part of the page by specifying that label's container, like:

#search label {}

which will only apply to labels in the search sidebox.

This is in addition to the ability to make per-page stylesheets which can affect all labels on a particular page.

gjh42:

Editing any PHP files to get totally unique ids is unnecessary and possibly counterproductive.
You can set the label id for standard properties that you want to apply to all labels, and below that set a rule for each label that is on a different part of the page by specifying that label's container, like:

#search label {}

which will only apply to labels in the search sidebox.

This is in addition to the ability to make per-page stylesheets which can affect all labels on a particular page.

Thank you for the help, Glenn.

I added #search label{ text-align: center; }

It centered Search, but now it looks outside of the header. I have been trying to use margin and padding to get it above the blue line, but not working.

kburner:

Thank you for the help, Glenn.

I added #search label{ text-align: center; }

It centered Search, but now it looks outside of the header. I have been trying to use margin and padding to get it above the blue line, but not working.

I noticed that the float feature will not work with #search label and is picking up label from stylesheets. When I use FF web developer, I see this:

label (line 198){
color: #083562;
font-weight: bold;
font-size: 1.1em;
text-align: left;
float: left;
}

#search label (line 885){
color: #083562;
font-weight: bold;
font-size: 1.1em;
font-family: Lucida Sans;
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;
margin-bottom: 0.5em;
text-align: center;
}

I added float: center to #search label, but does not show up. If I take float: left out of label it messes up all other pages.

label - needs to be float: left
#search label - needs to be float: center

Not sure how to fix?

There is no such thing as float: center - only right or left. Try text-align: center;
I see from your previous post that you did that. I will look at and see what it needs.

For now, use float:none; to cancel the float for the search header.

Here is your problem: #SearchHeading {
The "s" should not be capitalized. CSS is case-sensitive, so this entire rule is being ignored. Try this:```
#searchHeading {
font-size: 1.1em;
font: Lucida Sans;
text-align: center;
}
#searchHeading label {float: none; }