Ecommerce Templates Admin Panel custom CSS stylesheet

Categories » » All Pages
30th July 2018

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. 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.

ect-admin-css.zip” 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 for Ecommerce Templates ASP or PHP v6.7.3 and earlier releases. Upload into your “vsadmin” folder. (v6.8.1+ users will not need 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) ect-admin-css-readme.pdf

Confirms what you should do with each file.

Mozilla Firefox or Google Chrome are the preferred web browser choice for Ecommerce Templates website administration, particularly if using CK Editor.

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 Shading.

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. Ctrl + P keys and in the left-hand column, click + more settings
  2. Options: Untick NO, Headers and footers
  3. Tick YES, Background graphics

Google Chrome Print Settings


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 “ect-admin-css-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, 30th July 2018
  • Minor field label width and font-size adjustment in the “View Orders” section.

Thanks to those who gave me feedback about certain issues.


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

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

$6.50
 
 
3 Comments - Average Rating 5 / 5 (Show All)

Add your comment ⇒

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

Excellent

- 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 comment ⇒

You may also be interested in …