November 11, 2005

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.


Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!

Posted by Elise Bauer on November 11, 2005 to Style
Comments(0) | Email to a friend | Printer-friendly version


Trackback

If you would like to send a trackback
please use the following URL: http://learningmovabletype.com/cgi-bin/mt32/mt-tb.cgi/272

Comments


Post a comment

(Before posting a comment please see the Comments and Trackbacks Policy. Do you need help troubleshooting your weblog? Please post questions and requests for support at the MT Support Forums. Thanks!)




Remember Me?

(you may use HTML tags for style)

Email to a friend

Email this article to:


Your email address:


Message (optional):