|
|||
A4-Briefpapier als Vorlage für Software mittels CSS
Hallo Zusammen,
ich habe mich nun bereits geraume Zeit hier durch das tolle Forum gelesen; nun arbeite ich an einer Thematik, bei welcher ich etwas Hilfe bräuchte. Vorweg: Was CSS an sich angeht ist mein Wissenstand vermutlich auf dem eines fortgeschrittenen Anfängers. Wie im Titel bereits erwähnt möchte ich ein Briefpapier im Format A4 mittels CSS erstellen, welches als Vorlage für mein Rechnungstool dienen kann. Inhaltlich wurde bereits alles vom Ersteller umgesetzt (style.css): Code:
/* 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: 100%; line-height: 1.25em; } h1, h2, h3, h4 { font-weight: bold; margin-bottom: 1.25em; } ul { margin-bottom: 1.25em; } li, dt, dd { padding: 0.375em 0; } dt { font-weight: bold; } p + p { margin-top: 1.25em; } address { font-style: normal; } /* Basic Table Styling */ table { page-break-inside: auto; width: 100%; } tr { page-break-inside: avoid; page-break-after: auto; border-bottom: 0.12em solid #bbb; } td, th { padding: 0.375em 0; vertical-align: top; } td img, th img { vertical-align: top; } th { color: black; font-weight: bold; text-align: left; padding-bottom: 1.25em; } /* Page Margins & Basic Stylings */ #page { margin-left: auto; margin-right: auto; text-align: left; font-size: 0.875em; } .content { padding-left: 10%; padding-right: 10%; padding-top: 5%; padding-bottom: 5%; page-break-after: always; } h1, h2 { font-size: 1.572em; } .order-branding, .order-addresses, .order-info, .order-items, .order-notes, .order-thanks, .order-colophon { margin-bottom: 3em; } .order-items { page-break-before: auto; page-break-after: auto; } /* Order Branding */ .order-branding .company-logo { margin-bottom: 1em; } /* Order Addresses */ .order-addresses { margin-bottom: 6em; } .order-addresses:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .billing-address { width: 50%; float: left; } .shipping-address { width: 50%; float: left; } /* Switch the addresses for invoices */ .invoice .billing-address { float: right; } /* Order Info */ .order-info ul { border-top: 0.24em solid black; } .order-info li { border-bottom: 0.12em solid #bbb; } .order-info li strong { min-width: 18%; display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 0; } /* Order Items */ .order-items { margin-bottom: 1em; } .order-items .head-name, .order-items .product-name, .order-items .total-name { width: 50%; } .order-items .head-quantity, .order-items .product-quantity, .order-items .total-quantity, .order-items .head-price, .order-items .product-price, .order-items .total-price { width: 25%; } .order-items tbody .name { font-weight: bold; } .order-items p { display: inline; } .order-items small, .order-items dt, .order-items dd { font-size: 0.785em; font-weight: normal; line-height: 150%; padding: 0; margin: 0; } .order-items dt, .order-items dd { display: block; float: left; } .order-items dt { clear: left; padding-right: 0.2em; } .order-items tfoot tr:last-child { font-weight: bold; } .order-items tfoot tr:last-child .total-price { font-size: 0.785em; font-weight: normal; } .order-items tfoot tr:last-child .total-price .amount:first-child { font-size: 1.273em; font-weight: bold; } .order-items tfoot tr:last-child { border-bottom: 0.24em solid black; } /* Order Notes */ .order-notes { font-size: 0.785em; line-height: 150%; margin-bottom: 6em; } .order-notes h4 { margin-bottom: 0; } /* Order Thanks */ .order-thanks { margin-left: 50%; } /* Order Colophon */ .order-colophon { font-size: 0.785em; line-height: 150%; margin-bottom: 0; } .colophon-policies { margin-bottom: 1.25em; } /* CSS Media Queries for Print ------------------------------------------*/ @media print { body { font-size: 8pt; } }
Besten Dank im Voraus. Manfred |
Sponsored Links |
|
|||
Zitat:
willst du das wirklich? Das kann man ja zum Glück bei den Druckereinstellungen deaktivieren. Du musst das bei html als Hintergrundbild angeben. Du kannst dazu % oder cm für die Grösse verwenden. zu2 body {margin-top:25%} Alternativ auch in cm. Alle Einstellungen natürlich zu media print.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Ja, das will ich wirklich. Das Ganze ist lediglich für mich bestimmt. Ich möchte Rechnungen einfach unkompliziert und v.a. automatisch über den im Mac implementierten pdf-Drucker via Befehl "Drucken" aus meiner Shop-Software ausgeben + dafür brauche ich das.
Danke dir für die Info, ich werde das gleich mal testen. |
|
|||
So, habe nun beides ausprobiert.
Punkt 2.: klappt wunderbar. Punkt 1.: bekomme ich irgendwie nicht geregelt. Folgendes habe ich getestet, beide Varianten ohne Erfolg: Code:
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; background-image: url ("http://www.meineseite.de/wp/wp-content/uploads/2014/06/meinbild.png"); } Code:
@media print { body { font-size: 8pt; margin-top: 14%; background-image: url ("http://www.meineseite.de/wp/wp-content/uploads/2014/06/meinbild.png"); } } |
|
|||
Evtl. auch über einen hook in der functions.php möglich?
Hier am Beispiel "Ändern der Schriftart": Code:
function my_serif_font_and_large_address() { ?> <style> #page { font-size: 1em; font-family: Georgia, serif; } .order-addresses address { font-size: 2.5em; line-height: 125%; } </style> <?php } add_action( 'wcdn_head', 'my_serif_font_and_large_address', 20 ); Danke. |
Stichwörter |
briefpapier, css bilder, hintergrund |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Untermenü mittels CSS? | K-S-K | CSS | 13 | 09.11.2010 05:05 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |
navileiste mittels css | jan99 | CSS | 2 | 04.08.2005 13:32 |
Einfaches Menü mittels CSS | BabbleBoy | CSS | 19 | 31.07.2005 22:08 |