Sarah’s Place How Too

We used wordpress to power your site.  This bit of text is your instruction manual on how to update your pages.

——————————————————————————————————–

Where to start?

Your site is http://www.sarahsplace.com

To get into the site manager, go to:  http://www.sarahsplace.com/wp-admin

You will be prompted to enter your username and password.

Username: admin
Password: JTJPRCiv

That will take you to your Dashboard where all the magic happens.

——————————————————————————————————–

UPDATING POLLS

-On the left hand side at the bottom, you will see a section for Polls.

*

-Go to ADD POLL

Fill out the Question and answers.


-To save poll, at the bottom choose Add Poll

Now, on your Dashboard, go to the Posts section and see the “This Week’s Survey” at the right. Hover over the “This Week’s Survey” and below it, options pop up. Click Edit.

Once there you will see:

[ poll id="?" ]
Replace the “?” with the ID number of the most recent Poll and select update.

-To get the Sarah’s Place answer once the poll has been answered by an individual…. you now select Poll Templates, in the Poll menu bar on the left.


-DO NOT change anything in any of these templates, except for the (Result Footer -Displayed When The User HAS Voted).

-Here you will see this bit of code:

</ul><p style=”text-align: center;font-family:arial,helvetica;”>Total Voters: <span style=”font-size:1.2em;color:blue;”>%POLL_TOTALVOTERS%</span></p></div>

<div><p style=”text-align: center; font-size: 130%;font-family:arial,helvetica;”><strong>At Sarah’s Place we were at work and ready to service Eastern Kentucky</strong></p></div>

-The section I highlighted blue is what you will change for your answer.
-Once finished, scroll down to the bottom of that page and Save Changes.

——————————————————————————————————–

YOUTUBE VIDEO

– Go to the Dashboard of Sarah’s Place.
– Click on Appearance

– Click on Widget

– There on the right is the Top Widget Area.
– The second Text Area is your You tube video….click on the little arrow on the right and the window will open to where you can enter your Youtube HTML.

– Paste the code into the Widget spot.
– Then click save

 

To get your YouTube HTML….

-Go to where your video is placed on YouTube.
– Below the video is a box that says SHARE. Click it.

 

– Next click on Embed

– Make sure change the width to 330 and the height to 217

-Then copy the html it gives you and place it in your Widget spot between <p>  and </p>

——————————————————————————————————–

 

 

EDITTING PAGES!!!!!!!!!

There are two types of pages.
Pages WITH Tables and pages WITHOUT tables.

——————————————————————————————————–

PAGES WITHOUT TABLES

When you work with pages without tables. You are just working with the content only. Your pages will consist of your text and photos.

ADDING PHOTOS & EDITING

-When you are ready to add/insert a photo, look up to the top of your tool bar at Upload / Insert, there is a box there that is your photo box. Click on it.


-You will then be prompted to get the photo or image from your Computer, which more then likely that is where it is stored, from URL or from the Media Library.

The Media Library is full of images and photos that you have uploaded already for you entire site.

-If you were going to get a photo that you had already uploaded, go to the Media Library tab and click.

-Find the image you want to use and click Show.

-When you hit show, you will see several options, but for now, just look at you size. Click on Full Size since it is always better to shrink down a photo then it is to blow up. Then click the button below that Insert into Post.

Add/Insert Photo from Computer.
Click on Select Files

Find the file you want to use.

Then choose the pic to be Full size, Then select Insert into Post

 

NOW, you have an image on your page. Which you can change the size of the picture on the screen by clicking on it and selecting a corner and dragging it. You can resize anytime, before or after you add text.

Doing more with your photo, aligning, adding borders, adding captions and links.
Click on your photo, you will see the two icons that pop up in the top left hand corner of the photo? The icon with the red circle with the line through it, as you probably already guessed, will delete your photo.  The other icon with the scenery is the one you should select.

Edit Image Tab:
The first think you see is a sort of preview of your photo against text. To choose how you want your photo to align, there at the bottom of the preview is None, Left, Center and Right.
Caption Field you can add captions to your photos, by typing your text in the caption field.
The Link URL will always default to linking to actual photo. So when you click on the photo, it will show the original size.  You can change the link to link anywhere on the net that you want it to.  Or you can even select none to have it not link anywhere.

Advanced Settings Tab:
Leave the source code alone, Do not change!
Size: You can change the size of the photo here if you wish. Click on Original Size to make the photo return to its original size.
Styles: This section will change when you add the Image Properties.
Image Properties: Border : 1  Vertical Space: 9 Horizontal Space: 9    If you feel you need a thicker border, then add a higher number range. If you wish for more/less space between the photo and text, then put greater or lesser numbers.

Then Click Update

 

 

STYLING PAGES

Most of this is just like using any other sort of test editing software.

When you enter text, by default it has no style to it.  So here we have entered our text.

To get your Mission statement or header above the photo, just grab your photo and pull it down … till you see the curser blinking in the space after your header / paragraph.

To Align text, Center, Left, Right, Align Full
The icons I have circled in the image below take care of the alignment.

Text Size, Style and Color.
To change your font. Highlight your text.  Go to Font Family drop down and choose the font to what you want.

To change the Size.  Highlight your text. Go to the drop down beside the Font Family one, that has numbers in it. And choose the point size you want.
When you get to the larger point size, say 6 (24pt) 7(36pt) The text in the viewer appears to overlap itself. Not to worry, when you publish this and look at the actual page, it will adjust itself.

Other icons may look familier from text programs.  The Bold, Italic, Underline and Strike through.

——————————————————————————————————–

PAGES WITH TABLES  –  ROW & COLUMNS

These pages use the Table, Row and Column tools…..Donor Hall of Fame, News, The Artists Galleries,  Family Caregiver Program.

How to create new tables.
-choose the “Inserts a new table” button


-It will prompt you with how many columns and rows you want.
-Columns run up and down. While Rows are side to side.

When you at your newly made table it is small.

If you like, you can pull on the corners of the table to make the spaces larger.

Once you have your table built. You can add or take away columns and rows if you change your mind. Those tools can be found here:

If you want to delete the table you made completely, the use this tool:

Now, to add your content into your Table.  You add it as you would any other page.  Select a Table Cell and start adding content!

——————————————————————————————————–

DONOR HALL OF FAME

You can get to this page as well as others, two ways. Through the Dashboard / selecting Pages / then search for the page you want to edit.  Or if you are logged in and are visiting that page, you will see a button at the top of your site that says Edit Page.

-Once you are ready to edit this page. You will see the lists of Donors there in tables. You can add or take away names to each Table Cell. ( To learn more about tables column and rows….scroll back to ***TABLES, ROW & COLUMNS***)

-A problem that may crop up that happens from time to time, Is when you are adding in say

Gary & Mary Sutphin
in memory of
Wilson Rice & Paul Sutphin

-If you have this in your text program spaced like this and copy and paste it into the list, it will be fine.  But, if you type it in, using the return to space, it will appear as….

Gary & Mary Sutphin

in memory of

Wilson Rice & Paul Sutphin

-To fix this.  In your editing window you are currently looking at this in Visual mode. Select the second tab beside it called HTML.  This will look a bit scary, but don’t worry. Scroll down to where you see the name you just entered and take out those extra spaced between the name, in memory, and name.

-You’ll see that its fixed once you go back to the Visual mode.

-Once you have made all your changes, go over to the right and click the Update button.

——————————————————————————————————–

NEWS •  DONOR HALL OF FAME • ARTISTS GALLERIES • FAMILY CAREGIVER PROGRAM
(all are edited the same way, by using tables.)

You can get to this page as well as others, two ways. Through the Dashboard / selecting Pages / then search for the page you want to edit.  Or if you are logged in and are visiting that page, you will see a button at the top of your site that says Edit Page.

The News page uses tables to create the pages. ( Refer back to the ***TABLES, ROW & COLUMNS*** section of this How too add or take away Table’s, columns and rows.)

– Click Edit Page to make changes:
- Edit, type in text where needed.
– With lists, the return key may cause extra spaces, just fix as we discussed in the DONOR HALL OF FAME section.

——————————————————————————————————–

ABOUT US

You can get to this page as well as others, two ways. Through the Dashboard / selecting Pages / then search for the page you want to edit.  Or if you are logged in and are visiting that page, you will see a button at the top of your site that says Edit Page.

– Click Edit Page to make changes:
– Edit, type in text where needed.
– With lists, the return key may cause extra spaces, just fix as we discussed in the DONOR HALL OF FAME section.

– Adding photos to a page.  (Refer to ADDING PHOTOS)

 

To add the email to the photo captions, follow these steps:

Go into the HTML view.

– Scroll down through the HTML till you find code that for the photo caption you want to add the email too.

Lets say we want to add an email to Barbara Littleton’s photo caption (which I will use a fake email for the example):
Here would be what the code looks like:

<div><dl id=”attachment_633″ style=”width: 210px; height: 329px;”> <dt><a href=”http://www.sarahsplace.com/wp-content/uploads/2011/03/Barb.jpg”></a><img style=”border: 1px solid black;” title=”Barb” src=”http://www.sarahsplace.com/wp-content/uploads/2011/03/Barb.jpg” alt=”” width=”200″ height=”270″ />
<span style=”line-height: 17px; font-size: small;”>Barbara Littleton • Child Care Worker </span></dt> </dl></div>

All you need to do is add:
<a href=”mailto:donnaboggs@mrtc.com”>barb@mrtc.com</a>
at the end of the code, right before the </span></dt> </dl></div> and now your code will look like this:

<div><dl id=”attachment_633″ style=”width: 210px; height: 329px;”> <dt><a href=”http://www.sarahsplace.com/wp-content/uploads/2011/03/Barb.jpg”></a><img style=”border: 1px solid black;” title=”Barb” src=”http://www.sarahsplace.com/wp-content/uploads/2011/03/Barb.jpg” alt=”” width=”200″ height=”270″ />
<span style=”line-height: 17px; font-size: small;”>Barbara Littleton • Child Care Worker <a href=”mailto:donnaboggs@mrtc.com”>barb@mrtc.com</a> </span></dt> </dl></div>

——————————————————————————————————–

OUR PROGRAMS

You can get to this page as well as others, two ways. Through the Dashboard / selecting Pages / then search for the page you want to edit.  Or if you are logged in and are visiting that page, you will see a button at the top of your site that says Edit Page.

– Click Edit Page to make changes:
– Edit, type in text where needed.
– With lists, the return key may cause extra spaces, just fix as we discussed in the Donators section.

– Adding photos to a page.  (Refer to Adding Photos)

——————————————————————————————————–

SUCCESS STORIES

You can get to this page as well as others, two ways. Through the Dashboard / selecting Pages / then search for the page you want to edit.  Or if you are logged in and are visiting that page, you will see a button at the top of your site that says Edit Page.

– Click Edit Page to make changes:
– Edit, type in text where needed.
– With lists, the return key may cause extra spaces, just fix as we discussed in the DONORS HALL OF FAME section.

– Adding photos to a page.  (Refer to ADDING PHOTOS)

How to add a new Success story to the Main Success Story Region.
-Add your new text to the top of the page. The stories below will move down.
– If you can’t get your curser above the top story, you will have to go into HTML mode and put this piece of code  &nbsp; at the top of the page above the first story. Then click back to Visual mode to continue adding your new success story content.

Single Success Story page.
-When you just finished creating the Success Story on your Main Region. You can highlight that new section and copy it.
-Then look on your Dashboard, Go to Pages, Add New


-A new page will pop up, paste the content into that new window. Style the text as you wish. You will have to fix your photo once again to align text correctly. (Scroll up to ADDING PHOTOS for reference.)
-Make sure to the right of the page that in the Page Attributes….For Parent choose “Success Stories”.  For Template choose “Content with Small Sidebar 2″
-Then Publish this page.

– Before you leave this page….. Get this new page’s ID number.…you will need it for the sidebar links.


How to add the Success Story to the Sidebar:
– Go to your Dashboard.
– Go to Appearance.
– Go to Widgets
– Over on the right, look for the Right Widget Area.

– Click on Text: Success Stories

This is the code you will us to make your links:

<a href=”http://www.sarahsplace.com/?page_id=710“> Ashley’s Success</a><br>

All you need to do is place the link title (green) in its spot and the Page ID (Purple) in its spot.

Then Click SAVE

——————————————————————————————————–

CONTACT PAGE

You can get to this page as well as others, two ways. Through the Dashboard / selecting Pages / then search for the page you want to edit.  Or if you are logged in and are visiting that page, you will see a button at the top of your site that says Edit Page.

– Click Edit Page to make changes:
– Edit, type in text where needed.
– With lists, the return key may cause extra spaces, just fix as we discussed in the DONORS HALL OF FAME section.

– Adding photos to a page.  (Refer to ADDING PHOTOS)

To add the email to the photo captions, follow these steps:
Go into the HTML view.

– Scroll down through the HTML till you find code that for the photo caption you want to add the email too.

Lets say we want to add an email to Barbara Littleton’s photo caption (which I will use a fake email for the example):
Here would be what the code looks like:

<div><dl id=”attachment_633″ style=”width: 210px; height: 329px;”> <dt><a href=”http://www.sarahsplace.com/wp-content/uploads/2011/03/Barb.jpg”></a><img style=”border: 1px solid black;” title=”Barb” src=”http://www.sarahsplace.com/wp-content/uploads/2011/03/Barb.jpg” alt=”” width=”200″ height=”270″ />
<span style=”line-height: 17px; font-size: small;”>Barbara Littleton • Child Care Worker </span></dt> </dl></div>

All you need to do is add:
<a href=”mailto:donnaboggs@mrtc.com”>barb@mrtc.com</a>
at the end of the code, right before the </span></dt> </dl></div> and now your code will look like this:

<div><dl id=”attachment_633″ style=”width: 210px; height: 329px;”> <dt><a href=”http://www.sarahsplace.com/wp-content/uploads/2011/03/Barb.jpg”></a><img style=”border: 1px solid black;” title=”Barb” src=”http://www.sarahsplace.com/wp-content/uploads/2011/03/Barb.jpg” alt=”” width=”200″ height=”270″ />
<span style=”line-height: 17px; font-size: small;”>Barbara Littleton • Child Care Worker <a href=”mailto:donnaboggs@mrtc.com”>barb@mrtc.com</a> </span></dt> </dl></div>

It’s best not to edit this section in the Visual mode. The Google Map will not translate correctly when you update.  If for some reason  an accident occurs and you do go into Visual mode causing the Google Map to refuses to load correctly. Go into the HTML mode and place this code between the <!–GOOGLE MAP–> and <!–END GOOGLE MAP–>

<center><iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=sarahs+place&amp;sll=38.092745,-83.124864&amp;sspn=0.038841,0.090637&amp;ie=UTF8&amp;cid=38086962,-83124811,11847799592801181502&amp;source=embed&amp;hq=sarahs+place&amp;hnear=&amp;ll=38.092417,-83.123331&amp;spn=0.011821,0.018239&amp;iwloc=A&amp;output=embed”></iframe><br /><small><a href=”http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=sarahs+place&amp;sll=38.092745,-83.124864&amp;sspn=0.038841,0.090637&amp;ie=UTF8&amp;cid=38086962,-83124811,11847799592801181502&amp;source=embed&amp;hq=sarahs+place&amp;hnear=&amp;ll=38.092417,-83.123331&amp;spn=0.011821,0.018239&amp;iwloc=A” style=”color:#0000FF;text-align:left”>View Larger Map</a></small></center>

Then hit Update!

Leave a Reply

You must be logged in to post a comment.