[Sommaire] [Imprimer]

   1  <!--
   2  /**

   3   * @package documentation

   4   * @copyright Copyright 2003-2006 Zen Cart Development Team

   5   * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0

   6   * @version $Id: readme_css_system.html 4872 2006-11-01 23:03:00Z drbyte $

   7   */
   8  //-->

   9  <html>
  10  <style type="text/css">
  11  <!--
  12  body, table{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; }
  13  table.intro {border-color:C96E29; }
  14  td.intro{background-color:#EEEEEE ; border-color:5778ce; font-size:14px; }
  15  td.plainbox, div.callout {border: 1px dashed; border-color: C96E29; margin:5 40 5 40;}
  16  .heading {background-color:5778CE; font-weight:bold; font-size:14px;    width: 100%; }
  17  
  18  .title1 {color:C96E29; font-weight:bold; font-size:22px; }
  19  .title2 {color:C96E29; font-weight:bold; font-size:13px; }
  20  .small {font-size:10px ;}
  21  .error {color:FF0000; }
  22  .filename {font-family: mono, "Courier New", Courier ; font-size:14px; color: c96e29;}
  23  .pseudolink {text-decoration:underline; color:5778CE;}
  24  h1.intro { color: #ffffff; border:1px solid #aca893; background-color: #c96e29;  font-size: 22px;   padding: 4px;}
  25  h1 { color: #ffffff;    border:1px solid #aca893;   background-color: #5778ce;   font-size: 20px;   padding: 4px;}
  26  h2 { color: #c96e29;     font-size: 18px;}
  27  h3 { color: #5778ce;    font-size: 16px; margin-bottom:0px;}
  28  h4 { color: #c96e29;    font-size: 14px;}
  29  
  30  -->
  31  </style>
  32  <title>CSS Per-Page Stylesheet Documentation in Zen Cart(tm)</title>
  33  
  34  <h1>CSS Per-Page Stylesheet Documentation</h1>
  35  <p><em> (a large part of this functionality has been adapted from a contribution by Juxi Zoza 03/15/05)</em></p>
  36  <h2>Zen Cart Stylesheets  </h2>
  37  <p>Zen Cart(tm) stylesheets are located in this folder: <span class="filename">/includes/templates/YOUR_TEMPLATE/css </span></p>
  38  <p>What follows is a description of how one can use Zen Cart's built-in power to pull certain stylesheets for certain conditions.</p>
  39  <p>The CSS files are sent to the browser in this order: (and alphabetically within each case of more than one match):</p>
  40  
  41  <code class="filename">             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style*.css   // are always loaded and at least ONE should contain site-wide properties.
  42  <br />
  43  language_stylesheet.css   // changes to ALL pages, when that language is used<br />
  44  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page_name.css   // changes to one page (use index_home.css for &quot;just the home page&quot;) <br /> 
  45  &nbsp;language_page_name.css   // changes to one page, when that language is used<br />
  46  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c_??.css   // changes to all info pages in a category<br />
  47  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;language_c_??.css   // changes to all info pages in a category, when that language is used<br />
  48  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m_??.css   // changes to a manufacturer's listing page<br />
  49  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;language_m_??.css   // changes to a manufacturer's listing page, when that language is used<br />
  50  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p_??.css   // changes to a product's info page<br />
  51  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;language_p_??.css   // changes to a product's info page, when that language is used<br />
  52  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print*.css   // printer-friendly global usage site-wide changes for printing-only</code>
  53  
  54  
  55  <p>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 subsequent 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.</p>
  56  <p>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.</p>
  57  <p>If someone went to any of the other pages, that page's CSS file would be loaded. Possibly you want different 'background-image' &amp; '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.</p>
  58  <p>Possibly you created a NEW tag and did a &lt;span class=&quot;newtag&quot;&gt; 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.</p>
  59  <p>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 Zen Cart 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.<br>
  60  </p>