1. Click "Login" (faint) in the upper right corner of any page.
2. Log in. (you must already have name & password)
3. Use the table of contents to go to the page you want to edit.
4. Under the page's title click the edit tab.
5. In the "Body" make corrections.
   • Occationally there is a "Summary window for front-page teasers above the Body window. Ignore it.
6. Save your work:
   • Warning:  Clicking the "View" tab will discard any unsaved work (it's dumb).
   • Click the floppy-disk Icon at the right end of the 3rd row of icons
   • Or, scroll to the very bottom and click "Save."
7. If you mess up, don't save your work
   • Hit your browsers back arrow, or
   • Click the X near the "outline" tab in the upper right.
8. Linking:
   • To link zfacts.com/node/4, select keywords, click the "link icon," enter  /node/4  Note that "<other>" will appear. Example:  Link to node 4
   • To link the page zfacts.com/about, use this:   /about  Example: double click this in edit mode:  Link to about
   • An external link should be followe by  , found a image/xlink.gif  (use the IMCE Picture icon)
   • Tricks:
   • If you are on a node page you any of these:
     • /node/4   ../node/4   or  ./4
     • because  ..  means go up one level from where you are (at /node)
     • and   .   means go from here
     • Starting with  /  means start from the base path:  zfacts.com

Normally, put the editor in "Full HTML" text format mode (just below Body-edit window.

• There are 5 types of paragraph:
  • "Null" -- just line break, <br />, at the end of a line
  • Normal:     <p>
  • Division:    <div>
  • No-Indent:  <p style="text-indent:0px;">
  • Indented:    <p style="text-indent:2em;">
• Using normal paragraphs:
  • The first Normal will look like "no-indent"
  • The following ones will look like "indented" paragraphs.
  • But the HTML will still just show: <p> .  The trick is in the hidden CSS.
• Typing normal paragraphs:
  • If you just type and hit "enter" you will get a Normal paragraph.
  • If you hit Shift-Enter you will get Division paragraphs
• Overriding Indents
  • No-indent and Indent can be found in "Styles," and they will override <p> or <div>.
• Switching Types:
  • Use the "Paragraph Format" drop-down just right of "Styles" 
  • Check It's Label before you hit the drop down arrow
    • "Format"  means it's in <br /> mode.
    • "Normal"  means it's in <p>  mode
    • "Normal ..."  means it's in <div> mode
    • It will produce a paragraph of its mode.
    • If it is in <p> and you type 3 lines with Enters after the first 2, you will get a normal paragraph with breaks after the first 2 lines.
  • Switch Null >> Normal.    Click "Normal"            in Format drop-down
  • Switch Null >> Division.   Click "Normal (Div)"  in Format drop-down
  • Switch Normal >> Null.    Click "Normal"            in Format drop-down
  • Switch Division >> Null.   Click "Normal (Div)"  in Format drop-down
  • Switch Normal ⇔ Division    Click the other one 
• You might need to click  Source  and see what's going on.

PopNotes pop open when the mouse goes over the reference. To make this happen the footnote reference and the footnote's number (in the note) must match and be formatted precisely. For footnote NN these formats are:

• [ #NN]  <= this is the reference format.[#1]  Underline Required!
• [ =NN]  <= the same number in the note itself. No underline.
• [ #Gross National Product]  <= Another OK reference.  Underline Required!
• [ =Gross National Product]  <= Another footnote number. Must match perfectly -- caps and all.

These formats will not be shown to the visitor, but you will see them when editing. Here are the other rules for making popNotes work:

1. NN can be any number or words and most symbols, e.g. NN could be "GNP(1999)". But [#there's a limit].
2. Do not put  [ or ] inside the NN.
3. Do not us  [ #  or  [ =  anywhere except for marking references and foonotes.
4. PopNotes can include links, pictures and formatting.
5. Put each footnotes in it's own row of a table at the bottom of the page.
6. The footnote [#delimited] footnote number [#should] go at the start of footnote. The space after [=NN] is optional.

Some hints about making the table and the notes:

• Set the Text format to "Full HTML"
• Make the table by using the table button near the end of the top button row.[#3]
• Set the number of collums to 1 and the number of rows to about the number of footnotes you expect.
• Add a row when needed (or delete one) by right-clicking the row and choosing from the "Row" menu.
• "Edit" this page and look at the PopNotes: table to see what it should like.

HoverNotes Title

• The hover notes should have a title as shown below.
• Put the underline on before the bold and then make it a normal paragraph.

[#PopNotes]

Position your cursor before the paragraph that the image goes to the right of.

1. Cick IMCE icon (2nd row)
2. Choose Image
3. Alignment: Right
4. Alternative Text, and Advanced / Advisory-Title  are both a good idea. 

Caption

Image with a Caption -- use a table

1. Make a Table with 1 Col and 2 Rows.
   1. Set Width smaller than the image -- ~50px
   2. Border = 0
   3. Align: Right
   4. Optional:  Go to "Advanced" tab and after  "width: 5px"
      • add  " ; margin: 0 -8px 0 5px; "  (Note the initial " ; " )
2. Add the Image with IMCE (picture icon in 2nd row).
   1. Click Inside the table.
   2. Click the IMCE icon.
   3. Select your imaged and click "Insert"
   4. Set the width you want (make sure litle lock is locked).
   5. Go to "Link" tab if you want to link the image to, e.g. ../p/416
   6. Click   OK
3. Add a Caption
   1. Type caption and center it.

See Files/IMCE Setup for tech stuff

Add Image with a Popup Window Link

1. Just link any phrase and select "popup window" from the Target menue in CK editor.
2. The links should be the url of the image.
3. Good to put the width and heigth in for the window.

The "Magically Transfer Content" box in the edit screen allows

1. Content to be place in difficult locations (header and sidebar).
2. Difficult content (widgets) to be placed in the body at view time.

How it works:

1. Place special content in a magic box:
   • <div class="zMagic zReplace" ref="target ID" > content to transfer </div>
2. Make a target div or span, e.g.:
   • <div id="target ID"> empty or not </div>
3. When the page loads, the content replaces the target div or span, and the magic box is deleted.
4. class="zMagic zInsert" will cause the content to go inside the target div or span.

Headers and Right Sidebar:

1. These have pre-set target-ID's:  id="magicHeader",  and  id="magicSidebar"
2. It's best to use "insert" with the header.

Widgets, Gizmos and Javascript:

1. These will tend to execute before the move, so Javascript must be disabled.
2. This is done by replace both "<"s with "[=" like so:
   •     <script ...>maybe some JS</script>
   •     [=script ...>maybe some JS[=/script>
3. Then inclose the broken script tags in magic span tags:
   • <span class="zScript"> broken JS script </span>
4. The repare will be made after the move.
5. Some gizmos need this (e.g. Iraq war quotes), some don't (e.g. Republican Debt), and some cannot tolerate it (e.g. National Debt Gizmo#05).

Example:  Edit this page and check the "Magically Transferred Content" editing box below the regular Body editing box.

Be sure to use Text format = PHP code

The Home Page:

1. A "sticky" entry at the top the introduces the site
   1. Publishing Options: Check "Promote to Front Page," "Sticky."
   2. Top entyr is the About page and it contains jQuery code to suppress it's title/header on the home page.
2. 10 most recent site entries listed below
   1. Configuration / System / Front page / Number of posts
   2. At the bottom of any node, in edit mode, find "Publishing Options." Check "Promote to Front Page."
   3. It's good to use a "Drupal Teaser Break" (ckEditor button) for Front-Page Stories
3. Druapal automatically provides a page-overflow system.

Menus:

1. The "Main Menu" provides the Navigation Bar across the top.
   • A page can be added to it with the menus below the edit window
   • The Main Menu can be organized at:    Home » Administration » Structure » Menus / List-Links
2. The Left-Bar Content:
   • Go to the bottom of an editing-version of the page
   • Use the Book Outline
   • Make the page a book and set its weight to determine its position.

Books:

1. The rest of the site is divided into drupal "books."
2. Each book can have one drupal blog -- the last chapter of the book.
3. "Add Child Page" selects a "My Book Page," but "Add Content" alows other types of pages to be added.

Blogs:

1. Each blog must have a different (ficticious author).

The Structure of a page is mainly controle by:  Structure / Blocks. However the theme itself puts that Main Menu into the top Navigation Region. See zframe/!Notes on zframe.txt.

The Header contains a block, "Micro Login for Top Right" that contains both the login and the magicHeader div that can be loaded by using the Magic-Block-Input.

Paragraphs:  The first paragraph is not indented, but the next one, and subsequent ones are. However, if a table or some non-paragraph occurs, then the next one is not indented. See Wysiwyg editing.

1. Magic Block
2. Zero or more Widgets
3. Google ad

The Magic Blocks will contain whatever is inside these divs in the Magic-Block-Input box (below Body input box when editing).

• <div id="sideMagic"> This page's unique sidebar stuff. </div>
• <div id="headerMagic"> This page's unique header stuff. </div>

The Magic-Block-Input must be used with "PHP code" as the text format. Do not style the magic divs; they disappear. Put any HTML, PHP, JS inside of them.

To turn on a widget/gizmo:  Structure / Blocks / Configure / Show block on specific pages (at the bottom).

The Google ad shows up automatically.

There Column Layout:   10+220+525+20+175+10 = 960. pad+Col#1+Body+space+Col#2+pad.

• Saving after editing may give a Huge Red Error Message
  • Inside the message is the full html of your page.
  • It contains some bad characters.
  • Copy the full html and paste in a good text editor -- which will reject the bad characters.
  • Reload the page (all your changes will be lost).
  • Edit the page, click "Source" and replace all the html with what you have in your text editor.
  • Works with Edit Pad Lite 7, and ??

The Table Border Bug:

Why does a table have a gray top border with either border=1 or border=0?

It can be fixed by using a style (such as style="border: 0px;" ) inside of <tbody>

Displaying HTML for visitors to copy.

Google displays code in a <textarea>. The trouble is that CK editor tampers with what's in this area unless it's using PHP mode. But then you can't do regular editing.

If you use PHP text formatting and then switch to Full HTML and back, CK will change > and > etc into &lt; or whatever. UNLESS, you change  <textarea>stufff</textarea>  to <pre>stufff</pre>.

Then you can change to Full HTML and back and then switch to textarea. 

Why does a table have a gray top border with either border=1 or border=0?

It can be fixed by using a style inside of <tbody>