JB 3623 Internet Communications

You can adjust the edges of your fixed width site by creating a graphic with borders and assigning that graphic to the #everything ID…

#everything {
background: #fff url("images/760.gif") repeat-y;
margin: 0 auto;
width: 760px;
padding: 0;
}

You can download the graphic here and see the results.

Rounding Up

On March 13, I discussed how you make your site have a fixed width with rounded corners on the main content area. While I demonstrated the technique in class, I did not write up detailed instructions for those of you who may have missed it. The file I used to demonstrate this technique can be downloaded from the site to give you a starting point.
(more…)

In WordPress, the name of your site (Weblog title) and a short description (Tagline) are set in General Options under the Options tab in the administration section of your site.

There are times when you might want to use a logo as the header for your your site instead of just having HTML Text as your title. Absent an easy explanation of how to do this, many of you have resorted to deleting the Weblog title and Tagline values in the General Options of your sites.

(more…)

When I posted the previous code for adding the ObjectY script to your headers, it included some smart quotes, which are a serious problem in code since they aren’t part of the ASCII standard. This has now been fixed in the post below so if you had problems getting ObjectY to work, copy and paste the code again.

In setting up this semester’s theme, which is the foundation for your web designs, I omitted a line of code that affects how your polls displays. Here are the steps to fix my error on your sites:

1. In the Admin section of your site, go to Presentation -> Theme Editor
2. From the files listed on the right side of the page, click on “Header,” which will bring up the header.php document in the editing textarea.
3. Scroll down to the end of the head section, marked by the closing </head> tag, and paste this code right above that tag:

   <?php wp_head(); ?>

4. Click the Update File button.

In addition, I have discovered that this version of the Democracy plug-in inserts some extra div tags when you use the shortcuts we discussed in class. I actually, think this is a WordPress limitation, but that’s another story. To not have extra divs added, you can do this while adding polls and then switch back after you’ve added the polling code.

1. In the Admin section of your site, go to Users -> Your Profile
2. At the bottom of that admin page, there is a checkbox that says, “Use the visual rich editor when writing.” Uncheck that checkbox and click the Update Profile button to save this option. You can reverse this action when you’re done.
3. Go to Options -> Writing
4. Uncheck the box that says, “WordPress should correct invalidly nested XHTML automatically.”

In theory, your polls will no longer be messed up, but if you still have problems, try using Safari to edit just those posts that have polls.

One other problem you’ve had is that the polls all show up as having been voted. This is a problem I ran into last semester that I forgot about. Under Manage -> Democracy Poll, go down to General options and uncheck the box that says, “Log IPs.” Also change the number of days before a cookie expires from 365 days to 0 days. You will also need to delete the cookies related to the Democracy plug-in in your browser of choice for the items to show up correctly.

The student sites will be under construction most of the afternoon. Don’t make any changes to your style sheets or local files or they may be lost.

Update: The conversion of the sites has been completed…

Here are the basic instructions for submitting the final version of your Semester Project, which is due no later than the end of class on April 27, 2006. You may submit your final files anytime between now and the end of that class period. I’m assuming you know how to log into one of the Macintoshes in one of the labs and that will be required to complete these steps.

(more…)

During the last class, there was a request for a couple of tools, one to choose hex color values used in HTML markup and CSS and also a list of entities used to display special characters. Here are some gizmos for that purpose:

• HTML Color Chart — A simple chart showing the 216 “web-safe” colors and their hex values
• Color Schemer — A simple tool for choosing complimentary colors for web pages and graphics
• HTML 4.01 Entities Reference — A list of special characters, their names along with the names and reference numbers used to get them to display correctly in HTML pages

In addition, since we’re talking about typography this week, here are some useful sites related to using type on your web pages:

• Typography for the Web — some excellent tips for using text on the web
• UsableType: Web Typography Guide
• The Anatomy of Web Fonts — a good article on the principles of good typography for the web

Finally, since many of you are graduating seniors, we’ll look at a self-contained resume containing very clean HTML and CSS markup that you can use as a template for updating your own resume.

All the blog materials for this class have now been migrated to a local server located in the Paul Miller building. Please make a note of the new permanent URL of the class web site and the student blogs that are now linked under Students in the right hand column of the main page:

http://pmjb3623.jb.okstate.edu/

If you want to keep up with how the class is doing, you can subscribe to the RSS feeds for Entries and Comments that are linked at the bottom of the main class page and at the bottom of each student’s blog. The RSS feeds will update when new entries and comments are added allowing you to know when new material has been added without having to visit the site constantly to check. We’ll cover this in the next class…