WebsiteNotes

Page history last edited by Roger Wellington-Oguri 1 month, 1 week ago

This page describes the protocols for maintaining our website. Please add notes on modifying our website and other future changes that need to be added here.

Staff and Volunteer Biographies on the Website
Theme Layout:
How to edit the website for minor text changes
How to modify web design
Develop interactive peer-to-peer donations portal
How I created the Volunteers' Profile page

Staff and Volunteer Biographies on the Website

In order to keep track and reduce the "distance" of both staff and volunteers around the world, the nyaya website has 4 websites showing:

1) Current staff personnel in Achham: nyayahealth.org/pesonnel

2) Former staff in Achham: nyayahealth.org/past_personnel

3) Board: nyayahealth.org/board

4) Team/Volunteers: nyayahealth.org/team

To upload a profile on either of the 4 webpages:

1) Go to www.nyayahealth.org/submission

2) Add your name, DOB : 01/01/1111 (THIS IS DEFAULT FOR ALL STAFF AND PREVIOUS STAFF!)

3) Roles within Nyaya: Based on the 4 subcategories, insert:

a) *PERSONNEL*

b) *PAST_PERSONNEL*

c) *BOARD*

d) Team is default therefore leave the category blank

By assigning the above roles in the query field, the profiles will be updated on the respective websites.

4) Current job/Job position at Nyaya.

5) About yourself

6) You can leave education, interests and my message blank.

7) Upload a picture of yourself. This will help put a face on the faceless emails everyone gets at Nyaya!

8) Submit the profile

Delete a profile:

1. If there is an error or mistake, then sign into wordpress http://www.nyayahealth.org/wp-login.php with the wordpress login and password. In the same browser open any of the four websites based which entry you want to delete : www.nyayahealth.org/team, www.nyayahealth.org/personnel, www.nyayahealth.org/past_personnel, www.nyayahealth.org/board.

2. You will now see a delete button below each profile.

3. Delete the entries you want to delete and then go back to www.nyayahealth.org/submission and rewrite the entry.

Move a profile from personnel to past_personnel:

This can be done by deleting and re-adding the profile as described above. However, if multiple profiles are being moved, it can be done more easily by someone who knows how to use phpMyAdmin to modify the SQL database directly. The name of the database table is profilelist. Changing the role field from *PERSONNEL* to *PAST_PERSONNEL* is all that is necessary.

Once the Achham team informs the US team about either new staff or staff which are leaving, a welcoming or leaving blog post will be released and a new updated team list will also be available on www.nyayahealth.org/personnel or www.nyayahealth.org/past_personnel.

Volunteers who are either on the board, summer interns or linked to Nyaya are encouraged to upload their profiles based on the directions given above.

By keeping an up-to-date list of staff, the US team will better be able to determine needs and supply.

Theme Layout:

The layout of the current (bipulS) theme is as follows:

[HTML]

[HEAD]

[/HEAD]

[BODY]

[DIV: WRAP]

[DIV: HEADER]

[DIV : BANNER]

[/DIV]

[DIV: TOPNAVIG]

[/DIV]

[DIV: CONTENT]

[DIV:LEFTNARROW]

[IE6 only-> DIV:LEFTNAVIG]

[/DIV]

[DIV: WIDGETBOX]

[DIV: WIDGETS class]

[/DIV]

[/DIV:leftnarrow]

[DIV: RIGHTWIDE]

[DIV: BOXHOLDER]

[DIV: BOX class]

[/DIV]

[DIV: RIGHTCOLUMN]

[DIV: LEAFLET class]

[/DIV]

[DIV: FACEBOOKLOGO]

[/DIV]

[/DIV:rightwide]

[/DIV:content]

[DIV:FOOTER]

[DIV:LEFTFOOT]

[/DIV]

[DIV:CENTERFOOT]

[/DIV]

[DIV:RIGHTFOOT]

[/DIV]

[/DIV:wrap]

[/BODY]

[/HTML]

The tags have been divided into different template files as follows:

header.php

index.php, page.php

sidebar.php

footer.php

These tag names are useful in making changes to the layout and appearance using "style.css" stylesheet.

How to edit the website for minor text changes

Go to "manage"..."pages". note that you can edit both the main body text and the "custom fields".

After saving make sure to view the page carefully.

Update the donation Page:

1. Color of the bar: Update "background-color" for the "div" within the "Progess bar" tag in page.php.

2. Update the donation amount: Update "done" custom field in donate page.

Modify the google forms:

1. Browse to the actual form URL

2. View the source of this page and copy the HTML code between "<form> and </form>".

3. Remove unnecessary HTML tags, and add required tags (DIVs) to format properly.

4. The best way to do this is to include all the elements within one DIV and the label and input field in different DIVs of specified width and height as shown:

[FORM]

[DIV]

[DIV]label[/DIV]

[DIV]input field[/DIV]

[/DIV]

[/FORM]

Modify Google Checkout

Google checkout form is retrieved from the "googlecheckout" custom field in donate page. The following code is used for google checkout:

<p><strong>Make a one-time donation using a major credit card:</strong></p>

</form>

Video on the page:

Video is embedded using FLV plugin in wordpress. The syntax for the video is :

[flv:url_to_the_video url_to_the_poster_frame width height]

Use this code whereve you want the video to appear. I usually enclose the video within <DIV> tags to control its positioning.

Fixing broken links:

Add the following lines to the .htaccess file:

Redirect permanent /BROKENLINK http://www.nyayahealth.org/DESIRED LINK

for example:

Redirect permanent /donate_now.html http://www.nyayahealth.org/donate

Redirect permanent /guiding_philosophy.html http://www.nyayahealth.org/philosophy

Redirect permanent /about.html http://www.nyayahealth.org/overview

Redirect permanent /contact.html http://www.nyayahealth.org/

****IMPORTANT***

It was noted that wordpress regenerates htaccess files everytime the website settings are saved. This can be saved by editiing the wp-includes/rewrite.php file and commenting out the two lines in flush_rules function:

generate_page_uri_index();

delete_option('rewrite_rules');

$this->wp_rewrite_rules();

//if ( function_exists('save_mod_rewrite_rules') )

//

save_mod_rewrite_rules();

(source:http://www.nusuni.com/blog/2007/08/01/how-to-stop-wordpress-from-auto-creating-a-htaccess-file/)

Update reports with thumbnails:

1. Upload the resized thumbnails to the folder: http://www.nyayahealth.org/images

2. In the reports page, follow the code same pattern (Copy and paste code from <div class="box">xxxx</div>) .

3. Change the name of the file, the hyperlink destination file, name of the image and hyperlinked destination for the image.

Migrating the website:

In order to migrate the site from one folder to the other:

1. Change the installation location in wordpress: Settings>General

2. Move the contents of the directory to another

3. Change any relative links accordingly

4. If you need to redirect from the original folder, add the redirection rule in the .htaccess file in the old directory.

*** IMPORTANT: THE .htaccess FILE NEEDS TO BE IN PLACE IN THE PREVIOUS DIRECTORY FOR REDIRECTION TO WORK***

How to modify web design

feedburner feed: located in "header.php"

*****Important: When we add/remove the border, it will affect the width (since border takes some width) of the tag, and has to be carefully considered so as not to mess up the layout*****

1. Change background color:

Edit style.css, change "background-color" for html, body (background:url(images/bg.gif) if you want the horizontal lines as background)

2. Change background color of the topnavigation (horizontal) panel:

Edit style.css, change "background-color" for #topnavig

3. Change the size of the thumbnail image:

Edit style.css, change "width, height" for .thumb

4. Change the color/background of the heading text:

Edit style.css, change "color/background-color" for h2 and h2.center

5. Change the font color:

Edit style.css, change "color" for p

6. Change the text on the footer:

Edit footer.php, change content

7. Change the background-color of the footer:

Edit style.css, change "background-color" for #footer

8. Change the position of the donation box:

Edit style.css, change "margin" property of #banner a

9. Change the color of the feedburner feed:

Edit style.css, change "color" property of .widgets ul li a

10. Change the color/size of the date in feedburner feed:

Edit style.css, change "color, font-size" property of p.date

11. For the "action alerts" i have used the "custom field" attribute of wordpress page. These are the custom fields I am using:

1. imgsrc : image source

2. imglink: page where the image links to

3. alerthead: title of the alert

4. alerttext: main content

These fields can be edited in the "Equity Initiative... " page whenever u need to so that you don't have to change the theme files every now and then :).

Using custom fields to remove "action alerts" and/or "latest news from the header

See "overview" page as an example

Go to header.php file and add an if... else statement as in that for the overview page

Add custom fields in similar fashion to overview page

12. And, for the donation page, the following custom fields are used:

1. description: Description that appears on the left hand side column

2. donate_video: Video that appears on the donation page

3. done: Amount collected so far that appears on the progress bar

4. footerdonate: footer text on the donation page

5. googlecheckout: googlecheckout form code for the donate page

6. otherdonations: Paypal and other form of donation, code and text that appears below the progress bar

7. progressbarcaption: Caption for the progressbar, text that appears above the progress bar in current donate page

8. target: target amount for the fundraiser progress bar

13. Editing the progress bar:

Progress bar is made up of "DIV" elements as follows:

[BOX]

caption text

[/BOX]

[DIV with the border: for the bar]

[DIV with given background color- represents shaded portion of the bar]

[/DIV]

[DIV with white background color- represents white portion of the bar]

[/DIV]

[DIV with the border: for the values]

[DIV]

$done: collected amount

[/DIV]

[DIV]

$target: total amount targetted

[/DIV]

This can be edited as required from the page.php.

14. Editing the wowzio widget:

Click on the "grab this" link below the widget. Chnge design settings (width, height etc) if you want. If you want to change the feed, go to wowzio.com, start up building a new widget, add the feeds you want to use, create the widget. Copy the code and replace the piece of code for the same code in "rural health eqity" page (homepage).

15. Change/remove the border of the page:

Edit style.css, change the border-right and border left property of : a. #topnavig and b. #content

16. Change the feedburner feed settings: Log in to Nyayahealth account in feedburner. Browse to "Nyayahealth" feed and to "Publicize" and to "Buzzboost" and edit the feed settings and save.

17. IE6 only Settings:

Edit the header.php file. Add the navigation list <ul>xxxx</ul> to a new div tag #leftnavig.

Edit the style.css to add css parameters for #leftnavig, with its "display" property set to none.

Edit the header.php and add within the <head></head> html tag, IE6 only rule (watch out for [if IE 6] comment) to hide (display:none) the #topnavig and show (display:block) the #leftnavig DIV tags.

18. Validate Email field in forms:

Add "onclick="return ValdiateForm()"" event to the submit button or "onsubmit="return ValidateForm()"" event to the <form> field.

eg. <form onsubmit="return ValidateForm()" action="#"> OR <input type="Submit" name="Go" onclick="return ValdiateForm()" />

Develop interactive peer-to-peer donations portal

-develop portal in which donors can match up with specific patients that they are going to benefit

http://www.donorschoose.org/homepage/main.html

mock-up done by: dec. 15

fully functional by: jan

How I created the Volunteers' Profile page

1. designed two theme files: profile.php, profile1.php

2. profile.php applies specifically to "volunteers" page and profile1.php applies to individual profile pages

About "volunteers" page:

3. Takes individual profiel page ids as value to specific categories defined in this page. these categories are used in the theme file to display the volunteers under different categories.

4. This page uses custom theme called "profile.php"

About profile.php file:

5. Using the "extra" fields defined in "volunteers" page, page ids are queried and thumbnails are obtained from individual pages and displayed in a matrix under different categories in the "volunteers" page.

6. Each thumbnail is hyperlinked to a onMouseover event which calls a "get_profile" javascript function in the "<head>...</head> section in the "header.php" file.

About "get_profile" function:

7. This function pulls the individual profile page described by the page id corresponding to the thumbnail asynchronously (which means, the page doesn't reload during the process and this happens in background using javascript and XML). The contents of the page as rendered by the page's theme file (profile1.php) are then sent out to the "profilebox" <DIV> tag.

8. onMouseover event also triggers the hidden "profilebox" to be visible. It also positions the DIV at the center of the screen.

About profile1.php:

9. This theme file basically removes the header, sidebar and footer from the page to be displayed so that it only contains the main content to be displayed within the "profilebox" DIV.

About individual profile pages:

10. These are individual profile pages for each volunteer. Volunteer profile picture is uploaded using "add media" button on the wordpress editor.

11. As photo is uploaded into the gallery, it is "inserted into the post" by doing the following:

a. remove any link from the picture: select "none" in the link to field.

b. resize the image as necessary: default values are good in most cases

c. use full size image: select "full" and not "thumbnail" while inserting image from gallery into the post.

12. after the image is inserted into the post, use proper formating to add more profile content (eg. name, qualification, description, website etc.).

13. IMPORTANT: scroll down the editor page and select "profile1.php" as the theme to use.

14. save changes.

15. Browse to http://nyayahealth.org/volunteers to see the changes.

Specifications:

Thumbnails: 80px by 80px (defined in profile.php)

Image size: 300px by 300px (defined in "flexible upload" plugin, can be changed during file upload)

"profilebox" width: 340px (defined in profile.php)

position of profilebox: page scroll position-150px (can be changed from "move_box" function in header.php)

categories: defined in volunteers page extra fields (change here needs to reflect correspondingly in profile.php)

page id: unique ID associated to each page. it is displayed in address bar when editing that page as "post=35" etc.

Comments (0)

You don't have permission to comment on this page.

Loading…

Support our Work

How to Edit this Wiki

Loading…

WebsiteNotes

Staff and Volunteer Biographies on the Website

Theme Layout:

How to edit the website for minor text changes

Update the donation Page:

Modify the google forms:

Modify Google Checkout

Video on the page:

Fixing broken links:

Update reports with thumbnails:

Migrating the website:

How to modify web design

Develop interactive peer-to-peer donations portal

How I created the Volunteers' Profile page

WebsiteNotes

Page Tools

Insert links

Comments (0)

Navigator

SideBar

Recent Activity