Web Style Guide

• Colors
• Fonts
• Graphics
• Adding or Removing Content
• Style Reference

Colors

Fonts

Font Name	Font Appearance	Supplier	Similar Fonts	Used For
Aharony Quantum		Davka Corporation	Aharoni	Hebrew letters
Arial		Microsoft	Helvetica	.bignum, <h1>, <h2>, <h3>, <h4>, .subhead, <th>, <tr>, links
Boldmarks		CompuWorks	Flatbrush, Marlin, Ondine	banner, buttons, column headers
Book Antiqua		Microsoft		default text

Font Sizes

The default font sizes were used on all pages except for cal****.htm pages. This was done to enable stretchability and improve readability for those individuals who have difficulty seeing, but do not use aural screen readers.

To recreate the GIF files, the following font sizes were used:

• nameplate, "Nevey Shalom" text: Boldmarks, 48-point, bold, anti-alias;
• nameplate, address text: Arial, 10-point, bold, no anti-alias;
• nameplate, "Nevey Shalom" text in Hebrew: Aharoni Quantum, 44-point, bold, anti-alias;
• navigation buttons: Boldmarks, 16-point, bold, anti-alias;
• month name column headers: Boldmarks, 26-point, bold, anti-alias;
• other column headers: Boldmarks, 16-point, bold, anti-alias;

The attributes for all styles are described in the Style Reference elsewhere in this document. To obtain the best understanding of the application of font styles, view the site's style sheet (Nevey.css).

Graphics

The following are the recurring graphics that should be used appropriately:

Banner

This image ("NeveyLogo.gif") is placed at the top of all pages.

Buttons

     
     
The above buttons repeat on every page. Styles should be applied so that if one is on the page indicated by the button, it appears not as a pressable button, and the link is deactivated. The files are named, respectively, "homebutton.gif", "indexbutton.gif", "contactbutton.gif", "calendarbutton.gif", "aboutbutton.gif", "programsbutton.gif", "groupsbutton.gif", "linksbutton.gif". Each are 90w x 30h in pixels.

Dingbats

 
The above dingbats appear on the full-page calendars; two of the single candles are used for Friday evening; the twisted candle is used for Saturday. The first is named "littlecandle.gif"; the second, "havdcandle.gif". Both are 8w x 25h in pixels.

             
The above dingbats are used for Hanukah, and are placed in the calendar cell for the evening in which they are lit. Each is named "hanucand*.gif", where "*" is replaced by the number of candles. All are 26w x 16h in pixels. For an example of usage, look at the December 2002 Calendar.

This dingbat can be used for snow cancellations on the home page, calendar page, or full page calendars. The image ("snowflake.gif") is 14w x 14h in pixels.

Adding or Removing Content

All content needs to be created and added as links as described below:

• Calendars
• Activity Descriptions
• Megillah
• Megillah Articles
• Miscellaneous

Calendars

1. create a new calendar by copying the caltemplate.htm file to new file; name the file "calyymm.htm" (substitute 2-digit year for "yy" and 2-dight month for "mm" in the file name);
2. using a printed calendar, edit the secular month numbers and Jewish calendar month numbers;
3. change the link in the main calendar file (calendar.htm) for that month to point to the new calendar file;
4. if a new month is starting, change the "current calendar" link value in the main calendar file (calendar.htm);

Activity Descriptions

The Activity Descriptions and Reservation Information file (eventsyyyy.htm) is generated anew every year. To start a new file, copy the old one, and delete all events and their month headers in the file except for those for the month currently being added (which should be September, and might also include August); just keep the headers, and start adding new content month by month.

1. place a link for each event created into the main calendar (calendar.htm) under the appropriate month; place in order of day of the month and starting time;
2. place a link for each event created into the appropriate calendar file (calyymm.htm, "yy" is the 2-digit year, "mm" is the 2-digit month) under the appropriate cell block;
3. place a link in the Sisterhood and/or Men's Club page if the organization is an event sponsor;

Megillah

1. create a new file by copying the Megillahtemplate.htm file to a new file; name it "Megillahyymm.htm", where "yy" is the 2-digit year number and "mm" is the 2-digit issue sequence number for the year (this information is printed on hard-copies of The Megillah); edit year and sequence information in the file;
2. add a link to above file to the Megillah archives (megarchive.htm);
3. create articles (see next section);
4. edit the link on the home page (index.html) to point to latest issue; keep active until the next issue is on-line.

Megillah Articles

1. create a new file by copying the megtemplate.htm file to a new file; incorporate the 2-digit year and issue sequence numbers into the file name;
2. add links to appropriate Megillah****.htm page.

Miscellaneous

1. copy the generictemplate.htm file to a new file; edit content into new file;
2. add a link to above file to the home page (index.html) under the "What's New" heading; leave for two weeks;
3. add a link to the site index (lookup.htm) under the appropriate heading; if one doesn't exist, create a new one.

Style Reference

This section summarizes usage of the different styles; for the actual values, view the style sheet (Nevey.css).

a:hover

attributes for default links when the mouse hovers over the link

a:link

attributes for default unvisited links

a:visited

attributes for default visited links

address

attributes for default <address> items

.alignbottom

aligns contents of a cell at the bottom

.alignleft

changes text direction; used mainly in fly*.htm files

.alignright

changes text direction; rarely used; in meg0302pursp.htm

.announce

frames an element with a blue border and light yellow background, with blue text; used for highlighted announcements on home page

.bigger

sets the font size to large

.bignum

used in calyymm.htm files to display large blue numbers for the day of the month

.bluetext

used when a change of block is initiated and inheritance rules don't work; sets font to Arial, color blue

body

attributes for default <body> items

.boldblue

used for bold blue sans-serif fonts to highlight words in paragraph text

.button

along with ".button a:active", ".button a:hover", ".button a:link", ".button a:visited", sets attributes for navigation buttons

.calmoname

reduces margins for h4 tags in calender month name on calendar page

caption

formats table captions to not display

.centered

centers blocks of text when the default is not centered

dt

formats dictionary terms to bold

em

emphasized text: bold; for emphasized paragraphs, as opposed for hot items, which use <strong>

.fiftypct

sets column width to 50% of the table; used for two-columned tables

.flyerbody

attributes for the body of all fly*.htm pages

.hanucandle

sets width and height attributes of Hanukah candle dingbats for faster page rendering

h1

site title attributes; encapsulates the site's identifier image; on each page

h2

page header attributes; on each page

h3

within-page topic attributes

h4

attributes for subtopics under a <h3> topic

hr

attributes of horizontal rules; zero top and bottom margins; color blue

img

default image attributes: no borders

img.bordfleft

used in about.htm for the USCJ.gif file, which has a white edge; puts black border on it and aligns it to the left of subsequent text

.invblue

used for anchors or links, or table headers that visually display GIF images; blue on blue "invisible" text

.invwhite

used for anchors or links; white on white "invisible" text

.invyellow

used for month headers in calendar.htm where the month names are displayed as GIF images; pale yellow on pale yellow "invisible" text

.italictext

sets the font style to italic; primarily used to set off transliterations of Hebrew or Yiddish

.lilcandle

sets width and height on candle dingbat images for faster page rendering

strong

strongly emphasized text: bold, red; used for hot items

table.calstyle

used for cal****.htm files calendar tables

table.indentstyle

full-width table with a 10-pixel left indentation

table.mainstyle

full-width table; only for the first and main table on each page

table.normalstyle

full-width table

td.addrightspaces

pads contents of a table cell at the right

td.banner

attributes for the nameplate column

td.calblock

attributes for each cell in a cal****.htm calendar file table

td.conblock

attributes for cells in main calendar (calendar.htm) and contacts (contact_us.htm) files; can also be used for bordered non-calendar tables elsewhere

td.conbltwo

similar to td.conblock, except that it sets the width to 5% also; needed to adjust day of month column to the same size in all tables on the page; used in calendar.htm

td.maincontent

attributes for main content

td.navcol

attributes for navigation button column

td.normalcol

attributes for normal columns: align left and top

th.daytwo

width of "day of week" column in main calendar file (calendar.htm) tables

th.dayhp

width of "day" column in home page file (index.html)

th.email

width of "e-mail" column in table in contacts file (contact_us.htm)

th.entity

width of "entity" column in table in contacts (contact_us.htm)

th.event

width of "event" column in tables in main calendar file (calendar.htm)

th.eventhp

width of "event" column in tables in home page (index.html) file

th.individual

width of "individual" column in table in contacts file (contact_us.htm)

th.indivoneg

width of "individual" column in table in oneg sponsor form (onegform.htm)

th.monthname

attributes for "month name" column in tables in main calendar file (calendar.htm)

th.occasdate

width of occasion date column in oneg sponsor form (onegform.htm)

th.ocasoneg

width of occasion column in oneg sponsor form (onegform.htm)

th.phone

width of "phone number" column in table in contacts file (contact_us.htm)

th.time

width of "time" column in tables in main calendar file (calendar.htm)

th.timehp

width of "time" column in table in home page file (index.html)

tr.calhead

attributes for all calmmyy.htm file calendar tables

tr.conhead

attributes for rows in tables in main calendar (calendar.htm) and contacts (contact_us.htm) files; can be used if additional tables using that format are required

tr.highlight

background color set to pale yellow; aligns left and top

tr.mainhead

attributes for banner row: background color blue, center

tr.monthhead

attributes for month header row in main calendar file (calendar.htm): background color pale yellow

tr.normalhead

attributes for a normal table header: align contents left and bottom

tr.normalrow

attributes for a normal table row: align contents left and top