Title: Layout design since update
Last modified: August 21, 2016

---

# Layout design since update

 *  [scruffy1](https://wordpress.org/support/users/scruffy1/)
 * (@scruffy1)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/layout-design-since-update/)
 * Hi
 * fantastic plugin thank you 🙂
 * I am stuck on how to make the new css file look like my old layout for printing
   delivery notes, it appears there are changes in the file which don’t match the
   old css file, below is the layout I want to keep from old css, any help is much
   appreciated
 * thanks
 *     ```
       /* Simple CSS Reset and Print options
       ------------------------------------------*/
   
       html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, table, ol, ul, dl, li, dt, dd {
       	border: 0 none;
       	font: inherit;
       	margin: 0;
       	padding: 0;
       	vertical-align: baseline;
       }
   
       body {
       	line-height: 1;
       }
   
       ol,
       ul {
       	list-style: none;
       }
   
       table {
       	border-collapse: collapse;
       	border-spacing: 0;
       }
   
       /* Template Page Layout
       ------------------------------------------*/
   
       /* Main Body */
       body {
       	background: #fff;
       	color: #000;
       	font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
       	font-size: 0.875em;
       	line-height: 100%;
       }
   
       h1,
       h2,
       h3,
       h4 {
       	font-weight: bold;
       }
   
       li,
       ul {
       	margin-bottom: 1.25em;
       }
   
       p + p {
       	margin-top: 1.25em;
       }
   
       /* Basic Table Styling */
       table {
       	page-break-inside: auto;
       }
   
       tr {
       	border-top: 1px #ccc solid;
       	border-bottom: 1px #ccc solid;
       	page-break-inside: avoid;
       	page-break-after: auto;
       }
   
       td,
       th {
       	border-left: 1px #ccc solid;
       	border-right: 1px #ccc solid;
       	padding: 0.375em;
       	vertical-align: middle;
       }
   
       th {
       	color: #000;
       	font-weight: bold;
       	text-align: left;
       }
   
       /* Special Margin & Overflow Stylings */
       #page {
       	margin-left: auto;
       	margin-right: auto;
       	padding-top: 5%;
       	padding-bottom: 5%;
       	padding-left: 10%;
       	padding-right: 6%;
       	text-align: left;
       /* 	page-break-after: always;	 */
       }
   
       #letter-header,
       #order-items,
       #order-summary,
       #order-notes {
       	margin-bottom: 2em;
       }
   
       #order-info,
       #order-summary {
       	margin-bottom: 6em;
       }
   
       #page,
       #letter-header,
       #order-listing,
       #order-summary,
       #order-notes,
       #letter-footer {
       	overflow: hidden;
       }
   
       #order-items,
       #order-summary,
       #order-notes {
       	page-break-before: auto;
       	page-break-after: auto;
       }
   
       /* Delivery Notes Head */
       #letter-header .heading {
       	float: right;
       	width: 53%;
       	font-weight: bold;
       	margin-top: 40px;
   
       }
   
       #letter-header .company-name {
       	font-weight: bold;
       	font-size: 1.25em;
       }
   
       #letter-header .company-info {
       	float: left;
       	width: 47%;
       	margin-top: .55em;
       	font-size: 0.80em;
       	line-height: 100%;
       }
   
       /* Order Listing - #order-listing */
       #order-listing {
       	float: right;
       	width: 53%;
       	font-size: 1.25em;
       	line-height: 100%;
       	margin-top: 0px;
       	margin-bottom: 0px;
       }
   
       /* Order Info - #order-info */
       #order-info {
       	float: left;
       	width: 43%;
       }
   
       /* Order Items - #order-items */
       #order-items {
       	clear: both;
       }
   
       #order-items table {
       	width: 100%;
       }
   
       #order-items .description {
       	width: 50%;
       	font-size: 10px;
       }
   
       #order-items .price {
       	width: 25%;
       }
   
       #order-items dl {
       	display: inline;
       	margin-bottom: 0;
       	color: #666;
       }
   
       #order-items dt,
       #order-items dd {
       	display: inline;
       	margin-bottom: 0;
       	font-size: 0.75em;
       }
       #order-items dt {
       	margin-left: 0.75em;
       }
   
       #order-items dd {
       	margin-left: 0.2em;
       }
   
       /* Order Summary - #order-summary */
       #order-summary {
       	float: right;
       	width: 50%;
       }
   
       #order-summary table {
       	width: 100%;
       	page-break-inside: avoid;
       }
   
       #order-summary .price {
       	width: 50%;
       }
   
       #order-summary tr:last-child {
       	border-top: 2px solid #000;
       	border-bottom: 2px solid #000;
       	font-weight: bold;
       }
   
       #order-summary small,
       #order-summary .includes_tax {
       	font-size: 0.75em;
       	color: #666;
       }
   
       /* Order Notes - #order-notes */
       #order-notes {
       	clear: both;
       }
       #order-notes .notes-shipping {
       	float: left;
       	width: 50%;
       }
       #order-notes .notes-personal {
       	float: right;
       	width: 50%;
       	font-weight: bold;
       }
   
       /* Footer Imprint */
       #letter-footer {
       	border-top: 1px solid #ccc;
       	padding-top: 1em;
       	color: #666;
       	font-size: 0.60em;
       	border-bottom: 1px solid #ccc;
       }
   
       #letter-footer p + p {
       	margin-top: 1em;
       }
   
       #letter-footer .policies,
       #letter-footer .imprint {
       	margin-bottom: 1em;
       }
   
       /* CSS Media Queries for Print
       ------------------------------------------*/
   
       @media print {
       	body {
       		font-size: 8pt;
       	}
       }
       ```
   
 * [https://wordpress.org/plugins/woocommerce-delivery-notes/](https://wordpress.org/plugins/woocommerce-delivery-notes/)
 * _[ No bumping please_

The topic ‘Layout design since update’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce-delivery-notes/assets/icon-256x256.jpg?rev=2829362)
 * [Print Invoice & Delivery Notes for WooCommerce](https://wordpress.org/plugins/woocommerce-delivery-notes/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce-delivery-notes/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce-delivery-notes/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce-delivery-notes/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce-delivery-notes/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce-delivery-notes/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [scruffy1](https://wordpress.org/support/users/scruffy1/)
 * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/layout-design-since-update/)
 * Status: not a support question