How To:
Website Cheat Sheet 2019 v1

Also see:
Working With the Website
PRFF Text Standards

WEBSITE TIPS

Our Protocols and Goals

Our main goal is to keep all of the pages comparable. We'd like the public to have the impression that one person has done all the work in that things have a clean continuity. It takes TEAMWORK to create this overall effect.

In order to gain continuity, we need to be aware of how we prefer things to be accomplished. We need to try and follow these ourselves and help others to do the same.

Aside from this reference, we have other resources here at the How To website. PLEASE SEE THE LINKS ABOVE.

Resizing Photos for the Website

For event and sponsor logos, the width must be a fixed size in order to fit the page templates. (The height should be scaled to maintain the original ratio.)

If you're familiar with how to resize images and have your own software or App, that's great! Please use whatever works for you. Just remember to use the concept of resizing down by half if the image is really large -- otherwise you'll end up really blurry. Resize by 50% and then repeat until you get close to the actual pixel size you need. (If this doesn't make sense, please feel free to ask me.)

Otherwise to RESIZE images correctly, I suggest you PLEASE reference: Resizing Images Smaller

NOTE: You should NEVER resize using the HTML width and height! You MUST actually resize any image you're using.

Featured images (we also call these header images, header banners or page banners) MUST be 645 pixels wide. Ideally, the height should be 200 to 250 pixels, but this can vary slightly. I've used images as large as 645 x 350 (or slightly taller). But an image 400 pixels taller or more won't cut it!

THE FOLLOWING IMAGE SIZES ARE WRITTEN IN STONE!

Before you can add any image to any given page at the website you'll first need to go to the Media Library and use Add New to upload your image. Do this before you begin Editing a page!

Sponsor logos:
200 pixels wide
While logged in to the website, enter the Edit Page view. In the center (largest) section, scroll down to the Sponsors Logos Section. Inside that you'll find the Sponsors Logo area.
NOTE: If you've failed to size your logo correctly the website will try to resize, making your image blurry. We don't want to disappoint our Sponsors, so please keep this in mind!

Event logos:
250 pixels wide
While logged in to the website, enter the Edit Page view. In the center (largest) section, scroll down to the Event Logo Section. Inside that you'll find the Event Logo area.
NOTE: Again, if you've failed to size your logo correctly the website will try to resize, making your image blurry. We don't want to disappoint our Sponsors, so please keep this in mind!

Featured images:
645 pixels wide x 200-250 high (see above for more details)
While logged in to the website, enter the Edit Page view. Go to the right column and scroll down. Close to the bottom you'll locate the Featured Image area. If you want to swap images, you'll need to first Remove featured image. To add a photo, click the Set featured image link.
NOTES: Your 'featured image' is actually your header, or header banner that you've manually uploaded to your page. If you don't understand how the featured image is used, please ask and I'll gladly explain.

Home Touts:
226 x 168
Again, these images need to be this size. Actually, Home Touts are a bit complicated, so if you'd like to learn more, just ask. We'll do a lesson on how it's done.

Homepage Slideshow:
1000 x 374

These sizes are again, written in stone (with no exceptions!). FISH Marketing creates the home page slides for uploading. Again, these can be complicated to upload, but if you're interested in learning about, please ask me! I'm glad to teach you.

Your HTML Cheat Sheet

The following are common HTML tags you'll use on the website.

VERY IMPORTANT!!! Always, always, always enter Copy in Text view -- NOT in Visual view -- when you are editing a page. Otherwise it's going to be very confusing!

If you're Copy/Pasting (recommended), be sure to select the entire code. It's easy to miss pieces here and there. We count on others to provide us the Copy (text) we use for the website -- and to give us the correct Copy. We do not re-type what's given to us -- that's too time-consuming.

Understanding Header Levels:

Note: H1 is automatically used for the text in the title box (purple banner at the top of a page).
Please DO NOT use this in main copy.

H2 is the heading of a page -- it shows as larger, bold, red and centered.
<h2>Title Here</h2>

H3 is a subheading -- it shows as purple, bold and left justified.
<h3>Subheading Here</h3>

To make text bold:

<b>Add text here</b>

To make a bulleted list:

<ul>
<li>First Item</li>
<li>Second item</li>
</ul>

Breaking Down Each Page of the Website

As I mentioned above, we want continuity at the website. All of the pages have their own standard -- and the majority follow a certain method. Let's break down a typical page! (Please note: there are some pages which are not typical/standard, such as the COURT PRINCESSES or CALENDAR pages. We'll explain those later.)

Let's look at one page. Let's use the Grand Floral Parade page. Please click the link or go to:
http://www.rosefestival.org/event/grand-floral-parade

Viewing the Page:

At the top in the purple area you'll see the 'official title.' This needs to be kept short because a long name will cause display issues. (I can explain in more detail -- please feel free to ask.)

In the Edit Event area, the official title appears in the area (window) directly below the words Edit Event.
Note: it's easier if you get this title correct from the get-go. There are several reasons you don't want to have to change it later.

Whatever you put in this area will show in the purple (rose) area on the page. You can see for Grand Floral Parade we have the full name of the event MINUS the Sponsor name, in large, white text.

We have tremendous respect for our Sponsors, so the next thing we need to do is make sure they appear right at the top of the page! You'll view that in red, centered text, above the header banner.

On the Edit Event page, you're going to need to create a heading using H2: <h2>  </h2> at the top of Body of the page.

Directly below this text you'll add the header banner for the page. This MUST be 645 pixels wide (no smaller or larger).

Usually the next paragraph will include a headline using H3 <h3>  </h3> directly above an opening paragraph which describes the event.

To add a call-out box:

<blockquote>
Add text here
</blockquote>

Note: Other tags, such as headings, can be used inside the box. For an example, see our mission statement here: http://www.rosefestival.org/support/donate

Forced Line Break:

To FORCE a Single Line Break (like hitting enter in Word):
<br>

Forced Blank Space:

To add a Forced Blank Space (like hitting enter twice):
&nbsp;

To add a link:

<a href="your-link-goes-here" target="_blank">Link Text Goes Here</a>

Example: <a href="http://www.rosefestival.org/programs/rose-festival-court/apply-for-the-court.shtml" target="_blank">CLICK HERE</a>

To add an email link:

<a href="mailto:info&#64;rosefestival.org?subject=Subject Line">Link Text Goes Here</a>

IMPORTANT NOTE: ALWAYS use &#64; instead of the @ symbol.

Example:<a href="mailto:info&#64;rosefestival.org?subject=Sponsorship Opportunities">Email us</a>

To add a PDF:

 1.  Upload the PDF to the media library.

 2.  Add the link to your page using the Insert Media button and check that it shows in the following format:

<a href="http://www.rosefestival.org/wp-content/uploads/pdfs/file-name.pdf" target="_blank">Link Text Appears Here</a>

Important Note: WordPress will automatically include the file path. You'll need to add the target="_blank" code to make the PDF open in a new tab/window. You'll also need to edit the link text that you want to show on the page.

Example: <a href="http://www.rosefestival.org/wp-content/uploads/pdfs/2014-Rose-Festival-Court-Application-Form.pdf" target="_blank">Application</a>

Also note: PDFs can be included within a sentence.
Code:
See the <a href="http://www.rosefestival.org/wp-content/uploads/pdfs/2014-GFP-ChaletRowFlyer.pdf" target="_blank">Chalet Row Flyer</a> for information about private seating opportunities.

What appears on the page:
See the Chalet Row Flyer for information about private seating opportunities.

If you have questions, please come to me (Charlie) and I'll try to explain in more detail.

THANKS for your cooperation! It takes a TEAM to make this all work!