upr00ted

I think XHTML might be the death of me. If anyone can tell me how to insert code elements as text see: <$MTArchiveDate format="%Y/%m/%d">/<$MTEntryTitle dirify="1">.html or some CSS wrapped in a code tag and still have it validate I’d love to hear about it. \ doesn’t seem to work nor does wrapping it in quotes and I really don’t want to write things like (less than)$MTArchiveDate format=”%Y/%m/%d”(greater than).
For now this site is not valid XHTML.

I’m in the process of bringing one of the sites I develop up to XHTML compliance, and decided it would be fun to try some CSS tricks as well. Going from a heavily table based layout, with code that is sometimes 6 years old or created by Word to CSS has had its little glitches and SNAFUs but, now that it is basically done I decided to add drop-shadows to the many images displayed on the site.
The interesting thing with this site is that it only has a handful (maybe 5) images that shouldn’t have a shadow applied so I didn’t want to go through and wrap all 300 or so other image tags in a div because I didn’t see any reason to.
After a few tries here is what I came up with:
img {
background: url(/parts/images/shadow.gif) no-repeat bottom right;
padding: 0px 5px 5px 0px;
}
This adds the drop shadows using a simple gif that is clear except the last 5 pixles on the bottom and right where it fades from black to the background color of the site. Here is a Photoshop version of that gif so that you can change the background color to fit your needs.
The real trick was taking the shadow off of the other images without having to add much code, luckily they were mostly already wrapped in divs so I just told those to have no padding and gave them an empty image to display as a backround. (It didn’t work to specify background-image: none which is what I would have liked to do. Any thoughts?)
Then for those couple of other images that were just floating out in never never land, I made a class noshadow:
img.noshadow {
padding: 0px;
background-image: url(/parts/images/empty.gif);
}
I suppose the padding:0px is overkill, but for my purposes it didn’t matter.

My good friend David is in the process of setting up his own Movable Type blog and had some questions about setting up archiving schemes. As I had not set any up I figured I’d give it a try. Here are my findings based on the “Hint 1″ at NSLog().
Here is perhaps a slightly more correct version of ‘Hint 1′ for archiving.

Under Weblog Config:
keep your “Local Archive Path” pointing to the absolute path to the archive directory: /home/html/mt/archives
and keep your “Archive URL” pointing to the archive directory on your server such that it would come up in a browser: http://www.example.com/mt/archives/

In the upper right hand part of the Weblog Config page there is a link to “Archiving” Click it.
On this page you should have two things checked, “Individual” and “Monthly”
In the text box for “Individual” Archive File Template place the following text:
<$MTArchiveDate format="%Y/%m/%d">/<$MTEntryTitle dirify="1">.html

This tells MT to store your files in sub-directories under “Archives” as defined on the main Weblog Config page. These sub directories are of the format Year/Month/Day/ and then your file is named by its title. So %Y/%m/%d turns into 2004/04/01 and then a slash is appended.

Next change the “Monthly” Archive File Template text box to:
<$MTArchiveDate format="%Y/%m/"$>index.html

This tells MT to build a page for each month of entries that is placed in the archives directory in sub directories of Year/Month/ and called index.html.
This means that if someone wants to see your entries for the month of March 2004 they would be directed to
http://www.example.com/mt/archives/2004/03/index.html

This is useful if you don’t want all of your blog entries stored in the same folder, or if you plan to have so many blog entries that it will be hard to navigate them in the future.

Keep in mind this only applies to the backend of the blog and your users won’t be the wiser, unless you are converting from having all your blogs in one folder. Then you run into the problem that this re-writes all of your permanent archives to a new folder structure.

I’ve been tinkering today and have my very first tutorial for CSS ready to publish. This is a modification of “The Thrash Box” as described at Vertexwerks combined with the Glish ALA Style (which is based on the sliding doors model found at ALA)along with my own little modifications.
Here is the basic shape of the layout:

The general benefits of this layout model are that you can use a graphic (read pattern or color) background for you box, but you don’t have to make the files huge to slide behind the text.
It consists of 4 corners, and one pattern for the background.
Check out the CSS here:
/* Based on the ThrashBox at http://www.vertexwerks.com/tests/sidebox/ */
/* And, ALA style from Glish http://glish.com/css/9.asp */

.links a {
color: red;
text-decoration: none;
}
.links a:hover {
color: white;
background-color: red;
}
If you just want to see it in action here are the links:
html file
CSS file

The major difference between this and the Thrash box is that I included a footer that holds the two bottom corners, this frees me up to put a background on the area that contains my text as well as on the entire box. In the Thrash box model you have to use the background for the main box part to put in the lower-right corner which means you have to make the file big enough to stretch if the box is dynamic. Mine also gives you a footer at the bottom or padding if left blank.
Let me know what you think of this option, I checked it in Safari, Camino, FireFox, Mozilla, IE 5 Mac, and IE 6 Win, but don’t have IE 5 Win. So far so good.