I would like make some minor CSS changes to the print invoice page in the admin section of the store. How do I do that?

Step-by-step guide

Here are the steps involved:

  1. Install and activate “Custom Skin” module.

  2. Create the following custom script in your X-Cart installation:


  3. Add the following code to the custom script:

    namespace XLite\Module\XC\CustomSkin\View;
    abstract class AView extends \XLite\View\AView implements \XLite\Base\IDecorator
         * Return theme common files
         * @param boolean $adminZone Admin zone flag OPTIONAL
         * @return array
        protected function getThemeFiles($adminZone = null)
            $list = parent::getThemeFiles($adminZone);
            $list[static::RESOURCE_CSS][] = "modules/XC/CustomSkin/custom_style.css";
            return $list;
  4. Create your custom CSS files:
    • for admin back-end: skins/admin/en/modules/XC/CustomSkin/custom_style.css
    • for customer front-end: skins/default/en/modules/XC/CustomSkin/custom_style.css
  5. Add your custom code to the CSS files created, for example:

    .invoice-box .header .address strong{
      font-size: 27px !important;
      margin: 10px 10px 10px 14px;
  6. Re-generate X-Cart cache.

You can also view the source code of the print invoice page using a special URL, for example:



  • target=order

  • order_number=1

  • mode=invoice

are the required parameters to view the print out customer receipt page.