These are my notes on webpage styling issues with WordPress, and also my plans for and historical notes about this website.

Overview

This website uses a “child” theme of WordPress.org‘s twentyeleven theme. Please refer to that website for general information and then to the “Historical Notes” herein for specific changes.

Plans

• Remove all old flat5.net content sitting at $LOGIN/html at the new flat5.net but replace each primary *.html page there with a forwarding notice to the new location for each page. (Gotta research to figure out how to set a 5-second delaying automatic forward that includes a manual “click here” link in case a visitor has Java (or JavaScript?) turned off.)
• August 2012: Remove all old content at blogspot.com and my user credentials.

Historical Notes

This section is in reverse chronological order, newest at the top.

05/15/2012

To have a graphic appear with a blog entry on the Flat5 “home page” but not in the blog entry itself, edit the blog entry and use the graphic icon to upload the graphic. Save the changes and close the uploader but do not click the insert into page nor the use as featured image controls.

The graphic will appear on the Flat5.net home page along with the first few words from that blog. But when the reader clicks through to read that blog, the cover graphic will not appear.

When a blog contains more than one graphic, the first one will appear on the Flat5 home page. Any graphic can be set to be “number one” as follows:

1. Edit the blog entry of interest;
2. Click the “Add Media” icon to open the Add Media popup;
3. Select the “Gallery” tab;
4. In the list of graphics, “grab” the one of interest and move it to the top of the list or, alternatively, sequence the graphics by typing in a sequence number (1, 2, 3, …) in the box to the right of each graphic;
5. If available, click the “Save all changes” button;
6. Of it that button is not available, click “Show” by the graphic of interest and, therein, click the “Save all changes” button; and
7. Finally, close (via the “X”) the Add Media popup.

Note: You may need to flush your browser’s cache before you will see the changes take effect.

12/01/2011

The original plan was:

Export “flat5.net” as an XML file and download it. Write a script to extract the image links back to blogspot.com. Use the result to “wget” those images and then upload them to “flat5.net”. Hand-edit (!) all pages and substitute the local images for those back at blogspot.com so that “flat5.net” is no longer dependent upon those images that are, currently, found only on the blogspot.com entries.

In practice, however, there was a whole lot more to it and I understand, at least to some degree, why WordPress did not automate that process. The complexity has to do with how blogger stores images and how, over time, they changed how they did it. (My guess is I ran into three different methods of directory naming, file redirecting and html-nesting.)

I ended up using “wget -x” (love that “-x” option!) several times after some hefty “grep” operations on the XML, running “find” down various paths and renaming directories,  dealing with directories whose name started with a hyphen which is always annoying in Linux, and mucking about directly in the mysql database — a potentially disastrous approach only attempted after making multiple, complete backups of all the family jewels.

And — Hooray! — to the best of my testing, it’s now done. I’m 100% (cross my fingers) disconnected from blogger. All the blog contents, text and graphics, are now here.

11/24/2011

The old flat5.net’s static content, except for a couple of pages that are being dropped, has been converted to the new format and placed under menus on the new home page. The old locations will remain for a few months but will eventually be replaced for forwarding links to the new location.

I have the list of images still linked from the new website, and have copies thereof now safely tucked away here. But changing the links means dabbling in the WordPress database — for that, I’m awaiting two books from Amazon.com that should give me enough information to make the updates in that regard. Once completed, flat5.net will be completely disconnected from its old blogger.com roots.

08/28/2011

I set up the “child” theme as per WordPress instructions. Therein, I set text and heading fonts and also the tighter line and paragraph spacing, all as noted below (08/15/2011). And because I have the WordPress link in a footer, I suppressed the standard one in the style.

Finally, to get all the header images in place, I manually uploaded all 58 for the new child theme. This appears to have duplicated the images in the file system, one set for the original “twentyeleven” theme and the second for the new “twentyeleven-child” theme. I posted a note (and some suggestions) in the WordPress.org Theme forum in these regards.

Visually, everything looks as it did but the “twentyeleven” theme is now in its original condition. As needed for bug fixes, etc, “twentyeleven” themem can be updated without corrupting any of my changes. (All of my changes are in the child theme, as per WordPress’s recommendation.)

08/15/2011

Tried a number of experiments.

First, I set up a “child” theme page as per the instructions from WordPress. This was pretty straightforward and allowed me to set fonts, paragraph spacings and so forth as I wished without modifying the style.css of the original theme.

But when I “applied” it to flat5.net, all of the images I uploaded for the header were ignored. (Apparently the database for the “child” style doesn’t list those images. I verified they were still on the system but the new “child” style didn’t inherit them as I had expected.) So I switched back to the original style and the images re-appeared.

I posted a question in the WordPress Forum for Themes in this regard. (Click HERE.)

So I ended up making the style changes back in the original style.css file:

• For “body, input, textarea”, I ended up withfont: 15px Georgia, “Times New Roman”, Times, serif; /* Added EDS 08/15/2011 */
• For “h1,h2,h3,h4,h5,h6″, I now havefont: 15px “Poor Richard”, “Helvetica Neue”, Helvetica, Arial, sans-serif; /* Added EDS 08/15/2011 */
• In the “p” text element, margin-bottom is now reduced to 0.6em; and
• Line spacing is reduced to 1.2 (instead of 1.6).

I experimented with some “p+p” settings but found that a graphics insert messes up the indent in the paragraph in which it resides. This may be a Firefox issue but, regardless, it looks bad enough that I won’t use it. So there’s no “p+p” setting. Incidentally, the margin-bottom was down to 0.2em with paragraph indenting but, without it, it needs to be 0.6em as noted above.

08/14/2011

Posted a question in the WordPress Forum (Themes area) about setting up a static home page but then linking in the “blog” pages. I later found the answer on my own. (See HERE.)

Unknown Date

I suppressed this theme’s link to the administrative login that appeared on every page, but failed to document where/how I did that. Oops!

Regardless, that change was intentional: I do not want a “Login” or “Admin” link appearing anywhere that casual users might look.

To login, follow this link.