CSS file

Hi
Initially I thought I was the only one bumbling my way about the template CSS files. When I was a newbie (well...I still am), I didn’t know where they were placed, again coming from a TXP/WP background where template consisted of template code and CSS. I found it quite unconventional to manage the template through the manager but upload the CSS through a manage files screen.
Is there any reason why this is so? I guess there are quite a few designers asking this question, since in our mental model, the HTML and CSS should go together.
Can’t these be placed together for better integrated template functionality? Any feedback would be appreciated.
icubyx

I too have spent a significant amount of time with WP and unless I was doing a blog only site that needed many of the features built into WP, I would be happy if I never had to build a template in it again with all the function calls and the inability to see it.

With MODx I and many others build the templates in plain HTML and CSS (outside of MODx in a local dir). Then I copy and paste the HTML template into MODx place the document object calls into the template, i.e. [*content*]. As far as placement of the template files you can put them wherever you want. Personally I package the main template files as follows:

<br />/assets<br />	/templates<br />		/customtemplate<br />			/styles<br />				main.css<br />				ie.css<br />			/images<br />				logo.png<br />				header_bg.png<br />				body_bg.png<br />

For editing and changes to the css I use either my web editor application [HTML-Kit] or the VIew/Edit function in Filezilla to edit the remote files in real time.

As far as the template is concerned you do have to edit the html in the manager OR if you use Firefox you can use the ItsAllText extension which allows you to edit textarea contents in a text editor of your choice, save it and go back to the manager to hit save. This is the one I do.

Another option is to install one of the codehighlighter plugins that are available to you.

In 0.9.7+ I think you will be able to reference files as elements (I think I have explained this right) and edit the local or remote files outside the db or manager if you want.

Hope his helps,

Jay

GaneshXL:
I agree with you that the flexibility MODx offers in templating is incredible. Never any doubts about it - in fact I got drawn to it precisely for this reason. However it wasn’t the first encounter that enticed me. I first read about MODx on TxP forums from DavidM and took a peek at it.
What drew me to TxP initially was the clarity of templating it offered to my designer brain. There never was any doubt about how to do things. That was also the reason people like Jon Hicks threw their weight behind TxP - not having to radically rewire their brains for (at least simple) templating.

But for its inability to deal with hierarchical pages and the creators’ denial about the need for it for a long time, I wouldn’t have moved to WordPress. But WP being primarily a blog system, my search for a static site CMS brought me to MODx. What made me turn away from MODx the first time (around 0.9.2) was the fact that the templating was much less intuitive than I was used to.

Jay:
Precisely
Quote from: smashingred at Dec 07, 2007, 06:59 AM

I too have spent a significant amount of time with WP and unless I was doing a blog only site that needed many of the features built into WP, I would be happy if I never had to build a template in it again with all the function calls and the inability to see it.

With MODx I and many others build the templates in plain HTML and CSS (outside of MODx in a local dir). Then I copy and paste the HTML template into MODx place the document object calls into the template, i.e. [*content*]. As far as placement of the template files you can put them wherever you want. Personally I package the main template files as follows:

<br />/assets<br />	/templates<br />		/customtemplate<br />			/styles<br />				main.css<br />				ie.css<br />			/images<br />				logo.png<br />				header_bg.png<br />				body_bg.png<br />

For editing and changes to the css I use either my web editor application [HTML-Kit] or the VIew/Edit function in Filezilla to edit the remote files in real time.

I do my templates in the same way, however I find it odd that I have to Paste the HTML code using Resource Manager > Templates while I have to upload CSS files using the file manager. I know the kind of settings in the template manager may not lend themselves to uploading the HTML file so no issues here. But wouldn’t it be more convenient to let users upload the associated CSS through the template manager itself - maybe using fields below the editor? and similarly for chunks if they use their own CSS? (maybe this could become a snippet for development )

0.9.7 promises us UI customization ability and maybe that will help address some of the UI custom requirements each of has...time will tell

I may realize that I am wrong after a few sites with MODx, but this is a point of view I feel I should to bring forth as a fresh third person POV while I am still new and ’un-indoctorinated’ if I may use the word . Take it as a user test observation if you like

You can make a snippet to include an external file, and place the snippet tags in the manager’s template edit field. Then you can work with the template file as you like.


You can also use a document as a CSS file.

Susan,

Thanks for pointing out the HTML Template via snippet suggestion. I had never thought of that.

That’s why I am here everyday.

Cheers,

Jay

That is an interesting idea. Never thought of that.

As for the css file and editing. When I work in WP or any other editor that supports online css editing you run the risk of not having an up-to-date css file locally. At first I also found it odd to have to edit locally then upload the changes, but once I got the hang of it and realized that with this workflow my local docs would also be kept current I have come to like working like this. I also like to remove the risk of a client messing up the css by having it at their reach.

That’s a great idea. thanks!

It’s interesting to see how everone does it.

I usually create a localhost copy of the site using XAMPP.

Then I have the template editor open in the manager, a copy of the local CSS file open in Dreamweaver in a separate window, and in a third window, the local site is open in a browser (sometimes two browsers in two windows).

When I get things the way I want them, I cut and paste the template into the remote manager and upload the css file via Dreamweaver. (Although I have to admit that Susan’s idea now has me thinking about putting the template in a file and editing that with Dreamweaver also.)

For future (minor) changes to the .css file, I usually do the something similar but the manager and browser windows are looking at the remote site while Dreamweaver has the local file open. I upload every change tot he .css file form Dreamweaver and then refresh the browser window.

Bob

If you had a Mac, you could use Rapidweaver

Quote from: BobRay at Dec 10, 2007, 04:32 PM

When I get things the way I want them, I cut and paste the template into the remote manager and upload the css file via Dreamweaver.

BobRay, Don’t you find DWs FTP painfully slow? I had used DW for years and then dumped it as could spend countless wasted minutes for it to do what takes HTML-Kit or Filezilla seconds to perform. I tried DW 8 CS3 and still found it slow (though 100X faster than GoLive ever was).

I have wondered about going back to having two site copies for clients. I don’t do it now. I do develop locally but usually end up doing a lot of finish work on the live site. (I do have back ups but I wonder if I should be really mirroring and using sort of a crude version control system).

Few of my clients have the wherewithal to mess things up. Typically they are just posting content. I am fairly explicit as to what elements and styles they should use in the RTE.

I’d be interested to hear what others are doing on using two sites (local and remote identical).

Cheers,
Jay