Performed complete re-do of the visual integration of WordPress starting from a fresh classic theme. On the first attempt, I could not integrate the main site’s global style sheet because my understanding of CSS was not deep enough. The first attempt consisted of substantial modification of the WordPress style sheet, making global updates impossible.

The second visual integration starts with the same global style-sheet used by the rest of the site. Relatively modest changes to the WordPress style-sheet were needed to finish the job.

Altered Banner.php, index.php, and footer.php to imitate the positioning of the rest of the site.

Had a hard time getting the side-bar to float. Had to move it from the footer.php into the index.php. Had to make ‘position’ of side-bar ‘static’ rather than ‘absolute’. It would not float while absolute. Had to eliminate the ‘clear’ declaration from the comment id. This prevented the side-bar from floating next to the comment.

For future reference, the Glen’s World footer is needed to extend the star background of the container beyond the header to the bottom of the page.

3/13/2013 Update: To clarify for future reference:

• Header.php in the WordPress themes folder 1) references the site style sheets, 2) opens the site container div, and 3) includes the site banner div;
• Footer.php in the WordPress themes folder 1) closes the site container div and 2) includes the site footer div.

As of this writing, the theme folder is themes/Experimental2Classic which is a copy of the themes/classic folder.

I tried to install the fast and secure contact form plug-in and experienced an error message after entering the captcha code. Said that it could not set the cookie’s. I found this page on the subject regarding the same error in a comment captcha plug-in by the same author.

Oddly, I was able to send one message from the form when I switched themes back to the classic theme, added one comment to a random post. But then when I switched back to the custom theme, I got the same error message.

This is vaguely similar to the problem that CoffeeCup HTML editor has in uploading a file to a new folder. It cannot write to the new folder until at least one file has been created there. After the first file is created, it uploads fine.

In any event, I could not get it to work, so I uninstalled it.

The classic theme is much easier to modify than the default Kubric theme. To fully integrate into Glen’s World, I needed two layers of wrappers. The classic theme already provides one empty wrapper called rap. I modified that one to create the star background. I created a second wrapper (calling it rap2) to hold the bulk of the posts and the sidebar menu in front of the green background. Bringing it all together requires a good understanding of the “position” style. What helped the most was understanding that “absolute” isn’t! Absolute is relative to the parent container (as long as the parent is not “static”). Also, you need to remember to ‘clear’ the footer. Otherwise, the footer won’t sink to the bottom.

After getting rap centered on the page and the posts sitting next to the sidebar, the rest was pretty easy. Replace the text header with a graphic; replacing the footer with the usual footer, placing the main menu in the left margin, all fell into place.

Posts are formatted by the <p> tag. The classic theme messes with the spacing between lines and letters. This made the text in the main menu look odd. Deleting the modifications to the spacing corrected that problem.

This page describes how to remove unwanted items from the meta sidebar menu.

Being a novice, I found tweaking the default (Kubric) theme to be difficult. Switched to the classic theme which is much easier to understand. Still need to figure out how to move the side-bar around. But the rest of style.css is pretty straightforward.

header.php contains the style sheet references

index.php is the main blog page

style.css contains the styles.

Edited header.php to reference the menu style sheets

Edited index.php, adding a <div id=nav> to include the menu

Edited style.css to add #nav code used by the menu.

I probably now need to surround everything by the container.

Update: After finding all of this out on my own, I discovered an article on the subject. Rats!

In the Admin console, under Appearance –> Edit, edit the Header.php file.

Near the bottom look for: <div id=”header” role=”banner”>

Below that, remove this code:

<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div><?php bloginfo(‘description’); ?></div>
</div>

This will remove the text from the header.

To modify the graphic underneath the now extinguished text, edit or replace the file ‘kubrickheader.jpg’ located at ‘wp-content/themes/default/images/’. (The boarders of this header blend in with the edges of the body of the page, so you probably want to edit the graphic to replace the blue box in the middle with the graphic you want to substitute.)

There were other tweeks that needed to be made to style.css to clean up the right and left side of the banner. Those modifications are marked by comments.

Created a new banner gif, but the edges looked jagged. This tutorial about transparent gif creation (specifically the discussion of the matte option) solved the problem.

Added WordPress (this blog). Will need to study how to visually integrate WordPress with the rest of the site. Found this article on the subject.