|
|
|
<!-- toc -->
|
|
|
|
- [Create a CSS file](#create-a-css-file)
|
|
|
|
- [HTML layout](#html-layout)
|
|
|
|
- [Edit the CSS](#edit-the-css)
|
|
|
|
## Create a CSS file
|
|
|
|
|
|
|
|
Start OpenLP, go to the Tools menu and select Open Data Folder. If there
|
|
|
|
is a file called servicePrint.css, then delete it.
|
|
|
|
|
|
|
|
In this folder, create a file called service\_print.css
|
|
|
|
|
|
|
|
Paste in the
|
|
|
|
following:
|
|
|
|
|
|
|
|
` `
|
|
|
|
`/*`
|
|
|
|
`Edit this service_print.css file to customize the service order print. Note, that not all CSS`
|
|
|
|
`properties are supported. See:`
|
|
|
|
`http://doc.qt.io/qt-5/richtext-html-subset.html#css-properties`
|
|
|
|
`*/`
|
|
|
|
` `
|
|
|
|
`.serviceTitle {`
|
|
|
|
` font-weight:600;`
|
|
|
|
` font-size:x-large;`
|
|
|
|
` color:black;`
|
|
|
|
`}`
|
|
|
|
` `
|
|
|
|
`.item {`
|
|
|
|
` color:black;`
|
|
|
|
`}`
|
|
|
|
` `
|
|
|
|
`.itemTitle {`
|
|
|
|
` font-weight:600;`
|
|
|
|
` font-size:large;`
|
|
|
|
`}`
|
|
|
|
` `
|
|
|
|
`.itemText {}`
|
|
|
|
` `
|
|
|
|
`.itemFooter {`
|
|
|
|
` font-size:8px;`
|
|
|
|
`}`
|
|
|
|
` `
|
|
|
|
`.itemNotes {}`
|
|
|
|
` `
|
|
|
|
`.itemNotesTitle {`
|
|
|
|
` font-weight:bold;`
|
|
|
|
` font-size:12px;`
|
|
|
|
`}`
|
|
|
|
` `
|
|
|
|
`.itemNotesText {`
|
|
|
|
` font-size:11px;`
|
|
|
|
`}`
|
|
|
|
` `
|
|
|
|
`.media {}`
|
|
|
|
` `
|
|
|
|
`.mediaTitle {`
|
|
|
|
` font-weight:bold;`
|
|
|
|
` font-size:11px;`
|
|
|
|
`}`
|
|
|
|
` `
|
|
|
|
`.mediaText {}`
|
|
|
|
` `
|
|
|
|
`.imageList {}`
|
|
|
|
` `
|
|
|
|
`.customNotes {`
|
|
|
|
` margin-top: 10px;`
|
|
|
|
`}`
|
|
|
|
` `
|
|
|
|
`.customNotesTitle {`
|
|
|
|
` font-weight:bold;`
|
|
|
|
` font-size:11px;`
|
|
|
|
`}`
|
|
|
|
` `
|
|
|
|
`.customNotesText {`
|
|
|
|
` font-size:11px;`
|
|
|
|
`}`
|
|
|
|
` `
|
|
|
|
`.newPage {`
|
|
|
|
` page-break-before:always;`
|
|
|
|
`}`
|
|
|
|
|
|
|
|
## HTML layout
|
|
|
|
|
|
|
|
The HTML that gets generated looks something like
|
|
|
|
this:
|
|
|
|
|
|
|
|
`<html>`
|
|
|
|
`<head>`
|
|
|
|
` <title>Service Order Sheet</title>`
|
|
|
|
`</head>`
|
|
|
|
`<body>`
|
|
|
|
` <h1 class="serviceTitle">Service Order Sheet</h1>`
|
|
|
|
` <div class="item">`
|
|
|
|
` <h2 class="itemTitle">`
|
|
|
|
` <img src=":/plugins/plugin_songs.png">`
|
|
|
|
` <span> Amazing Grace</span>`
|
|
|
|
` </h2>`
|
|
|
|
` <div class="itemText">`
|
|
|
|
` <p>Amazing grace how sweet the sound that saved a wretch like me<br>`
|
|
|
|
` I once was lost but now I'm found, was blind but now I see.</p>`
|
|
|
|
` </div>`
|
|
|
|
` <div class="itemText">`
|
|
|
|
` <p>Twas grace that taught my heart to fear, and grace my fears relieved<br>`
|
|
|
|
` How precious did that grace appear the hour I first believed!</p>`
|
|
|
|
` </div>`
|
|
|
|
` <div class="itemFooter">`
|
|
|
|
` John Newton<br>`
|
|
|
|
` 1982 Jubilate Hymns Limited`
|
|
|
|
` </div>`
|
|
|
|
` <div class="itemNotes">`
|
|
|
|
` <span class="itemNotesTitle">Notes:</span>`
|
|
|
|
` <span class="itemNotesText">Song Notes<br>`
|
|
|
|
` More Notes</span>`
|
|
|
|
` </div>`
|
|
|
|
` </div>`
|
|
|
|
` `
|
|
|
|
` <div class="item newPage">`
|
|
|
|
` <h2 class="itemTitle">`
|
|
|
|
` <img src=":/plugins/plugin_songs.png">`
|
|
|
|
` <span> And Can It Be</span>`
|
|
|
|
` </h2>`
|
|
|
|
` <div class="itemText">`
|
|
|
|
` <p>And can be that I should gain,<br>`
|
|
|
|
` an interest in my Savior's blood?<br>`
|
|
|
|
` Died He for me, who caused His pain?<br>`
|
|
|
|
` For me, who Him to death pursued?<br>`
|
|
|
|
` Amazing love, how can it be<br>`
|
|
|
|
` That thou my Lord should die for me?</p>`
|
|
|
|
` </div>`
|
|
|
|
` <div class="itemText">`
|
|
|
|
` <p>Amazing love, how can it be<br>`
|
|
|
|
` That thou my God should die for me?</p>`
|
|
|
|
` </div>`
|
|
|
|
` <div class="itemFooter">`
|
|
|
|
` Lindell Cooley<br>`
|
|
|
|
` Public Domain`
|
|
|
|
` </div>`
|
|
|
|
` </div>`
|
|
|
|
` `
|
|
|
|
` <div class="item">`
|
|
|
|
` <h2 class="itemTitle">`
|
|
|
|
` <img src=":/plugins/plugin_media.png">`
|
|
|
|
` <span> Wildlife.wmv</span>`
|
|
|
|
` </h2>`
|
|
|
|
` <div class="itemNotes">`
|
|
|
|
` <span class="itemNotesTitle">Notes:</span>`
|
|
|
|
` <span class="itemNotesText">Movie Notes</span>`
|
|
|
|
` </div>`
|
|
|
|
` <div class="media">`
|
|
|
|
` <span class="mediaTitle">Playing time:</span>`
|
|
|
|
` <span class="mediaText">0:00:00</span>`
|
|
|
|
` </div>`
|
|
|
|
` </div>`
|
|
|
|
` `
|
|
|
|
` <div class="item newPage">`
|
|
|
|
` <h2 class="itemTitle">`
|
|
|
|
` <img src=":/plugins/plugin_bibles.png">`
|
|
|
|
` <span> John 3:16-17 (ASV)</span>`
|
|
|
|
` </h2>`
|
|
|
|
` <div class="itemText">`
|
|
|
|
` <p><sup>3:16</sup> For God so loved the world, that he gave his only begotten Son, that whosoever believeth on him should not perish, but have eternal life.</p>`
|
|
|
|
` </div>`
|
|
|
|
` <div class="itemText">`
|
|
|
|
` <p><sup>3:17</sup> For God sent not the Son into the world to judge the world; but that the world should be saved through him.</p>`
|
|
|
|
` </div>`
|
|
|
|
` <div class="itemFooter">`
|
|
|
|
` ASV, Copyright, Permissions`
|
|
|
|
` </div>`
|
|
|
|
` <div class="itemNotes">`
|
|
|
|
` <span class="itemNotesTitle">Notes:</span>`
|
|
|
|
` <span class="itemNotesText">Bible reading notes</span>`
|
|
|
|
` </div>`
|
|
|
|
` </div>`
|
|
|
|
` `
|
|
|
|
` <div class="item">`
|
|
|
|
` <h2 class="itemTitle">`
|
|
|
|
` <img src=":/plugins/plugin_images.png">`
|
|
|
|
` <span> Images</span>`
|
|
|
|
` </h2>`
|
|
|
|
` <ol class="imageList">`
|
|
|
|
` <li>Winter.jpg</li>`
|
|
|
|
` <li>Sunset.jpg</li>`
|
|
|
|
` </ol>`
|
|
|
|
` <div class="itemNotes">`
|
|
|
|
` <span class="itemNotesTitle">Notes:</span>`
|
|
|
|
` <span class="itemNotesText">Image notes</span>`
|
|
|
|
` </div>`
|
|
|
|
` </div>`
|
|
|
|
` `
|
|
|
|
` <div class="item newPage">`
|
|
|
|
` <h2 class="itemTitle">`
|
|
|
|
` <img src=":/plugins/plugin_custom.png">`
|
|
|
|
` <span> Lord's Prayer Traditional</span>`
|
|
|
|
` </h2>`
|
|
|
|
` <div class="itemText">`
|
|
|
|
` <p>Our Father,<br>`
|
|
|
|
` who art in heaven,<br>`
|
|
|
|
` hallowed be thy name.<br>`
|
|
|
|
` Thy Kingdom come,<br>`
|
|
|
|
` thy will be done,<br>`
|
|
|
|
` on earth as it is in heaven</p>`
|
|
|
|
` </div>`
|
|
|
|
` <div class="itemText">`
|
|
|
|
` <p>Give us this day our daily bread.<br>`
|
|
|
|
` And forgive us our trespasses,<br>`
|
|
|
|
` as we forgive those<br>`
|
|
|
|
` who trespass against us.<br>`
|
|
|
|
` And lead us not into temptation,<br>`
|
|
|
|
` but deliver us from evil.<br>`
|
|
|
|
` For thine is the kingdom,<br>`
|
|
|
|
` the power and the glory,<br>`
|
|
|
|
` for ever and ever. Amen</p>`
|
|
|
|
` </div>`
|
|
|
|
` <div class="itemNotes">`
|
|
|
|
` <span class="itemNotesTitle">Notes:</span>`
|
|
|
|
` <span class="itemNotesText">Custom Item Notes</span>`
|
|
|
|
` </div>`
|
|
|
|
` </div>`
|
|
|
|
` `
|
|
|
|
` <div class="item">`
|
|
|
|
` <h2 class="itemTitle">`
|
|
|
|
` <img src=":/plugins/plugin_presentations.png">`
|
|
|
|
` <span> Sermon Presentation.pptx</span>`
|
|
|
|
` </h2>`
|
|
|
|
` <div class="itemNotes">`
|
|
|
|
` <span class="itemNotesTitle">Notes:</span> `
|
|
|
|
` <span class="itemNotesText">Presentation notes</span>`
|
|
|
|
` </div>`
|
|
|
|
` </div>`
|
|
|
|
` `
|
|
|
|
` <div class="customNotes">`
|
|
|
|
` <span class="customNotesTitle">Custom Service Notes:</span> `
|
|
|
|
` <span class="customNotesText">Custom Footer Text Goes here like this</span>`
|
|
|
|
` </div>`
|
|
|
|
`</body>`
|
|
|
|
`</html>`
|
|
|
|
|
|
|
|
## Edit the CSS
|
|
|
|
|
|
|
|
Edit the CSS file to produce the required style.
|
|
|
|
|
|
|
|
Note, that not all CSS properties are supported. See: [Qt4 CSS
|
|
|
|
subset](http://doc.trolltech.com/4.7/richtext-html-subset.html#css-properties)
|
|
|
|
|
|
|
|
### Example: Item titles with notes on right hand side
|
|
|
|
|
|
|
|
This service\_print.css assumes the slide text will not be included.
|
|
|
|
|
|
|
|
` `
|
|
|
|
`.itemTitle {`
|
|
|
|
` font-weight:bold;`
|
|
|
|
` font-size:large;`
|
|
|
|
` margin: 0px;`
|
|
|
|
`}`
|
|
|
|
`.itemNotes {`
|
|
|
|
` margin-left: 300px;`
|
|
|
|
` margin-top: 0px;`
|
|
|
|
`}`
|
|
|
|
`.itemNotesTitle {`
|
|
|
|
` font-weight:bold;`
|
|
|
|
`}` |