Updated Customizing with CSS area in Print Service

This commit is contained in:
John Morris 2019-05-08 04:08:15 +00:00 committed by Raoul Snyman
parent a7231dc953
commit 4aff5e4a3e
3 changed files with 58 additions and 10 deletions

View File

@ -499,7 +499,7 @@ Advanced
**Allow presentation application to be overridden:** **Allow presentation application to be overridden:**
With this option selected, you will see *Present using* area with a dropdown With this option selected, you will see *Present using* area with a dropdown
box on the Presentations toolbar in :ref:`media-manager` which gives you the box on the Presentations toolbar in the Library :ref:`media-manager-presentations` which gives you the
option to select the presentation program you want to use. option to select the presentation program you want to use.
PowerPoint options PowerPoint options

View File

@ -214,6 +214,8 @@ in the verse list.
.. image:: pics/mediamanager_bibles_results.png .. image:: pics/mediamanager_bibles_results.png
.. _media-manager-presentations:
Presentations Presentations
------------- -------------

View File

@ -76,19 +76,27 @@ Options
**Include play length of media items:** **Include play length of media items:**
This option will print the length of media items in the service. This option will print the length of media items in the service.
.. _advanced:
Customizing with CSS (Advanced) Customizing with CSS (Advanced)
------------------------------- -------------------------------
It is possible to customize the printed service using CSS. To do this go to It is possible to customize the printed service using CSS. To do this go to
:menuselection:`Tools --> Open Data Folder` If you have a file named :menuselection:`Tools --> Open Data Folder` If you have a file named
servicePrint.css delete it. In the open folder create a file named servicePrint.css delete it.
service_print.css containing your customizations. Paste the following into
service_print.css:: Locate the folder in the Data Folder named serviceprint.
If you do not have a serviceprint folder in your Data folder, you will need
to create a new folder named serviceprint in the Data folder.
Create a file named service_print.css in the serviceprint folder and paste
the following into service_print.css then make your changes to this file::
/* /*
Edit this service_print.css file to customize the service order print. Note, that not all CSS Edit this service_print.css file to customize the service order print.
properties are supported. See: Note, that not all CSS properties are supported.
http://doc.trolltech.com/4.7/richtext-html-subset.html#css-properties Please see https://doc.qt.io/qt-5/stylesheet-reference.html for details
concerning the supported properties.
*/ */
.serviceTitle { .serviceTitle {
@ -307,11 +315,11 @@ The HTML layout should look something like this::
Edit the CSS file to produce the required style. Edit the CSS file to produce the required style.
**Note:** not all CSS properties are supported. See **Note:** Not all CSS properties are supported. See
`Qt4 CSS subset <http://doc.trolltech.com/4.7/richtext-html-subset.html#css-properties>`_ `Qt5 CSS subset <https://doc.qt.io/qt-5/stylesheet-reference.html>`_
for more information. for more information.
**Example:** Item titles with notes on right hand side. **Example 1:** Item titles with notes on right hand side.
This service_print.css assumes the slide text will not be included.:: This service_print.css assumes the slide text will not be included.::
@ -328,6 +336,44 @@ This service_print.css assumes the slide text will not be included.::
font-weight:bold; font-weight:bold;
} }
**Example 2:** Bold Item Names and increase Font Size to 24 point for the Item Title and Item Text.
For this example, update the following sections of the original CSS file::
.itemTitle {
font-weight:bold;
font-size:24pt;
margin: 0px;
}
.itemText {
font-size:24pt;
}
**Transfering with Your style changes for editing**
After modifying the .css file, the copy button will not capture the output with the
changes made to the .css file. The Print function will print with the changes in
the .css file and the Copy as HTML button will capture the output with the changes
made to the .css file.
If you need to edit the output of the service print window here is a workaround that will produce
a copy of your .css changes for use in your word processer.
1. Open the service print window.
2. Make any needed changes in the options menu.
3. Select the 'Copy as HTML' button.
4. Open a text editor.
5. Paste the copied text into the text editor.
6. Save the file from the text editor with the .html file extension.
7. Open the file you saved in your web browser.
8. Select and Copy the text in the web browser.
9. Open your word processor.
10. Paste the copied text into your word processor.
Note: If the first line in your word processor is not what is shown in your web browser,
try a different web browser. Some web browsers will not copy the formating for the first
line of text in the browser window.
.. The following section defines the inline pics .. The following section defines the inline pics
.. |printbutton| image:: pics/general_print.png .. |printbutton| image:: pics/general_print.png