Bit o' Housekeeping
Notice anything different today? Hmmm? Well, I took the morning to make a few little changes that I've been meaning to get around to: I've updated the tiles on the left (something I had always planned to do a couple times a month) and made them a bit smaller. I wanted to be able to use different sized tiles to create these pattern squares instead of making them all a uniform size, so that means that the patterns had to show up as backgrounds. What this means for you is that you cannot just right-click on the squares to save the tile, because the squares are really transparent gifs with backgrounds. Instead, click them to see how they tile in a new window, then right-click and "save background image" or "view background image" and save that way.
I also found out how to make my TypePad category entries show up in alphabetical order for the LinkBlog. For any of you MTfolk or TypePadders with advanced templates, the way to do this is with <MTEntries sort_by="title" sort_order="ascend">, in case you were wondering. And, hey, guess what; I just realized my category page here isn't loading at all. Well, harrumph. Just too much housekeeping to keeping a blog, don't you think? (Not to mention all those new rooms I want to add on...) Okay. let me go grab the mop and pail and see what I can do about this.
Posted by taz on June 16, 2004 at 06:08 AM in Site News, TypePad | Permalink | Comments (6) | TrackBack
BlogScarf: day ii
A small note on yesterday's BlogScarf post: I've updated that entry to link to a better page for the example that lets you view different backgrounds behind the image. Also, I'd just like to menton that this .gif, in particular (the leaf), is a pretty touchy example of what can be done. Since we are using .gif transparency to define the image area, we lose the ability to blend from the color area to the surrounding white field, so all of these image will suffer at least a little from the "jaggies", and an image like the leaf that has very thin areas is especially prone to that problem. But part of the reason for making the "different-backgrounds" example page is to show how different patterns can minimize or maximise the problem, and using a more demanding image like the leaf is good for that (this one, for example, with its light and dark print, visually reduces the problem). Some background patterns will work better, and some will look worse, so you'll want to try different backgrounds with different images. I'm testing various things at the moment - like trying out images with shadows, for example - and will be putting together a gallery of .gifs-with-transparency that are best suited for this usage.
Posted by taz on April 19, 2004 at 01:49 AM in BlogScarf, Site design, Site News, Tips, TypePad | Permalink | Comments (3) | TrackBack
BlogScarf?
So. I've had a little bit of time in the last day or so to play around with an idea that has been on my mind a while: creating site graphics that use repeating patterns behind .gif transparency to create a design. I've re-written that sentence five times, and it still isn't clear at all, so just go look here. The image on the left is simply a .gif in which the negative space is white and the positive space is transparent, and I've used CSS to give the .gif a background image. (Like this: <img src="https://citrusmoon.typepad.com/photos/tiletest/scarf.gif" border="0" style="background: url(https://citrusmoon.typepad.com/photos/tiletest/lilly2.gif);">)
The idea is to make something that is totally simple to insert into any web page even if one is a complete novice, that will allow you to change the background (and therefore the whole feeling of the graphic) very easily, and that offers a lot of pizzazz at very small download sizes. For that example blog page, for instance, I used only the options offered by Typepad's most basic template sets, with no customization at all (no converted, advanced templates, in other words). To put the image in the left sidebar I just made a TypeList "link" entry, ignoring "Link title" and Link URL" and putting the html in the notes section and then, under "Configure", choosing "Display notes As Text" (following Matt Haughey's tip for including a Google search form). Since I didn't want any text on top of the graphic, though, I just put a spacebar space into the TypeList "List name" field when creating a new TypeList. Setting up the entire blog probably took about 20 minutes (though of course I already knew exactly what I wanted to do, and already had the transparent .gif image and the title image).
I'm calling this a "blogscarf" at the moment, because like a scarf or a tie, it enables you to quickly express different looks and moods while the basic "suit" remains the same. I'm not sure about the name, though; too silly? Suggestions, anyone? Please?
I've only just started really finally dealing with this, and I want to put together a variety of graphics enabled this way, so I'm not quite ready to set up a section for it yet. However, you can play a bit by going to this example page where you can click on different backgrounds to see how they work behind another magic .gif. Click a tile and you'll see the background of the .gif appear; click another tile and the background will change. Tthis will give you an idea of the possibilities. Please note, though, that in order to allow you to see different backgrounds behind the .gif I used Javascript; when actually putting one of these on your own page, there's no need to do this - you just put in the .gif with a background image, then change the background or the .gif image whenever you feel like it. This page has a lot of images to load, but the real deal is really quite small. The one I used on the actual blogscarf blog page takes up about 6-7K altogether. Once I get a few designs together I will create a space for this, with everything spelled out. In the meantime, Thoughts? Ideas?
A note: I've updated this post to link to the improved version of the second example page instead of the one-big-gif-on-top version.
Posted by taz on April 18, 2004 at 06:16 AM in BlogScarf, Site design, Site News, Tips, TypePad | Permalink | Comments (5) | TrackBack