WordPress.org

Forums

WooCommerce Print Invoice & Delivery Note
Layout design since update (1 post)

  1. scruffy1
    Member
    Posted 1 year ago #

    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/

    [ No bumping please. ]

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce Print Invoice & Delivery Note
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

  • RSS feed for this topic
  • Started 1 year ago by scruffy1
  • This topic is not a support question
  • WordPress version: 3.8.2

Tags

No tags yet.