I've gotten so used to dicing images up in Photoshop/ImageReady- then opening the site in Dreamweaver. But now with MT, it has made me re-evaluate my long-standing method of designing for the web.

CSS has been around for a while but I never really realized the capabilities/potential it allows for. And I must say I am really impressed by what some people do.

First and foremost, my new MT blog needs a redesign before I start posting heavily. But I can't seem to do this as easily as laying out tables in Dreamweaver. I take it that this redesign would be refered to as 'skinning.' From what I gathered from studying all day long today is that 'skinning' requires the modification of two main files- 'index.html' and the 'CSS Stylesheet' correct?

1) My first step in editing an MT blog was to use notepad. I discovered that this was too much trial and error on my patience. It's just too time consuming to have to go back and forth then rebuild- especially when css is relatively new to you.

2) I saw some generators online- even one which wants to charge you money for its use. I wasn't too impressed by their results but I was rather impressed by the fact that people took the time to code these. Much better than what I can do. I guess they aren't too bad when you consider it may be a good starting place. But configuring it with all my current plugins and specialized tags seemed like a pain unless you know what tags to look out for.

3) My second attempt was to try Dreamweaver. I created a 'dummy' file named index.tmpl based on the default index.html file. I opened index.tmpl in Dreamweaver. Next I applied the appropriate Stylesheet. Its looked unusable- the formatting got rather wacky. And the MT tags showed up since it hasn't been processed.

4) I started reading up on people converting their files over to PHP. I had noticed alot of the nice looking sites incorporated PHP- as to why this has proven a bit elusive. What I'd really like to know is if there is some way to use these PHP blog files, CSS, and MySQL in Dreamweaver so that it shows up reliably in design view? If so, can someone please post their steps?

Perhaps there is no way to do this reasonably (at least visually- quick, beautiful, and down-low dirty.) Maybe the only way to make this happen is for me to turn on the other side of my brain and get into the code (which I usually try to avoid because of time constraints.) So does anybody have any good tips on how to design a knock-out site really efficiently?

-jujubee

I wouldn't really consider my design to be all that "knock-out" but it isn't too bad.

I just use the notepad method. I'm a coder by trade so I like to look at the meat and bones of an operation. And if you think that skinning MT is bad, you should try skinning Coppermine. Coppermine is giving me so many headaches trying to get it to look exactly the way that I want it...

So my vote is in for just using notepad. I guess after taking a little time I am getting pretty good at it and implement what I want without too much trouble. For some really inspiration css designs I would suggest checking out the CSS Zen Garden.

- Matt

Notepad isn't very design friendly for most "artists" but if it works for you than there's not much more to say.

lol. I checked out zengarden and became thoroughly depressed... The thoughts which came to mind was 'how the hell' and 'geez I really suck at this.' Thirdly it was 'I may have to look for a new career if this is what I am up against.'

Back up just a bit.

Set aside the MT tags for the moment. Get your design concept down first. You can still use Dreamweaver for this and its css editing tool. You can add a 3rd party css editor if you wish (topstylelight is free and good). Use dummy content for this stage.

Once you're happy with the design you can start working with MT. Make a testing weblog to develop things in. Take a look at the basic templates and you'll see what's required to pull various bits of data and build your page. Introduce each section one at a time -- make sure you're happy with its functionality and then move on to the next.

This is also the time to build MT includes or PHP includes into your design. Removing your common elements like navigation, footer, headers and stitching them in as includes will save you loads of time and heartache later on.

Thanks for the tip Colburn! That makes very good sense.

Unfortunately, since I'm new to MT, I'm not sure what PHP includes I will want to include in the future- there's just so many plugins/added functions that it makes it hard to decide which one's I'll be looking for in the future. I take it that the only way that this is done is just through expiramenting over a decent period of time.

You like topstyle better than dreamweaver for editing MT indices?

Depends on which version of Dreamweaver you're using I suppose -- they keep changing their CSS editor.


Use what works for you.

What I do is open my MT page in a browser, then view source. I save that as index.html somewhere on my drive. Then I copy the CSS from MT into either Dreamweaver or TopStyle and save it as a CSS file. I open index.html in DW and adjust the style sheet link to wherever I saved the CSS. Then I hit F12 to preview in a browser.

I edit the CSS and refresh the browser page to see the results. When I am satisfied, I copy the CSS to a test blog in MT and try it out there in a blog with some dummy entries so I can make sure the CSS is also working in the archives, comments and trackbacks. When that is done, I then copy the CSS from the test blog to my main blog.

If I have to make adjustments to the index template while editing locally, I try to keep notes so I can make the same changes in the MT template, like rearranging the order of the elements.

It's a system that works for me ... and it took several tries to come up with something that I was comfortable with.

Thanks for the tips Demi! I was playing around with a backup of the index file in dreamweaver- applying the CSS style as well. Unfortunately, the Dreamweaver preview looked horrible. So now I'm back to editing the CSS straight in the MT configuration window, rebuilding, and refreshing alot...

So does anyone know how to get the MT CSS 'Editor' to directly color-code tags and be resizable!?!?!?!! Sounds like an idea for a plugin...

Bah ... the DW preview sucks. Preview in a real browser for a more accurate view of your page. Keep it open and just hit refresh after each edit.

I use TopStyle Lite; I suppose if you have DreamWeaver that you can use TopStyle. I can see what all the tags look like in the Preview window and use that to build my site. I have a separate folder on my web space for testing new layouts; I have a copy of the 'index.php' file and the 'site-styles.css' file there so I can see how it is rendered from the site.

I find myself doing 95% of my editing and even designing straight from the MT control panel. I used to edit the index templates in Dreamweaver, until I discoverd some weirdness going on, which I suspect may be some hidden characters in Dreamweaver MX for Mac. I only edit CSS in Dreamweaver now, and use a dummy template by doing view source and saving the file from my browser.

Always, always, always make a backup copy of the template you are editing and save it as a .txt file. And after about an hours or so of progress, make a new .txt file back up of the most recent version. I can't stress how important it is to make back ups. Keep two, the original and current back up.

Here are some links to help you with the CSS:
http://www.w3schools.com/css/css_reference.asp
http://www.stopdesign.com/also/articles/replace_text/
http://www.simplebits.com/bits/
http://www.alistapart.com/topics/css/
http://www.thenoodleincident.com/
http://www.positioniseverything.net/
http://www.sitepoint.com/subcat/css

I'd echo the comments about TopStyle Lite, but before I get into standalone CSS files, I work up the basic design using TSWWebcoder. This is a web code editor that offers preview capabilities, CSS library and even an ftp client that I haven't yet used.

I build a trial page then play with the styles on the page. Then when I'm happy that I'm 80% of the way there, I copy the styles into a css file and revert to TopStyleLite, Browser and ftp client combo. Make your change in TSL, confirm the upload in FTP, press reload in browser - takes no time at all.

The other big benefit of TSW is you can check the web page in as many browsers as you want to configure in TSW. I have found the instructions somewhere on the web how to install multiple versions of IE and can call anyone of them from TSW, as well as installed instances of NS, Mozilla and Opera.

All this of course on a PC; Macs YMMV!!