Movable Type Style Generator
As you probabl
y already know, Movable Type 3.2 was released and boasts a stunning featureset. I personally have plenty of plugins, tools and other announcements to make which are all related to this release. The first of which you've probably guessed by the title. I present the Movable Type Style Generator. Quite simply, click on any element on the page and a box will appear allowing you to change any of the element's properties from background color to font faces and styles. After you're done, hit the Download button to get the stylesheet, 3.2 compatible! The beauty of this style generator is since it creates 3.2 compatible stylesheets, you can use them across any of Six Apart's platforms, i.e. Movable Type, Typepad and LiveJournal.
The tool is quite advanced allowing you:
- Drag the style boxes around to make styling more comfortable for you
- Switch on-the-fly from a 1, 2 or 3 column layout
- Switch on-the-fly from a fixed to a fluid layout.
22 Comments
Leave a comment
Subscribe to Movalog's Feed
salguod said:
on Aug 26, 2005 9:43 AM | Reply
That's a pretty cool tool.
I noticed that when you set it for a 3 column layout you can change the basic sidebar baclground independantly, but the sidebar header and content applies to both sidebars. Is that the way the default 3.2 CSS is set up? That would be a bummer as my site has different color scheme for each sidebar. FWIW I'm running the IE based Maxthon browser.
I really want to upgrade to 3.2, but my blog is still partially based on the old 2.661 CSS even though I'm running 3.15, so I'm a little intimidated by the upgrade.
Arvind Satyanarayan said:
on Aug 26, 2005 9:46 AM | Reply
Hi Salgoud
Yes although you can change the background independantly the boxes are tied. This is how 3.2 defaults it to but you can easily change this once you've downloaded the stylesheet from the style gen.
The new templates can be intimidating, I was when I first looked at them, but if you spend some time (especially playing around with the style gen - that's how I learned) you'll get a better understand of what each style does.
Joerg Petermann said:
on Aug 26, 2005 6:25 PM | Reply
Hi Arvind, try and play how you want. A nice tool für all blog-templates of mt, tp and lj. Great work, Arvind! (Spread my words.)
Jeremy said:
on Aug 26, 2005 7:11 PM | Reply
Hey Arvind- The Generator is looking great. I tried it out once during beta and could not wait for the release. Now Anil needs to come by and link it on the Pronet site.
Nicole Simon said:
on Aug 26, 2005 9:09 PM | Reply
That looks absolutly amazing! I will play around with this even though I don't even use MT :)
Karl Elvis MacRae said:
on Aug 26, 2005 10:50 PM | Reply
Wow, that's cool. You have my donation via paypal!
Two things.
1) I set to fluid style, built a great-looking stylesheet, dropped it on a 3.2 blog (all default from MT). The main index looks great but the archive pages are fixed style, and look weird with skinny little columns: http://moronosphere.com/hackery/
and
2), it would be really really cool if I could take the style sheet I made, save it,and re-load it into this tool so I could use it for further hacks. I bet that's hard, but boy would it be cool. B^)
Arvind Satyanarayan said:
on Aug 26, 2005 11:04 PM | Reply
Hi Karl
1) Change the body class on your archives from layout-one-column to layout-two-column-right and you may need to copy some markup
2) Its on my todo :)
Karl Elvis MacRae said:
on Aug 26, 2005 11:51 PM | Reply
Rock on, that did it. Little more work on this and I'll have a new layout for my main site. Now if I can just figure out how to make three-column work...
Arvind Satyanarayan said:
on Aug 27, 2005 8:11 AM | Reply
What's you'll need to do is copy the entire div id called beta (the sidebar) and put it above the content div. Next you'll need to rename the three divs so that #alpha is always first followed by #beta followed by #gamma. Therefore the new column you created would be #alpha, the content column (the old alpha) becomes #beta, and the third sidebar (the old beta) becomes #gamma. Does that make sense? Its a little confusing at first but this may help: http://help.typepad.com/tips/custom_css.html
Karl Elvis MacRae said:
on Aug 27, 2005 9:58 PM | Reply
Arvind, do you mean in the CSS or the main index? Thanks... (I'm also trying to digest that page at help.typepad.com).
Arvind Satyanarayan said:
on Aug 27, 2005 11:32 PM | Reply
Your markup. In your templates, you will need to make changes as I've said above so that from left to right the columns are #alpha (LHS sidebar), #beta (content column) and #gamma (RHS sidebar)
ali said:
on Aug 29, 2005 3:31 AM | Reply
salam.hi.haletoon khobe.khaste nabashid..man aslan nemidoonam hamzabono hamvatanim ya na..vali ingadr moshkelato dardesar vase ye adame khob vase komak behem ke mt3.2vasam ro serveram nasb kone gashtam migardam ke vase u ham neveshtam khoda kone hamzaban bashim..montazeram aziz/./.bye
demonsurfer said:
on Aug 29, 2005 11:59 AM | Reply
Wow you've been busy with these plugins! Excellent stuff. Hey, if you ever wanted to develop a weather plugin for MT (since you're so damn good at them), there's a really nice php application a guy named Brian wrote at xoapWeather which would make a great basis imho.. currently runs with the option of either DB or flat-file cacheing, which is handy. Go check it out if you have a moment - it's running on my site at present too.
Sherwin Techico said:
on Aug 30, 2005 8:25 AM | Reply
Nice tool. I'm sure this will help out those who haven't gotten the grasp of CSS, have no time to do so, and just want to blog. Cool... I'll forward this to my friends, they'll enjoy it for sure.
Dan Wolfgang said:
on Sep 1, 2005 5:50 PM | Reply
Wow, Arvind. I'm just amazed at what this does! Excellent work!
Arvind Satyanarayan said:
on Sep 1, 2005 5:51 PM | Reply
Thanks Dan. Stick around for the next version which hopefully will be released within the next week or so and it gets even better :)
Allyn said:
on Sep 3, 2005 5:56 AM | Reply
Does anyone have a template for the three column Main Index? I don't know if I'm blind or what, but I cannot figure out where the content div is. No matter where I put the third column code, it never comes out correct. Help!!
Jeremy said:
on Sep 5, 2005 9:37 PM | Reply
you are now on digg.com :)
Arvind Satyanarayan said:
on Sep 6, 2005 4:15 PM | Reply
Ooh thanks for the heads up Jeremy :)
Swade said:
on Sep 9, 2005 6:11 AM | Reply
Arvind,
I've tried the generator a few times. My problem has been that even though I select the 'fluid' layout (3-column), the sidebars don't extend to the edge of the page. There's a buffer there (looks about 50px or so) and I haven't been able to find the code in the new sheets to get rid of it.
Any tips?
Big_D said:
on Dec 27, 2005 1:56 AM | Reply
Can anyone tell me where I can get the index template that goes with a three column style sheet generated by the style generator? Sorry if this is a dumb question. It seems like the default index template on 3.2 is layout-two-column-right. Where can I get the default three column? Also, is it called Vicksburg?
Big_D said:
on Dec 27, 2005 3:58 AM | Reply
Sorry arvin or whatever your name is, but this thing doesn't work well at all. Your generator makes it seem like you'll save time by just formatting the page without CSS, but in practice when you actually apply the downloaded style sheet it's garbage. A lot of the styling doesn't survive when applied to an real index page. Unless there's some customized index template that I'm missing, it would have been easier and less time consuming for me to just start from a basic three column template + stylesheet, if you're going to have to get dirty with the CSS anyway.