« Adding a Calendar to Your MT Blog | Main | Banner Images »

Background Patterns

mtbadge-small.gifAdding a background pattern to your weblog is pretty straightforward in Movable Type, requiring the change of only one line in your stylesheet.

1. Pick a pattern. You can make your own pattern using a tool like Photoshop, or you can pick a pattern from one of the many sites that offer patterns for free (for non-commercial use).

patterns.jpg Patterns from Kaliber 10000.

squid_fingers.gif Patterns from Squid Fingers

2. Make a tile.

bk_pattern.gif

Patterns are based on tiles, small files of the design that, once repeated, create a full pattern. Once you find a pattern you like, you need to save the gif or jpeg file of the tile upon which the pattern is based. One way to do that is to view the source of the HTML of the page with the pattern, see the file for the tile, open up a new browser window just with that file, and copy the image to your hard drive. Another way is to right click on the tile, and select save file from the right click menu.

3. Upload the tile to your server. You can upload the file to your server using either FTP or the Upload File feature of Movable Type.

4. Change your stylesheet.

For MT version 3.2

In your templates window, open up the stylesheet CSS file. Find the section of the template that governs your specific style theme. In the default MT 3.2 stylesheet, that is the Vicksburg theme and it occurs about halfway down the stylesheet. Under /* page layout */ find the following section:

body
{
   min-width: 720px;
   color: #333;
   background: #36414d;
}

Change the background line so that it looks like this:

background: #36414d url("http://www.site.com/pattern.gif") repeat;

Make sure you put in the correct URL location for your background image file.

Save and rebuild your template. To see the pattern take effect, you may need to first clear your browser cache.

For MT versions 3.1 and earlier:

In your templates window, open up the stylesheet CSS file. At the very top of the template there will be some code that looks something like this:

body {
    margin: 0px 0px 20px 0px;
    background-color: #0F314E;
       text-align: center;
}

Change the background-color line so it looks like this:

background: #0F314E url("http://www.site.com/pattern.gif") repeat;

Make sure you put in the correct URL path for your background image file.

In a similar manner you can add a background pattern to your banner. Find the banner ID on your stylesheet and change the backround-color attribute in the same way as the body background.

Save and rebuild your stylesheet template. That's it!

Links: Kaliber 10000 Squid Fingers patterns Citrus Moon

Please let me know in the comments if you know of other sites with patterns available for use, either for free or a fee.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)