I could use a little help getting started with a custom template and theme for a new site. I've got all the tools I could possibly need, I'm editing on a Mac so I can (ideally) use a tool like Dreamweaver to edit CSS and test styles, I can hand code and edit right on the server with Coda or TextWrangler, or even via a secure shell in a basic Unix terminal text editor. But I am stuck on a couple of most basic issues. I've been fiddling for 2 weeks and getting nowhere. The docs are relatively impenetrable.
Now the goal here is to create a basic website with only a few main pages, mostly stripped down of all the MT widgets. I'll only be using it as a CMS to edit and lay out a few basic pages. I'm using the Professional Blue theme. Then I need to create two blogs with a visually unified theme, although it will need different templates since it will need the full MT gadgetry.
The docs suggest linking to an external file if you want to edit templates. I'm not quite sure how this is structured. I want to modify the Professional Blue template, there are several professional-blue folders that contain various .css files. I am trying to find the correct folder (or folders) to just duplicate, and then link to those files in the Design>Manage Website Templates area.
I have made some hand coded changes to the Stylesheet under the Manage Website Templates. It starts with the Stylecatcher theme addition. It appears I should be editing a duplicate those .css files which would then be linked to that duplicate file. This all ends up on the site root styles.css and I am not quite sure how it's being generated. I keep editing the stylesheet in the MT editor and the changes just do not appear on the site. Most of the css properties in this stylesheet aren't documented, I think my local edits are being overridden by globals, which I can't seem to track down.
I could use a little basic direction on what is going on here. I am not sure what I am editing, how I am supposed to link to the external file and modify it directly, then have it automatically update upon rebuild. Can anyone give me a little perspective on this situation? It could help me immensely.
Reported on Movable Type 5
I would recommend adding to your toolbox FireFox with the FireBug plugin - it let you see which CSS rules are in affects for any element, and where they are defined.
For now, forget about themes. work within the template editor in MT. (or, copy the template out to your editor and paste it back when you are done)
And third, always remember that any change that you make will not be visible in the website until you publish the template, and then you may need to refresh the browser to see the changes.
And about the CSS, add your changes below the StyleCatcher's lines.
Hope this helps.
Ah, thanks, that Firebug recommendation will be particularly useful. The themes carry such complex CSS classes, with both local and global constants, it is almost impossible to reverse engineer it.
I've been adding changes below the StyleCatcher lines in the main template but the Themes seem to override my changes. For example, I can't change the typeface on blog entries. I hope FireBug will help. It seems like I'm adding a CSS definition below something in the StyleCatcher CSS sections and it is not overriding definitions higher up there.
But still, it looks like I have to modify the themes to change fundamental settings like horizontal dimensions of the page. You know, back in the MT 4 days, I had a dynamic width theme set up, instead of the fixed width static layout. I'm not sure where I'd even begin to change the theme to do that.
I figured I should document the specific problem I encountered, for the record, in case someone else runs into this. FIreBug was essential in backtracking the CSS to solve this, thanks much for the recommendation.
The sample Lorem Ipsum data in a clean website setup has a problem: it is custom styled in the story editor as Rich Text. It carries about a dozen specific attributes, just to do simple Helvetica. You can change the CSS stylesheet all you like and it will not affect this formatting, they are customized in the text entry window. Change the Format: attribute from Rich Text to None, to see the attributes, and delete them.
I feel stupid for wasting so much time trying to figure out why my hand edited CSS code had no effect on only this one element. It never occurred to me to check formatting at this level. I go back to MovableType v1 and I have never used the Rich Text editor, I hand code everything. I used FireBug and discovered why all the CSS was being overridden.
Hi Charles,
If you coding was filled with junk, it is likely that you've added the "Lorem Ipsum" text to movable type's Rich Text editor via copy and paste.
When you do that, you paste also the html syntax from the source. When that source is a Ms Word, what you paste is even worse, carrying in a lot of garbage.
The best thing you could do it to always paste inside Notepad first and then from there to Rich Text, or first to Convert Line Breaks and then to Rich Text.
Kind Regards,
Mihai Bocsaru
----------------------------------
Daily Movable Type Consultant
Web Development
Movable Type Consulting
Six Apart Partner
http://www.pro-it-service.com/
----------------------------------
Movable Type Demo
http://www.movabletypedemo.org/
----------------------------------
Open Melody Demo
http://www.openmelodydemo.org/