Traverse City, Michigan

How To notes

Hit the F5 key to refresh!

Here is the formula for hyperlinks:  <a href=”https://URL here”>text to show in blue here</a>

And to force a space when hitting enter doesn’t do it:  &nbsp;

If you make a mistake, you can look in the “Publish” box on the right and browse the “Revisions”. Be careful: “minutes ago” keeps changing, and there are autosaves in there too.

_____________________________________

To add a PayPal Button: in Text (HTML) view,

Your link code goes between the quotation marks where it says ‘YOUR-LINK-HERE’ in the code provided below:

<a href="YOUR-LINK-HERE">
<img src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" alt="Buy Now Button" />
</a>

You’ll want to copy the code above, with your link in the ‘YOUR-LINK-HERE’ space, to be ready to paste it into a  page. Of the two choices PayPal gives (website or email) you want to copy the email version of the link code to paste into the code above.

Here is the link to the WP help file: https://en.support.wordpress.com/paypal/

___________________________________________________________

There is no way to change the speed of the slideshows, as of 9/2015.

here is the CSS text pertaining to the slideshow in the footer that was removed 4/25/16 in an effort to restore the captions:

div.slideshow-slide-caption {
font-family: calluna, calluna-1, calluna-2, “Lucida Grande”, “Lucida Sans”, “Lucida Sans Unicode”, Arial, sans-serif;
font-style: italic;
font-size: 24pt;
text-shadow: 1px 1px 4px rgb(0,0,0);
line-height: 24pt;
height: 24pt;
bottom: 15px;
}
/* Smaller caption in footer. */
.small div.slideshow-slide-caption {
font-size: 12pt;
line-height: 12pt;
height: 12pt;
bottom: -60px;
color: #c1d0f4;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
font-style: normal;
}

and here is something posted about allowed code for captions:

Allowed markup: a blockquote code em strong ul ol li.
You can also put code in between backtick ( ` ) characters.

And here is Bill’s explanation of what was wrong:

I think the caption needs to overlap the image a bit, I couldn’t figure out how to make it appear below the image.

There’s a large negative bottom margin that’s hiding the small caption, and if it is set to 0, the caption appears.

Here is the corrected CSS:

/* Slideshow */
div.slideshow-window {
background: none;
border: none;
}

div.slideshow-slide-caption {
font-family: calluna, calluna-1, calluna-2, “Lucida Grande”, “Lucida Sans”, “Lucida Sans Unicode”, Arial, sans-serif;
font-style: italic;
font-size: 24pt;
text-shadow: 2px 2px 4px rgb(0,0,0);
line-height: 24pt;
height: 24pt;
bottom: 15px;
}

/* Smaller caption in footer. */
.small div.slideshow-slide-caption {
font-size: 12pt;
line-height: 12pt;
height: 12pt;
bottom: 0;
color: #c1d0f4;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
font-style: normal;
}

/* Slideshow in footer: background requested. */
#footer div.slideshow-window {
background: #222;
border-top: 20px solid #222;
border-bottom: 20px solid #222;
}

#footer .widget-gallery h3.sub {
text-align: center;
}

#footer h3 {
text-transform: none;
letter-spacing: 0;
}

/* This rule controls how large the “Blog at WordPress.com credit is. */
#footer p.small.quiet {
font-size: 9pt;
}


My WordPress.com user of @billpowellisalive still has access to your site, so actually I did not need to use the login info you provided. You can remove or add back my access in the future using these instructions: https://en.support.wordpress.com/user-roles/#changing-user-roles

You’ll need to click the “Text” tab (next to “Visual”) so that you can edit the code directly.

Then find the “<img” tag for the file you want to edit. For instance, I have removed the border and shadow for the rose on the home page, since it has a transparent background. I found the “<img” tag that included the long filename with the words “calligraphic-rose”. Everything from the opening “<img” to the closing “>” is code that describes this image.

So, you will insert your overrides into a “style” declaration within this <img code. For the rose, I put in:   style=”border: none; box-shadow: none;”

If you wanted the border back, you might change this to:  style=”border: 2px solid red”

Here is list of possible color names:

http://www.quackit.com/html/codes/color/color_names.cfm

You’ll notice that each name also comes with a “hex code”. You can actually specify any color with its code. So, instead of “red”, you could do: style=”border: 2px solid #FF0000;”

This is useful because there are more possible codes than named colors; you can choose a very precise shade using the code if you like.

If you also wanted a red shadow (which would be rather intense), you could do:   style=”border: 2px solid red; box-shadow 7px 7px 8px 2px red;”

Both “border” and “box-shadow” are terms in a kind of code called “CSS”. So if you want to get into more detail, you would search on “CSS border” or “CSS box-shadow”.

You can add as many other CSS declarations in there as you like. But I would suggest caution with adding CSS like this, because it’s easy to forget you did, and then later, when you try to make a change for the whole site, you forget that this old code is still overriding your change. I speak from experience. 🙂

Hope this helps!

Bill Powell

>

>>> Is the formatting global for all slideshows, or can we restore the

>> little TV screen (or put some kind of box around) the slideshow in

>> the footer? I think that one would look better contained in a frame.

>

> I had made it global, but I can also add it back for any particular

> slideshow, including that in the footer. I’ve added it back to the

> footer slideshow.

>

>> The Home and Liturgy slideshows look very classy now. I don’t think

>> we need a background for them.

>> Unfortunately the drop shadow is hardly visible now. Are there other

>> options to make the shadow nicer?

>

> Sure, it can be bigger and/or another color. I tried making it a

> little bigger — what do you think? Since the rest of the images in

> the content are on the same background, I also made the shadow bigger for them as well.

>> The main thing I had in mind to possibly do is make the slideshow on

>>> the home page more attractive.

>>> All but one of the photos use only the center of the space, and

>>> although the plain background is Carmelite brown 🙂 it might be

>>> nicer if some subtle background pattern/motif was there. I thought I

>>> could do this by creating a background template in Photoshop,

>>> centering all the photos on it,  and then re-uploading all of the photos. Lots of work!

>>> If something could be done programmatically in one step, that would

>>> be great!

>>

>> Your instincts were correct — this can indeed be done programmatically!

>> I would definitely recommend against putting background templates on

>> photos, not only because of the work but also because this would have

>> to be done all over again if you ever wanted to change the background.

>>

>>> On the other hand, maybe it would be too busy and distracting…

>>> what do you think?  The photos are slightly different sizes and

>>> really can’t be cropped to uniformity, so the background would have

>>> to be carefully chosen. It appears that a narrow band of brown would

>>> be added all around the outside in any case.

>>

>> Since the site already has a pattern background, I’d recommend using

>> a muted version of that pattern, perhaps in brown or a blue-gray.

>>

>> On the other hand, perhaps we could just remove the background entirely.

>> I’ve tried that — what do you think?

>>>>> I had attempted to get support from WordPress before I contacted

>>>>> you; when I went to our site to try out what you just taught me, a

>>>>> support person popped up and showed me how to copy a page by

>>>>> expanding the “Writing Helper” at the bottom of the screen. So I

>>>>> was able to create a clean replica of the Liturgy page to start

>>>>> tweaking it, without the danger of messing up the

>>>>> original–

>>>>

>>>> Excellent! I apologize I didn’t know about this feature myself — I

>>>> haven’t actually used the “Copy” feature before. I’m so glad their

>>>> support was able to help you.

>>>>

>>>>> Anyhow, learning to work directly with code will probably be

>>>>> faster, so I am grateful for your help.

>>>>

>>>> Glad to help. 🙂 Yes, for your site, it will definitely be worth

>>>> learning a bit about the code so that you can control the placement

>>>> of

>>> those pictures.

>>>>

>>>> But I should add that there is a “default” way that doesn’t involve

> code.

>>>> This way uses the “Visual” mode, not the “Text” mode. You click on

>>>> the image in the text box, then click on the little “pencil” icon

>>>> that will

>>> appear.

>>>> This gives you window where you can edit the “Image details”.  To

>>>> the left in this window, you’ll see buttons for aligning the image:

>>>> left, center, right, none.

>>>>

>>>> Clicking one of these buttons will insert the same code I gave you,

>>>> and make the image align.

>>>>

>>>> So, this might be a lot easier than messing with the code. On the

>>>> other hand, I find it’s good to know the code, “just in case” you

>>>> need to dig in and make sure it looks how you want it. But you

>>>> might like to give the buttons a try.

>>>>

>>>>> I’ll probably be contacting you again.

>>>>

>>>> Looking forward to it. 🙂

>>>>

>>>> Thanks,

>>>> Bill Powell

>>>>

>>>>

>>>>>

>>>>>

>>>>> —–Original Message—–

>>>>> From: Bill Powell [mailto:bill@billpowellisalive.com]

>>>>> Sent: Monday, July 07, 2014 1:05 PM

>>>>> To: Carmelite Nuns of Traverse City

>>>>> Subject: RE: Help with our website

>>>>>

>>>>> Dear Mother Mary,

>>>>>

>>>>> Great to hear from you! Congratulations on your chapel renovation

>>>>> and the attention from the Register.

>>>>>

>>>>>> We need a little more help with our website,

>>>>>> www.carmeloftraversecity.org I cannot figure out how to copy a page.

>>>>>> It seems to give me the same screen as when creating a new page

>>>>>> from scratch. I’ve tried manually copying everything into a new

>>>>>> page, but the

>>>>> formatting gets all messed up.

>>>>>

>>>>> So, I took a look at your “Liturgy page copy” draft, which can be

>>>>> previewed

>>>>> here:

>>>>>

>>>>> https://traversecitycarmel.wordpress.com/?page_id=872&preview=true

>>>>>

>>>>> I’m guessing that your formatting problem is that the text doesn’t

>>>>> flow around the photos, as on the original liturgy page.

>>>>>

>>>>> The reason is that I needed to add some extra code to get the text

>>>>> to flow around the images. By default, an image simply interrupts

>>>>> the flow of text, and it can look quite awkward.

>>>>>

>>>>> Unfortunately, the “copy text” function doesn’t seem to copy this

>>>>> extra code.

>>>>>

>>>>> If you’d like to try to tweak this code, then on the “Edit” page,

>>>>> you’ll need to click the “Text” tab, at the top right of the box

>>>>> where you edit the text. This will switch from the usual “Visual”

>>>>> mode, where the box shows what the post will look like, including

>>>>> the images, and instead show you the “Text”, the actual HTML code

>>>>> for the

>>>> post.

>>>>>

>>>>> To change how the image shows, you need to add a “class” within

>>>>> the

>> “img”

>>>>> tag. For instance, every image begins with this:

>>>>>

>>>>> <img

>>>>>

>>>>> So you can add the class there. To push the image to the right, do

> this:

>>>>>

>>>>> <img class=”alignright”

>>>>>

>>>>> Just insert this text, without deleting any of the other text that

>>>>> was after “<img”.

>>>>>

>>>>> The three classes you will find useful here are:

>>>>>

>>>>> class=”alignleft”

>>>>> class=”aligncenter”

>>>>> class=”alignright”

>>>>>

>>>>> Only use one class on any image.

>>>>>

>>>>> I hope this helps! If this is still too technical than you’d like

>>>>> to tackle yourself, I’d be happy to work with you on your content

>>>>> at the same hourly rate of $80/hour we used last year in 2013.