So you want to add a blog to your existing website?

Moveable type is a freeware blog that you can accomplish this with. Upon installing movable type you get a site that looks like the one below.




When you first bring it up it is somewhat dissapointing. Most of all it isn't branded in any way for your current web site. Sure you might be able to put your company name in the title, but what about the layout that you have already put blood sweat and tears into?





You might think of trying some of the other styles. This one above is called Cityscape. Cityscape is a template that comes with Moveable type along with several others that can be changed from the administration page. I was tempted to use this one because it matches the city theme of my web site and it does look pretty sleek.

In Movable type if you want to change themes you just go to the Design tab in the mt.cgi  page and you select the styles option. This will bring you to a page that shows your current style selected. If you would like to see more options click default styles.




So how do you make these styles fit with your current theme!? Below I am going to share some basic tricks to get it going.

Step 1: Install Moveable Type .

For a basic tutorial on how to get Movable type installed on your domain go here.

How to Implement Movable Type

Step 2: How the Blog Works and Where Critical Style Sheets are Located

screen.css and base.css


Base.css sets up the base of each page. Moveable Type uses Perl in the style sheets. It uses Perl to read IF statements in your style sheets to determine whether the style being used is 3 collums 2 collums or something else. It reads this information in a commented out section at the top of the style sheet. It also gathers information such as the author name of the style and so on which becomes visible when you select a style from the select a style page in the administration console.

Screen.css is the other imported style sheet and screen controls the elements like the logo, the header etc... We are mostly going to be working with Screen.css

Step 3: Add your own folder for your own style sheet

We will start the process by looking at where the screen.css is located for the cityscape theme.

screen.css is located at mt-static/themes/cityscape-sf/screen.css

In this folder are all the images that go along with that style for screen as well.

And at mt-static/themes/ there are different folders for all the different styles available to you.

This is where you add your own folder and your own screen.css file inside that folder.




If you look at the image above you will notice that I added a folder called Wikisoftpeople. Inside here are my images for the wikisoftpeople layout such as the header the banner, my navbar etc...

In the screen.css are all the important pieces of information I used to include all of these properties.

Step 4: Editing the style sheet.

There are two ways to customize your web site from this point on.

At frist I thought maybe I should simply use my current CSS from my homepage and try to just implement specific features of the blog onto each page.

It seems particularly easy because moveable type works with doc tags that are built into it. Here is an example of one below.  

<$mt:BlogName encode_html="1"$>

If you put this doc tag in your html it will show your blogs name.

With this in mind I figured all I had to do was include these tags where I wanted to include blog features..

What I found while trying to achieve this effect though was that it was the doc tags are rather complex and that they work in conjunction with each other. 

I decided to try a different approach first. I decided to look for a default Movabletype layout that looked similar to my own page allready and modify it so it fit within my web site. I.E. editing the screen.css file on my own.

This works and did not take more than a few hours. This part you will have to work out much on your own, because each persons own stylesheet is defferent. Play with the different styles and try to add your own images and backgrounds and change the widths etc...  


For example I had to move the Perl doc tag for footer out of its div tags and all the way to the bottom for the footer to stay at the bottom.

 
Post your own integrations in the comment boxes below. If you need any help with this on your  web site I would be glad to help.