• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Corpus Christi Watershed

“What earlier generations held as sacred, remains sacred and great for us too…” Pope Benedict XVI (7 July 2007)

  • About
  • Symposium
  • Hymnal
  • Jogues Missal
  • Site Map
  • Donate
Views from the Choir Loft

User Manual

New 2021 March 23 screencast: View on Youtube or on RUMBLE! (I’m still getting the hang of Rumble – it says this video is private, unlisted, unsearchable and available to my subscribers, so if you have trouble viewing it, you may need to subscribe to me on rumble. My channel is Kids Chant.

New 2020 January 4 screencast: How to Blog with Veronica B

Table of Contents

  • The Tease or Excerpt
  • The Facebook Discussion Link
  • Common use of Picture at the Top
  • How to “Edit the Code” or HTML
  • Divider Stars
  • Common Use of a Beginning Capital (Drop Cap)
  • Link Target Blank – links open in a new tab – WordPress gives you an option to include this code with their link button – see “Open link in a new tab”
  • Youtube embeds
  • Preceding important stuff (mostly downloads) with stars and spaces
  • Footnotes

INTRODUCTORY (September 5, 2015) :     PART A   •   PART B

The Tease or Excerpt

The old blog called it the Tease. WordPress calls it the Excerpt. I’ve made a short video for visual learners. The text version follows.

Classic Editor

When you are editing a post, either it will be there in a box beneath where you edit your article text. You scroll down a bit and it’s there, past the SEO stuff that the Genesis framework adds in. If the Excerpt box is not there, you need to activate that box by clicking the Screen Options tab up the top right. Activating it is just a once off task.

Blocks Editor

The Excerpt box is in the Document tab on the right, scroll down past the Featured Image. If it’s not appearing, then you can enable it by clicking on the three dots block in the top right corner and choosing Options, right down the end of that menu. Activating it is just a once off task.

The Discussion on Facebook Link

Similarly to the Excerpt/Tease box, the Facebook Link is accomplished with a box which is hidden by default. You need to activate Custom Fields box, the same way you activated the Excerpt box.

Once you have activated the Custom Fields box, then the trick is to find the post id from the relevant Facebook post. The page you’re looking for is a url with just your post in it and the word “post” in the url. There will be one big number there, which you should be able to double click to select then copy it.

Once you have that precious number, you head over to your post on the blog, find the Custom Field box and under Add new custom field you click Select and select the fb_post_id. Then you paste that magic number from facebook into the blank box adjacent and then hit the button Add new custom field. That button is tempting, but wait until you have the fb_post_id selected and the number ready to go.

If you do hit that button early and end up with some blank custom fields, it’s best to delete the extra ones and keep to one correct one.

COMMON USE OF A PICTURE at the top:

Use the Media Library – select alignment as needed. Check that the code goes before the drop cap if you’re using one.

Link to “Media File” to enable lightbox effect.

Editing Code in the Classic Editor

There are two tabs to the right of the content box: Visual and Text. Choose Text to edit the code. Choose Visual for a rough idea of how it will look.

Editing Code in the Block Editor

Each paragraph block has a menu bar which pops up when that paragraph is selected. The rightmost icon has three dots. Clicking on those three dots opens up a longer menu where you can find “Edit as HTML”. Select that to edit the code. Next time you click that three dot symbol, you will see “Edit Visually” in the menu. Choose that to go back to the regular view.


Divider Stars

Code for those stars:


<img src="https://archive.ccwatershed.org/media/photologue/photos/874_STARS_DIVIDE_STAR.png" />

And this code:


<img src="https://archive.ccwatershed.org/media/photologue/photos/182-divider.png" />

Makes this bar:

<img class="aligncenter size-full wp-image-29055" src="https://www.ccwatershed.org/wp-content/uploads/2020/06/77727-Black-Line.png" alt="" width="2168" height="69" />

COMMON USE of the beginning Capital Letter:

Here’s the old code:

<img src="https://archive.ccwatershed.org/media/photologue/photos/4ln_Z.png" align="left" style="margin: .3em 1em 0 0;"><strong>ZZZZZZZZZZ</strong>

Which comes out like this:

ZZZZZZZZZZ

 

 

Here is the new code (as of September 2020) :

<span class="fancy-drop-cap">H</span><strong>ERE</strong> is a new code

HERE is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name.

  • class="fancy-drop-cap"
  • class="very-fancy-drop-cap"

Both can be further customized, experimenting with the numbers in style="font-feature-settings: 'ss03'; margin: 0px 8px -8px -8px" The size of the drop cap can be changed by adding font-size: 7em; into that style property, making sure to separate each command with a semi-colon (;).

Further Examples

Veronica Brandt • “Lalande Drop-Cap Letters” a page of examples for every letter of the alphabet (right now I’ve only pasted the codes down to F, but hope to get back to finish the rest soon!)

<span class="fancy-drop-cap" style="font-feature-settings: 'ss03'; margin: 0px 8px -8px -8px">H</span><strong>ERE</strong> is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name.

HERE is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name.

<span class="fancy-drop-cap" style="font-feature-settings: 'ss12'; margin: 0px 8px 0 -28px">H</span><strong>ERE</strong> is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name.

HERE is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name. And here is an extra sentence to help see what happens with a few more lines in the paragraph. The margin values are given in this order: Top, Right, Bottom, Left. That is, clockwise starting at the top. All the drop caps are weird sizes, so you may need to experiment with different values to get the right effect.

* * HERE is the User Guide for the Fancy Font we use all over the place

You can see all the different styles and choose your favorite font-feature-settings accordingly.

 

Code for the Capital Letters   VIDEO

<img src="https://archive.ccwatershed.org/media/photologue/photos/4ln_Z.png" align="left" style="margin: .3em 1em 0 0;"><b>ZZZZZZZZZZ</b>

<img src="https://archive.ccwatershed.org/media/photologue/photos/3ln_Z.png" align="left" style="margin: .3em .7em 0 0;"><b>ZZZZZZZZ</b>

<img src="https://archive.ccwatershed.org/media/photologue/photos/2ln_Z.png" align="left" style="margin: .3em .5em 0 0;"><b>ZZZZZZZZ</b>

Drop Caps for BLOCKQUOTE
CORRECTION to video: This code must be placed inside the blockquote   VIDEO

<img src="https://archive.ccwatershed.org/media/photologue/photos/quoteZ.png" align="left" style="margin: .25em .5em 0 0;">

LINK TARGET BLANK

So that clicking your link takes visitors to a new tab and keeps ccwatershed open in an old tab so they can come back and finish reading the article later.

<a href="ZZZZZZtheURLgoesHereZZZZZZ" target="_blank">ZZZZwhatTheySeeZZZZZ</a>

YouTube and Vimeo

embed that LIMITS the after videos to the channel:

This is handled automagically by a special plugin. Use the YouTube button / block. Even just pasting the youtube url on its own line is automatically converted into an embed when you save your post.

https://www.youtube.com/watch?v=It3i-dKusIM

Vimeo doesn’t need the ?rel=0 code. Just paste the url on its own line. To center, add a <center> before and a </center> after.


https://vimeo.com/360529913
 

<center>
https://vimeo.com/360529913

</center>

YOU CAN PRECEDE WITH stars & spaces:

&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue; font-size: 1em;"><b>* *</b></span>&nbsp;&nbsp;<a href="ZZZZZ" target="_blank"><strong>Some Text Goes Here</strong></a>

and it comes out looking like this:

* *  Some Text Goes Here

red text with bold
<span style="color: red;"><strong>So Incarnadine. Much Red.</strong></span>

So Incarnadine. Much Red.

Adding a picture

Use the Add Media button. The right panel gives you options including image alignment. If you would like lightbox effects then select Link to: “Media File”.

Adding a caption to your photo

Look in the options when inserting the photo – there should be a field for the Caption and/or Description.

Photo “gallery”

There is an option to Create A Gallery when you insert images. If this fails, insert thumbnails using the link to Media File option. Use the Text tab to line up the code for each photo on the one line (the editor will wrap the text, but any returns will make a new line) Put a space between each photo (between the </img> <img> tags.

Align text to the right (i.e. “right justify text”)
<span style="display: inline-block; float: right;">ZZZZZZZ</span>

Align items to the right
align="right" style="margin: .3em 0 1em 2em;"

Adding white space above or below text
<span style="display: inline-block; margin-bottom: 15px;"><b>To add white space after Blog Category Modification</b></span>

Using your “Facebook Metadata 300×300 image” as your Blog Preview Image

Set the Featured Image. It doesn’t need to be any particular dimensions. Bigger than 300×300 is good though. The rest should be handled automatically now, but I leave this here for posterity.

VIDEO
Here’s the link I remind you about in the video: Face “Debug” Link

When using the “center” command, there may be too much space at the top.
A quick way to fix it is to insert a negative margin margin-top:. The code for a video would be the following:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Odq_OlHaC5U?rel=0" frameborder="0" allowfullscreen="" style="margin-top: -20px;"></iframe>

Working with Thumbnails:
November 14, 2013 (Part 1)   •   November 14, 2013 (Part 2)

FOOTNOTES:

REPLACE THE ZZZZ with “1” or “2” or whatever your number is and make sure to leave a space before you add it, otherwise the number will probably extend too far to the left in an ugly, hard-to-read way:

<span style="color: red; font-size: 1em; font-weight: bold;"><sup>ZZZZ</sup></span>


For the part at the bottom, you must replace both ZZZZZZ slots; the number and the actual footnote

<br clear=all>

<img src="https://archive.ccwatershed.org/media/photologue/photos/6584_BLACK_LINE.png">

<span style="color: black; font-size: .8em;"><b>NOTES FROM THIS ARTICLE:</b></span>

<blockquote><span style="color: red; font-size: 1em;"><strong>ZZZnumberZZZ</strong></span> &nbsp; ZZZZZZZZZ</blockquote>


If your article has a whole bunch of notes, it would look like this—notice how it always must END with a “blockquote” thing:

<img src="https://archive.ccwatershed.org/media/photologue/photos/6584_BLACK_LINE.png">
<span style="color: black; font-size: .9em;"><b>NOTES FROM THIS ARTICLE:</b></span>

<blockquote><span style="color: red; font-size: 1em;"><strong>ZZZ</strong></span> &nbsp; ZZZZZ
<br>
<br><span style="color: red; font-size: 1em;"><strong>ZZZ</strong></span> &nbsp; ZZZZZ
<br>
<br><span style="color: red; font-size: 1em;"><strong>ZZZ</strong></span> &nbsp; ZZZZZ
<br>
<br><span
style="color: red; font-size:
1em;"><strong>ZZZ</strong></span> &nbsp;
ZZZZZ</blockquote>

Primary Sidebar

Corpus Christi Watershed

Quick Thoughts

PDF Download • Trinity Sunday (22 pages)

Feel free to download this Organ Accompaniment Booklet for Trinity Sunday (Second Vespers). Notice how the modes progress by number. Psalm 1 is mode 1; Psalm 2 is mode 2; Psalm 3 is mode 3; Psalm 4 is mode 4; Psalm 5 is mode 5. I am told by an expert that other feasts (such as Corpus Christi) are likewise organized by mode, and it’s called a “numerical office.”

—Jeff Ostrowski
10 June 2022 • “Official” rhythm of plainsong

I continue to search for the most beautiful way to present the “pure” Editio Vaticana scores. (Technically, the “pure” rhythm of the official edition is what everyone is supposed to use.) You can download my latest attempt, which is the Introit for this coming Sunday: Feast of the Most Holy Trinity. Because this is not an ancient feast, the Introit had to be adapted (perhaps around 750AD). Prior Johner says the adaptation is “not an entirely happy one.”

—Jeff Ostrowski
7 June 2022 • FEEDBACK

From Chelan, Washington: “CCWatershed is a God-sent resource that I can’t function without! Such great work by the team to bring beauty back to our liturgy!” From Gainesville, Florida: “I am so appreciative of the work, of my brothers and sisters in music!” From Troutman, North Carolina: “Keep up the excellent work in service of the Liturgy!”

—Jeff Ostrowski

Random Quote

To end an impropriety, noticed particularly at orchestral Vespers, when two or three Psalms are sung with full orchestra, and then the other Psalms and the Hymn are rapidly hurried through with organ accompaniment only […] we order that at Mass all portions of the text, including “Agnus Dei,” be sung with orchestral accompaniment. […] Moreover, the musicians are not allowed to put the instruments away and leave their places before the conclusion of the sacred function.

— Cardinal Patrizi (18 November 1856)

Recent Posts

  • “How Has Nobody Done This Before?” • Vol. 1
  • “Exceeded Every Expectation!” • Mr. O’Brien’s Review
  • “81 Photos” • Sacred Music Symposium 2022
  • Photograph • Dom André Mocquereau (d. 1930)
  • “I Found Myself Weeping, Almost In Disbelief…”

Subscribe to the CCW Mailing List

Copyright © 2022 Corpus Christi Watershed · Gabriel Lalemant on Genesis Framework · WordPress · Log in

Corpus Christi Watershed is a 501(c)3 public charity dedicated to exploring and embodying as our calling the relationship of religion, culture, and the arts. This non-profit organization employs the creative media in service of theology, the Church, and Christian culture for the enrichment and enjoyment of the public.