Ecommerce Templates Admin Panel custom CSS stylesheet

Categories » » » All Pages
26th August 2020

Here is a custom Ecommerce Templates Administration Panel CSS stylesheet. Table margins are tighter, Invoice and Packing Slip page layouts more compact, together with button hover effects, active field highlighting and colour scheme alterations.

View the screenshots in the slideshow above. Developed by I.T.ZAP Webiste Design Works, the new Admin Panel CSS design is available to download for a modest fee.

Key Alterations

  • Layout expanded and optimized to suit desktop computer full HD screen 1920 pixel max-width and iPad; landscape and portrait views. Usage is hardly practical on a small iPhone, although responsive CSS does adjust to fit small screens.
  • Alternative colour scheme for the Main Administration Menu and Sub-Menu drop-downs.
  • Tighter margins between tables to maximise usage of screen width available.
  • New button hover and active field colour highlight effects.
  • Adjustments to printable Invoice and Packing Slip font sizes, margins, padding, borders and greyscale heading background colours to improve A4 page print result. Most orders will print on a single page.” download file contents

(1) ectadmincustom.css

Suitable for Ecommerce Templates ASP or PHP v6.8.1 and later. Upload into your “vsadmin” folder.

  • NOTE: If you already have a “ectadmincustom.css” file containing CSS changes, then do make a Backup copy of that first.
  • ectadmincustom.css” will override all styles in the default “adminstyle.css” file.
  • ectadmincustom.csswill not be overwritten upon uploading ECT Updater files in the future.
  • To add your business logo, address and footer to the printable Invoice and Packing Slip pages, go STORE ADMINEmail MessagesInvoice & Packing Slip Headers / FootersEdit. For best print result, limit the height of your Logo to 150 or 200 pixels max.
  • Add your own CSS modifications to the bottom of “ectadmincustom.css”, or just change the existing styles as desired.

(2) adminstyle.css

Suitable only for Ecommerce Templates ASP or PHP v6.7.3 and earlier releases. Upload into your “vsadmin” folder.

  • v6.8.1+ users should not use this file at all.
  • WARNING. Please be aware that “adminstyle.csswill be overwritten upon uploading ECT Updater files. Accordingly, as a precaution, please do keep a Backup copy of your new custom design “adminstyle.css” file.
  • You will not need the “ectadmincustom.css” file. But do upload that into your “vsadmin” folder as well so, when you do update to a v6.8 release, you will already have the appropriate Admin Panel Custom CSS in place.

(3) 04-invoice-packing-slip-headers-footers.html

Suitable for Ecommerce Templates ASP or PHP v6.8.1 and later.

  • Select menu STORE ADMIN => Email Messages => Invoice & Packing Slip Headers / Footers => Edit Email. (This is the 4th button from the top in the Email Message list.)
  • The HTML file provided contains the raw Source Code that I entered into each of the 6 Header, Address and Footer fields to achieve the IT ZAP Invoice and Packing Slip print layouts you can see in the Slideshow above.
  • This is merely a sample of inline style code that you can edit and adapt for your own business to achieve a similar result.

(4) ectadmincustom-readme.pdf

Confirms what you should do with each file.

Google Chrome or Microsoft Firefox are the preferred web browser choice for Ecommerce Templates website administration, particularly if using CK Editor. Microsoft Edge is OK also now.

Open your browser and go to your Ecommerce Templates Administration Panel Login page. You may need to press the CTRL + F5 keys to force a browser cache refresh and reload the Login page. Now you will see the new CSS changes take effect.

Invoice and Packing Slip Printing Tips

  • Set your web browser to print Background Colors and Graphics.

Mozilla Firefox

  1. Alt key and then Menu: File ⇒ Page Setup
  2. Options: Tick YES, Print Background (colors and images)
  3. Margins & Header/Footer Tab: If desired, set all to --blank--

Mozilla Firefox Page Setup

Google Chrome

  1. Click More settings
  2. Options: Untick NO, Headers and footers
  3. Tick YES, Background graphics

Google Chrome Print Settings

Ecommerce Templates Invoice Print Preview in Google Chrome

Ecommerce Templates Invoice Print Preview in Google Chrome

Version 2 Update, 20th December 2017

  • Flexbox CSS used to make div#adminfooter stick to bottom of screen.
  • Flexbox CSS used on Home page to auto space row of "Updated Info" boxes for Affilate Partners, Ratings, Client Login, Activity Log, Mailing List and Stock Notifications.
  • Prices and labels now "text-align: right" and Quantity "text-align: center", together with padding adjustments.
  • Banner logo padding top and bottom removed to minimize height occupied.
Version 3 Update, 18th January 2018
  • Added CSS classes for the Admin Stats SVG Graph feature introduced in v6.8.4
  • Added “04-invoice-packing-slip-headers-footers.html” to the zip file download.
  • Updated details in the “ectadmincustom-readme.pdf” file.
Version 4 Update, 2nd March 2018
  • Add custom styles for “Number of items defined” div.itemsdefine introduced in v6.8.5
  • Responsive <h2>, <h3>, <h4> heading font-sizes scaled down on smaller screens.
Version 5 Update, 10th March 2018
  • When viewing or printing an Invoice or Packing Slip, prevent the Header Business Logo image from exceeding screen width (or doc width). Make the image height retain it's aspect ratio upon responsive downsize.
  • In “View Orders”, when Multiple Orders are selected, and in the “Action Select” menu down bottom you choose “Invoices” or “Packing Slips”, then press CTRL + P keys and OK button to Print … fixed an issue that prevented Page Breaks from being generated.
Version 6 Update, August 2020
  • Added a CSS entry to restrict both maximum width and height of the Product Image to 90px on Packing Slips and Invoices; a new option added in Ecommerce Templates Version 7.0.1. To activate this feature, add this parameter to your "includes.php" config file:

	$imgonorderdetails=7; // Display product image in Admin Panel Screens. 1=View Order. 2=Packing Slip. 4=Invoice. 6=Invoice and Packing Slip. 7=All screens, except Edit Order. (v7.0.1)
  • If you would like to adjust the maximum dimensions of the Product Image, then simply edit LINES 108 and 110 in the “ectadmincustom.css” stylesheet.
  • Please note that adding Product Images will increase the vertical page height of Packing Slips and Invoices. Therefore, for large orders, the page will likely overflow onto a 2nd page. If you do not like this, then do not add the $imgonorderdetails parameter.

  • Thanks to those who gave me feedback about certain issues.

The “” file will become available for you to download after completing the 3-step checkout process.

The price is in Australian AUD$ currency. I.T. ZAP is not registered for and does not charge GST.

AUD$ 7.00
4 Reviews - Average Rating 5 / 5 (Show All)

Add your review ⇒

Add the finishing touches to Ecommerce Templates

- 26th August 2020

I.T.ZAP has added that finishing touch to what is a very good ecommerce store program, but just lacking a tiny bit on the finished appearance. I.T.ZAP's CSS add-on will save you hours in figuring out what CSS affects what ... and really lets you take your invoices from OK, to awesome !
Also I should mention ... Gary who wrote this, is very responsive to questions and problems. I had a problem with images on my invoices not lining up, and Gary quickly sent me an email with all the fixes and answers to my question. He then went on to update his website and making several improvements based on my problems ... Super helpful and very easy to contact. Thanks for sharing this CSS with all of us for a very reasonable price.

Wonderful tweak

- 20th March 2018

What a wonderful tweak to make the latest Admin Panel Style amazingly improved. Simple and easy to install, with excellent instructions. Worth much more than $6.50


- 07th December 2017

I bought the custom style sheet for the ECT admin panel on 30 November 2017 and this has vastly improved the use of screen real estate. A doddle to install, less than a minute, and the CSS tweaks to the mouseovers make a great admin that bit greater. Wholly recommended :-)

Amazing upgrade

- 06th December 2017

As always ... Gary provides a great product and service. The admin css upgrade is so much better than the stock version. I changed a couple things and colors to match my website theme. Changes are easy to do. Highly recommend this product.

Add your review ⇒

More related pages …

Ecommerce Templates Dynamic PHP Page title, meta description and meta og:tag code
For users of the fantastic Ecommerce Templates PHP shopping cart software, here is a FREE download file containing HTML and PHP code snippets to generate dynamic <title>, <meta description...
Ecommerce Templates Thanks Receipt CSS and Email Templates
AUD$ 13.00
Add the I.T.ZAP thanks-receipt.css stylesheet and Email Header Footer HTML code to your Ecommerce Templates Order Confirmation thanks.php/asp web page to instantly achieve an attractive and profess...
How to configure Ecommerce Templates shopping cart software for Articles
The Ecommerce Templates shopping cart software Version 7.2.1 released 30th March 2020 introduced a method to enter Articles into the content management system, together with appropriate Rich Snippe...