Documentation:Service Print

From OpenLP
Jump to: navigation, search

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

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;
}