House Style

 

Setting your “House Style”

The formating of songs and other Items shown in WorshipSession is completely variable. This article describes how you can change
the appearance of Items using CSS.

HTML and CSS

The appearance of Items in WorshipSession is controlled by Style Sheets. A Style Sheet is a list of instructions that specify the font that should be used, its colour, etc. Style sheets are “human readable” and can be changed with a simple text editor such as Notepad. Some of the Style instructions used for WorshipSession songs look like this:

font: 48pt "Dom Casual"
line-height:48pt;
text-align:left;
margin:0px;
margin-left:2px;

These instructions are clearly readable, but the syntax is very precise - they are formatted according to a particular “language” called CSS. The purpose of this article is not to provide a complete description of CSS, but to enable you to make simple changes and establish a “house style” that meets your specific requirements:

• Some users need a bigger font - the folk at the back can’t see the words!
• Others want a smaller font, so they can fit whole songs onto one screen.
• Some churches prefer to see their songs centre-justified.
• You may want to try a more formal typeface, or perhaps a less formal one.
• Special occasions may call for a particular “loud” or “cool” appearance -
  you can easily define more than one “house style” as befits the occasion.

WorshipSession includes several Global Styles - some “dark on light” styles and some “light on dark” styles. The idea of using a black background is usually strange to new users (it’s impractical with an OHP) but it has real advantages, and is the recommended style for WorshipSession. See our article black is the new white for more on this. You can change the “Global Style” of WorshipSession using the “C3” Utility.

The Global Style ("C3") Utility works by copying all the files in a /Style sub-folder into the /Style folder, where WorshipSession will apply the style rules to songs. To create your own “house style", follow these steps, explained in detail below:

• Make a copy of one of the existing /Style sub-folders,
• Use a text editor such as Notepad to Modify the CSS files in your new folder,
• Use the Global Style ("C3") Utility to apply your new style.

Copy one of the existing /Style sub-folders

The folder we refer to here as /Style will usually be found at

C:\Program Files\WorshipSession\style

You would normally use Windows Explorer to copy one of the sub-folders. (If you don’t know how to use Explorer to copy a folder, you will need to phone a friend, or contact the WorshipSession team.)

We recommend that you make a copy of the folder, rather than editing the supplied CSS files directly, because if you upgrade your installation in the future, the supplied folders may be overwritten.

If your House Style will use a dark background, copy one of the Dark folders, otherwise copy one of the Light folders.

Change the CSS file using Notepad

There are a number of CSS files in the folder. Edit the ws_song file using your favourite text editor. We recommend using a simple program such as Notepad.

The file includes comments to help you, but there may be a number of items that are a complete mystery. The obvious advice is - if you don’t understand something, don’t change it! Contact the WorshipSession team if you can’t see how to make the changes you need.

If you change the font used for songs, it is likely that the display of guitar chords will be affected, and you will also need to change the vertical spacing of chords. See the instructions in the ws_song.css file, relating to the .chord class.

For most purposes you will only need to change the ws_song and ws_bible files. The ws_display file contains global settings (see “Global Transitions”, below), and the rules in ws_session enable you to change the appearance of the Session, for example to make it easier or harder to see. (Dual-screen users - note that ws_session.css contains separate rules to control the colours used in dual-screen mode.)

Colour me beautiful

A brief note about CSS colours - the colour of text is controlled by instructions like color: #ffc; - although you can use colour names such as "red", "white", and "blue" in CSS, you may prefer to use more subtle shades of colour, specified by numbers. The expression "#ffc" is a number, which is

• in Hex, and
• encoded as (Red, Green, Blue).

Hex is a scheme for expressing values 0..15 in a single digit, using (0..9) and (a..f). The three digits control the three primary colours over the range from “fully off” to “fully on”, So the expression "#ffc" above means

• Red: 15/15^ths
• Green: 15/15^ths
• Blue: 12/15^ths

This results in the pale yellow text colour that is used by default in WorshipSession. With some experimentation you will be able to find the colour appropriate to your house style.

Outlined / 3D text

Worshipsession has a powerful and flexible mechanism for producing a variety of different text effects:

• ‘Outlined’ text has a fine line drawn around each character. This helps to define the characters and makes them easier to see, especially when used with a photo or video background.
• ‘Raised’ text looks like it is standing out of the background.
• ‘Engraved’ text looks like it is carved into the background.
• ‘Drop Shadow’ effect shows a shadow behind each character.

flat
Outlined Outlined Outlined	Raised Raised Raised
Engraved Engraved Engraved	Shadow Shadow Shadow

The effects are “fully tweakable”, and can range from really subtle to really wacky.

When WorshipSession draws a paragraph of text, it actually draws the same paragraph 3 times: a “shadow”, then a “highlight”, and finally a “face” The three paragraphs are superimposed, with the “face” being on the top, partially obscuring the other two. In the simple ‘Outlining’ case above, “shadow”, and “highlight” are both black, and they’re offset “North West” and “South East” by 1 pixel in each direction, so that only their edges can be seen. This has the effect of drawing a black border around each character.

The ‘Raised’ and ‘Engraved’ effects are achieved using different colours, taking into account the fact that the eye expects light to fall from above. If the top edge of characters looks lighter than the bottom, it looks like the character is in front of the background. Conversely if it’s darker, the text looks engraved. If you turn your screen upside down (which is not recommended!) the 3D effects above will be reversed.

The “shadow” example above shows how creative use of CSS can produce creative effects.

The 3D classes

To acheive these effects, WorshipSession creates three new “classes” for the text of songs. The song is transformed so that in place of one simple <P> (Paragraph) element, each verse of the song consists of three paragraphs in a container, like this:

The "DIV" container arranges for the three paragraphs to overlap and so create the effect. Note that the transformation is done “on the fly” - no changes are made to the HTML files stored on your computer’s disc.

In the stylesheet file, ws_song.css, you can see groups of rules for ".3Dshadow", "3Dhighlight", and "3Dface". These control the appearance of the 3D effect.

Certain paragraphs in songs already have "chorus" or "refrain" class names. WorshipSession keeps these names, but extends them by appending the class names described above, so that a chorus is transformed like this:

You can also find style rules for these classes in the stylesheet file - ws_song.css. Since each class has separate rules, you can use a different 3D effect for verses and choruses.

Note one effect of the 3D transformation is that the style rules for the simple classes "chorus" and "refrain" are not normally used. Also style rules for the "P" element may be overridden by the rules for the various "3D" classes.

Disabling 3D effects

You can disable the 3D effects completely, perhaps because you don't require it, or it produces strange effects on your PC. In ws_song.css, there’s an entry like this, which is a selector with no rules inside:

.3Dtexteffect { }

If you remove this selector or rename it, the 3D effects will be disabled. If you write your own HTML files, you can also disable 3D effects for individual paragraphs using the "noshadow" attribute.

Configuring Global Transitions

WorshipSession can use a “Gradient Wipe” transition between songs, instead of the default “snap out, snap in” style. The wipe transition is also used when showing the Feature, and on “black screen” (B function).

To configure the Global Transition, look at the CSS rules in ws_display.css. Near the top of the file there are two filter: entries. One or both may be “commented out” (the comment marks around the entries prevent them being effective). Remove the comments around one entry, and return to WorshipSession to see the effect. To avoid confusion only one filter: entry should be “un-commented”.

Alternative filters have been provided because the “Gradient Wipe” filter looks great, but it needs a fast PC to work effectively. The simpler “Zigzag” filter works OK on slower machines.

Note that although Microsoft has implemented some other transitions in Internet Explorer, most of them don’t work effectively as Global Transitions in WorshipSession.

Load your new House Style

Remember that when you edit the CSS files in your “house style” folder, you will not see the result in WorshipSession until you use the Global Style ("C3") Utility to apply your new style.

Changing style “on the fly”

WorshipSession can load a new style folder while it is running - this is equivalent to using the the "C3" Utility without having to stop WorshipSession.

To load a new style, press Ctrl-1 - Ctrl-9. WorshipSession looks for a style folder that begins with the number you typed, and loads it immediately. (i.e. the style files are copied into the /style folder, where they will used the next time an Item is displayed.) You can rename your /style sub-folders so that the styles you usually use begin with "1", "2" or "3".

Changing style “on the fly” only affects the appearance of Items - you can’t use this technique to change the Session or footnote style, because the stylesheets for these elements are only loaded when WorshipSession starts up.