Adjusting stylesheet for shoppincart, pay, ship etc pages

[jvanree]

I want to adjust my stylesheet css for the shoppingcart area, the checkout area and everything related to it (payment, shippingoptions, payment confirmation etc).

Now I know how to do a seperate stylesheet for a categorie I just don't know how to name the stylesheet for these things.

Normally it's C_(nr of a categorie).css but what should I fill in for the checkout pages?

Thank you in advance,

Juliet van Ree

[jvanree]

Does anybody know the answer please?

[Ryk]

In the docs directory there is a file all about stylesheet management

[ronpeled]

Basically there isn't a way to attach a stylesheet only for the checkout pages. But you can add a stylesheet for all pages or you can modify the main stylesheet file.

That is what we do: we modify the main CSS file and the individual template pages to match what our designer produces. By the way, the instructions file shows:

The CSS files are sent to the browser in this order: (and alphabetically within each case of more than one match):

             style*.css   // are always loaded and at least ONE should contain site-wide properties.
language_stylesheet.css   // changes to ALL pages, when that language is used
          page_name.css   // changes to one page 
 language_page_name.css   // changes to one page, when that language is used
            c_??_??.css   // changes to all info pages in a category
   language_c_??_??.css   // changes to all info pages in a category, when that language is used
               m_??.css   // changes to a manufacturer's listing page
      language_m_??.css   // changes to a manufacturer's listing page, when that language is used
               p_??.css   // changes to a product's info page
      language_p_??.css   // changes to a product's info page, when that language is used
             print*.css   // printer-friendly global usage site-wide changes for printing-only

The 'stylesheet.css' always loads first and should contain the bulk of your CSS selectors. Each file loaded takes priority over previously loaded file(s). To save loading time, only new selectors or selectors whose properties you wish to change should be in the optional CSS files. You can have different overrides for the same page, in different languages, because the two would never be called at the same time.

If someone selected the French language on your site, the 'french_stylesheet.css' would also be loaded. It should only contain the site-wide changes you want to make to 'stylesheet.css'. For example, change a 'background-image' for your French customers.

If someone went to any of the other pages, that page's CSS file would be loaded. Possibly you want different 'background-image' & 'background-color' on each of 'page_x' pages. Possibly you do not want a border around '.plainBox' most of the time, but on a couple of pages you do... and on one of those pages you want it in black and the other in red.

Possibly you created a NEW tag and did a <span class="newtag"> in your Privacy Statement. It is defined in only one CSS file, 'german_privacy.css' as '.newtag { text-transform: uppercase }' Because, in Germany, that phrase must be in all CAPS, but not in other countries.

Use your CSS files and the standard tags as much as possible, just change their properties when needed. If possible, DON'T HACK the core code. Use your CSS files to do the work for you. When the style coding has been removed from the ZenCart code and people have to decide if they want to go without the upgrade ~or~ undo all their hacks and finally learn about CSS... your site will still be up and running. 

Additional information is contained in the 'read_me' file in the common folder.

[gjh42]

Actually, it is quite possible to have a stylesheet just for one page. The file you quote shows how:

page_name.css // changes to one page
language_page_name.css // changes to one page, when that language is used

Find page_name by looking in the address bar while open to the page desired.
Use page_name.css for changes not related to the language, or language_page_name.css when the changes depend on what language is selected.

(Perhaps you meant that you can't have one stylesheet that covers all of the checkout pages? That is correct; you would need a copy of it for each page in checkout, even if the copies have identical content.)

[jvanree]

Thank you all for the answers. I understand now. I have to make one style sheet (in which style I want the checkout) and than save it a couple of times with another name for the other pages.

Thank you all so much for explaining!!!! You guys really rock with the support!!!

[ronpeled]

Yes, you are right. I also noticed that the shopping cart page has a unique identifier at the body tag. So you can create unique CSS elements like this:

body#shoppingcartBody <elements> {
...
}

[gjh42]

Yep, that's another good way of doing it.
You can even string several selectors in a list, so you only need to make one stylesheet declaration for all of the checkout pages:

#checkout_page1Body .element, #checkout_page2Body .element, #checkout_page3Body .element {
background: url(../images/ckbg.gif);
...
}

(fake names just for examples)